JQuery 实现轮播图（一）

最新推荐文章于 2023-09-14 18:36:20 发布

凌冰_

最新推荐文章于 2023-09-14 18:36:20 发布

阅读量336

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/hlx20080808/article/details/108472538

版权

JQuery 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

要求：

1、每隔3秒换一张图片，循环播放；

2、鼠标悬停上显示图片，时钟停止；离开鼠标，时钟启动；

3、单击左边或右边显示图片，时钟不停止；

HTML页面

<body>
		<!--焦点图-->
		<div class="banner">
			<div class="my">
				<!--图片-->
				<ul class="slide_box ">
					<li class="active"><img src="img/3.jpg" /></li>
					<li><img src="img/2.jpg" /></li>
					<li><img src="img/1.jpg" /></li>
					<li><img src="img/4.jpg" /></li>
					<li><img src="img/5.jpg" /></li>
				</ul>
				<!--数字-->
				<ul class="num">
					<li class="active">
						<a href="#">1</a>
					</li>
					<li>
						<a href="#">2</a>
					</li>
					<li>
						<a href="#">3</a>
					</li>
					<li>
						<a href="#">4</a>
					</li>
					<li>
						<a href="#">5</a>
					</li>
				</ul>
				<!--左边右边-->
				<div class="op_btns">
					<a href="#" class="op_prev"></a>
					<a href="#" class="op_next"></a>
				</div>

			</div>
		</div>

	</body>

CSS样式

	* {
				margin: 0px;
				padding: 0px;
			}
			
			ul {
				list-style: none;
			}
			
			a {
				text-decoration: none;
			}
			/*焦点图*/
			.banner .my {
				width: 700px;
				height: 401px;
				margin: 0px auto;
				overflow: hidden;
				position: relative;
				z-index: 1;
			}
			
			.num {
				position: absolute;
				bottom: 20px;
				right: 290px;
				z-index: 2;
			}
			
			.num li {
				float: left;
				width: 30px;
				height: 30px;
				line-height: 30px;
				border-radius: 50%;
				background: papayawhip;
				text-align: center;
				margin: 0 4px;
				font-weight: bolder;
			}
			
			.num li a {
				color: #000;
			}
			
			.num li:hover,
			.num .active {
				background: coral;
			}
			
			.num li:hover a,
			.num .active a {
				color: #fff;
			}
			
			.banner .slide_box li {
				height: 401px;
				position: relative;
			}
			/* 焦点图左右按钮 */
			.banner .op_btns a {
				display: block;
				width: 32px;
				height: 60px;
				cursor: pointer;
				position: absolute;
				margin-top: 80px;
			}
			/*左边图片*/
			.banner .op_prev {
				background: url(img/b_left.png) no-repeat center top;
				left: 0;
				top: 90px;
			}
			/*右边图片*/
			.banner .op_next {
				background: url(img/b_right.png) no-repeat center top;
				right: 110px;
				top: 90px;
			}

jquery脚本处理

function changeImg2() {
	//索引
	var index = 0;
	//停止
	var stop = false;
	//图片li
	var $imgLi = $('.slide_box').children('li');
	//数字li
	var $numLi = $('.num').children('li');
	//鼠标悬停到数字上
	$numLi.mouseover(function() {
		stop = true; //启动
		//获得数字索引
		index = $numLi.index($(this));
		//图片出来，后面的图片消失
		//stop()停止当前正在运行的动画
		$imgLi.eq(index).stop().fadeIn().siblings().fadeOut();
		//添加当前样式，移除后面兄弟的样式
		$(this).addClass("active").stop().siblings().removeClass('active');
	}).mouseout(function() { //离开停止
		stop = false;
	});
	
	
	//时钟
	var timer=setInterval(function(){
		//在启动，就不执行下面的
		if(stop) return;
		//index
		index++;
		//判断是否》=图片的个数
		if(index>=$imgLi.length){
			index=0;
		}
		//图片出来，后面的图片消失
		$imgLi.eq(index).stop().fadeIn().siblings().fadeOut();
		
		//添加当前样式，移除后面兄弟的样式
		$numLi.eq(index).addClass("active").stop().siblings().removeClass("active");
		
	},3000);
	
	
	
	//单击右边
	$(".op_next").click(function(){

		//索引
		index++;
		
		//判断是否》=图片的个数
		if(index>=$imgLi.length){
			index=0;
		}
		//图片出来，后面的图片消失
		$imgLi.eq(index).stop().fadeIn().siblings().fadeOut();
		
		//数字添加样式
        $numLi.eq(index).addClass("active").stop().siblings().removeClass("active");

	});
	
	
	//单击左边
	$(".op_prev").click(function(){

		//索引
		index--;
		//判断索引<0
		if(index<0){
			index=$imgLi.length-1;
		}
		//图片出来，后面的图片消失
		$imgLi.eq(index).stop().fadeIn().siblings().fadeOut();
		
		//数字添加样式
        $numLi.eq(index).addClass("active").stop().siblings().removeClass("active");

	});
	
}

//调用
changeImg2();