期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

轮播图的开发jquery写法

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/mip/data/img/dmj/201903101552188163753008.jpg" alt="" style="display: block;"/>      			<img src="https://www.qiquanji.com/mip/data/img/dmj/201903101552188163335544.jpg" alt="" />      			<img src="https://www.qiquanji.com/mip/data/img/dmj/201903101552188164175308.jpg" alt="" />      			<img src="https://www.qiquanji.com/mip/data/img/dmj/201903101552188164956825.jpg" alt="" />      			<img src="https://www.qiquanji.com/mip/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,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册