轮播图的开发jquery写法

时间：5年前阅读：6174
1、获得移入的li的序号($(this).index();)存到c这个变量里去如果$(this)写在定时器里,那$(this)指向的就是定时器,所以不能写在这里,先存在上一步一个变量里
<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			#fk{    
				width: 1200px;    
				height: 535px;    
				border: 2px solid blueviolet;    
				margin: 50px auto;    
				position: relative;    
			}    
			#fk img{    
				position: absolute;    
				top: 0;    
				left: 0;    
				display: none;    
			}    
			#fk ul{    
				position: absolute;    
				bottom: 23px;    
				left: 548px;    
			}    
			#fk ul li{    
				list-style: none;    
				width: 12px;    
				height: 12px;    
				background: #DDDDDD;    
				float: left;    
				margin-right: 8px;    
				border-radius: 50%;    
			}    
		</style>    
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>    
		<script type="text/javascript">    
			$(function(){    
//				设一下大总管变量    
				var c=0;    
		function hs(){    
					c++;    
//					c=(c==5)?0:c;  三元表达式判断    
					if (c==5) {    
						c=0;    
					}    
//					让c号图片显示,兄弟图片隐藏    
//					让c号图片显示  show:显示   eq(c):找#fk里面的序号是第c个img标签    
//					$('#fk img').eq(c).show();    
//					
    
////				找到它的元素兄弟隐藏        siblings:找兄弟   兄弟元素都会被选中，除自已以外没选到    hide:隐藏    
//					$('#fk img').eq(c).siblings('img').hide();    
//					链式操作,精简写法    show（硬显示）       hide:隐藏    
//					$('#fk img').eq(c).show().siblings('img').hide();    
//					淡入淡出   fadeIn:渐显   在隐藏时点击慢慢显示出来         fadeOut:渐隐    
					$('#fk img').eq(c).fadeIn(300).siblings('img').fadeOut(300);    
//					让c号li变红    
					$('#fk ul li').eq(c).css({'background':'#A10000'}).siblings('li').css({'background':'#DDDDDD'});    
				}    
				var dsq = setInterval(hs,1000);    
//				移入事件: mouseover ==> mouseenter    
//				移出事件: mouseout ==> mouseleave    
//				给li加鼠标移入事件	
    
				$('#fk ul li').mouseenter(function(){    
					var xh = $(this);    
//				把移进来的函数放在定时炸弹里,让它缓一下(200毫秒)再执行	
    
//					停止定时器    
					clearInterval(dsq);    
				tt = setTimeout(function(){    
//					获得移入的li的序号($(this).index();)	存到c这个变量里去	
    
//					如果$(this)写在定时器里,那$(this)指向的就是定时器,所以不能写在这里,先存在上一步一个变量里    
//					c=$(this).index();    
					c=xh.index();    
//					jQuery图片动画显示时间会磊加,如果你300毫秒钟移动5次li,那么fadeIn(300)*5, 1500毫秒才能走完图片(延时)  用stop()解决这个问题;    
//					让eq(c)元素点进来后停止(stop())还没运动完成的图片,再执行下个动画300毫秒fadeIn(300)    
					$('#fk img').eq(c).stop().fadeIn(300).siblings('img').stop().fadeOut(300);    
					$('#fk ul li').eq(c).css({'background':'#A10000'}).siblings('li').css({'background':'#DDDDDD'});    
				},200)	
    
				})	
    
//				鼠标移出事件    
					$('#fk ul li').mouseleave(function(){    
//						清理定时炸弹200毫秒的那个    
					clearInterval(tt);    
//						恢复定时器    
					dsq = setInterval(hs,1000);    
					})    
			})    
		</script>    
	</head>    
	<body>    
		<div id="fk">    
			<img src="https://www.qiquanji.com/data/img/dmj/201903101552188163753008.jpg" alt="" style="display: block;"/>    
			<img src="https://www.qiquanji.com/data/img/dmj/201903101552188163335544.jpg" alt="" />    
			<img src="https://www.qiquanji.com/data/img/dmj/201903101552188164175308.jpg" alt="" />    
			<img src="https://www.qiquanji.com/data/img/dmj/201903101552188164956825.jpg" alt="" />    
			<img src="https://www.qiquanji.com/data/img/dmj/201903101552188164532873.jpg" alt="" />    
			<ul>    
				<li style="background: #A10000;"></li>    
				<li></li>    
				<li></li>    
				<li></li>    
				<li></li>    
			</ul>    
		</div>    
	</body>    
</html>
代码效果点上面的（运行代码）来看
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
轮播图的开发jquery写法

网友评论
