jquery轮播图效果左右划动 解决定时器和点击冲突和li补小bug两种方法

时间:6年前   阅读:4774

很多网站首页都需要用到图片轮播效果,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个demo分析讲解左右划动轮播图效果,这里有说到解决定时器和点击效果冲突和后面li补小bug两种方法

直接上代码里面有详解

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			#tm{    
				width: 750px;    
				height: 291px;    
				border: 2px solid darkblue;    
				margin: 100px auto;    
				position: relative;    
				overflow: hidden;    
			}    
			#tm .dk{    
				/*width: 3750px;*/    
				width: 4500px;    
				height: 291px;    
				border: 2px solid darkgreen;    
				position: absolute;    
				left: 0;    
				top: 0;    
			}    
			#tm .dk img{    
				float: left;    
			}    
			#tm ul{    
				position: absolute;    
				bottom: 0;    
				right: 0;    
			}    
			#tm ul li{    
				list-style: none;    
				float: left;    
				width: 116px;    
				height: 29px;    
				line-height: 29px;    
				text-align: center;    
				color: white;    
				font-size: 12px;    
				font-family: "宋体";    
				background: black;    
				opacity: 0.6;    
				margin-left: 1px;    
			}    
			#tm ul li:hover{    
				/*没下划线*/    
				/*text-decoration: none;*/    
				/*有下划线*/    
				text-decoration: underline;    
				color: #c00;    
			}    
		</style>    
		<script src="../tu/jquery-1.11.3.min.js" type="text/javascript"></script>    
		<script type="text/javascript">    
			$(function(){    
//	先弄一个大总管变量    
	var t = 0;    
//	让定时器在自动跑的时候,点击是无效的  用一个变量去判断    
	var k = 2; //用来对应能否点击的状态   1代表不能点击,2代表能点击 (这个可以不写,我看了写这个东西后bug更多)    
//	自动轮播   控制自动轮播的函数    
	function hs(){    
	t++;    
////	###########(*****)下面的(我删了,想看到02页面里看)可以这样写  最后的小bug,当li opacity变色的时候图片跑到第6个(最后的时候)  li的颜色也回到第0个    
	if (t==5) {    
	$('#tm ul li').eq(0).css({'opacity':'0.8'}).siblings('li').css({'opacity':'0.6'});    
	}    
	if (t==6) {    
	$('#tm .dk').css({'left':'0px'});    
	t=1;    
	}    
//	计算大div应该到达的left值    
//	var y = -750*t;    
	var y = t*-750;    
	k=1; //  在函数过程中,在运动之前先变成1  在函数运动过程中   1代表不能点击    
	$('#tm .dk').animate({'left':y+'px'},300,function(){    
	k=2;//运动300毫秒完事后  再变成能点击2	
    
	});    
//	让t号li透明度变0.8,兄弟li透明度变0.6    
	$('#tm ul li').eq(t).css({'opacity':'0.8'}).siblings('li').css({'opacity':'0.6'});    
	}    
	var dsq = setInterval(hs,1000);    
	var w;  //在单击事件前 ,先声明一个变量,用来清除定时器     因为每次点击都会出来一个定时炸弹,快速点击很多次会出现定时炸弹叠加				
    
//	给li加鼠标单击事件    
	$('#tm ul li').click(function(){    
	if (k==1) {//当k等于1时,不能点击    
	return;    
	}    
	clearInterval(w);    
//	(解决定时器和点击效果冲突)  1、当我点击的时候(没有定时器)清理定时器    
	clearInterval(dsq);					
    
//	解决定时器和点击效果冲突  方法(二)   设一下定时炸弹来控制  (本来是300毫秒的,设置成400毫秒,为防止毫秒数有误差)400毫秒后恢复定时器    
	w=setTimeout(function(){    
	dsq = setInterval(hs,1000);	
    
	},400)    
//	获得当前被点击li的序号    
	t=$(this).index();    
//	计算大div应该到达的lfet值    
	var left = t*-750;    
	$('#tm .dk').stop().animate({'left':left+'px'},300);										
    
//	stop()消除叠加运动    
//	$('#tm .dk').stop().animate({'left':left+'px'},300,functon(){    
////	解决定时器和点击效果冲突  方法(一) 2、用回调函数来恢复定时器  可以在执行完前面运动的300毫秒后,再执行回调函数里的内容    
//	dsq = setInterval(hs,1000);    
//	});    
//	让当前被点击的li透明度变为0.8,兄弟li透明度变为0.6    
	$(this).css({'opacity':'0.8'}).siblings('li').css({'opacity':'0.6'});    
	})    
	})    
		</script>    
	</head>    
	<body>    
		<div id="tm">    
			<div class="dk">    
				<img src="../tu/t01.jpg"/>    
				<img src="../tu/t02.jpg"/>    
				<img src="../tu/t03.jpg"/>    
				<img src="../tu/t04.jpg"/>    
				<img src="../tu/t05.jpg"/>    
				<img src="../tu/t01.jpg"/>    
			</div>    
			<ul>    
				<li style="opacity: 0.8;">狂欢一夏</li>    
				<li>母婴品类日</li>    
				<li>浪的冒泡</li>    
				<li>生鲜洒水</li>    
				<li>买2免1</li>    
			</ul>    
		</div>    
	</body>    
</html>

代码效果图片:

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

上一篇:如何控制沪深300期权的投资风险?

下一篇:关于2019年端午节休市安排的公告

网友评论

请先 登录 再评论,若不是会员请先 注册