1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

麦包包轮播图自动轮播效果及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="../js/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++;      ////				###########(*****)下面的可以这样写  最后的小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	        				});      //				###########(*****)上面的可以这样写       最后的小bug,当li opacity变色的时候图片跑到第6个(最后的时候)  li的颜色也回到第0个      				if (t==5) {      				$('#tm ul li').eq(0).css({'opacity':'0.8'}).siblings('li').css({'opacity':'0.6'});	      				} else{      //				让t号li透明度变0.8,兄弟li透明度变0.6	      				$('#tm ul li').eq(t).css({'opacity':'0.8'}).siblings('li').css({'opacity':'0.6'});	      				}      //				让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="https://www.qiquanji.com/data/img/dmj/201903081552012026127906.jpg"/>      				<img src="https://www.qiquanji.com/data/img/dmj/201903081552012026210173.jpg"/>      				<img src="https://www.qiquanji.com/data/img/dmj/201903081552012026205547.jpg"/>      				<img src="https://www.qiquanji.com/data/img/dmj/201903081552012027105080.jpg"/>      				<img src="https://www.qiquanji.com/data/img/dmj/201903081552012027338952.jpg"/>      				<img src="https://www.qiquanji.com/data/img/dmj/201903081552012026127906.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/post/7569.html

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: