仿网易严选官网（轮播图）JavaScript

最新推荐文章于 2023-08-12 09:41:18 发布

glglgl1

最新推荐文章于 2023-08-12 09:41:18 发布

阅读量684

点赞数

CC 4.0 BY-SA版权

文章标签： javascript html5 css 开发语言

本文链接：https://blog.csdn.net/glglgl1/article/details/124203601

这篇博客介绍了如何使用JavaScript来创建一个类似网易严选官网的轮播图功能。重点讲解了HTML图片写入、JavaScript代码实现以及设置轮播图的autoplay属性和intervalTime，确保图片能自动播放并设定间隔时间为3000毫秒。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="banner">
			<div class="bannerPic" id="bannerPic">
				<div class="carouselImgCon">
					<a href="#"><img src="images/pic_01.jpg" style="opacity: 1;"/></a>
					<a href="#"><img src="images/pic_02.jpg"/></a>
					<a href="#"><img src="images/pic_03.jpg"/></a>
					<a href="#"><img src="images/pic_04.jpg"/></a>
					<a href="#"><img src="images/pic_05.jpg"/></a>
				</div>

html图片写入代码

js部份图片写入代码

var bannerPic = new Carousel();
bannerPic.init
({
	id:'bannerPic',				
	autoplay:true,			
	intervalTime:4000,		
	loop:true,				
	totalNum:5,				
	moveNum:1,			
	circle:true,				
	moveWay:'opacity'
});

id:'bannerPic', 为调用HTML页面的图片id名

autoplay 属性是 boolean(布尔) 属性

autoplay 属性规定一旦视频就绪马上开始播放。如果设置了该属性，视频将自动播放

intervalTime:3000,自动播放的时间内

autoPlay:function()
		{			//自动播放功能
			var This=this;
			this.timer=setInterval(function()
			{
				This.next();
			},this.settings.intervalTime);
			
			//鼠标放上去的时候停止
			this.box.onmouseenter=function()
			{
				clearInterval(This.timer);
				This.timer=null;
			};
			
			//鼠标离开的时候继续播放
			this.box.onmouseleave=function()
			{
				This.autoPlay();
			};
		},

下面是页面显示结果