爱站程序员基地基于jQuery 实现的一个简易banner轮播图
HTML代码
<body><div class=\"play\" id=\"play\"><ol><li class=\"active\">1</li><li >2</li><li >3</li></ol><ul><li><img src=\"http://pic1.win4000.com/wallpaper/2018-12-21/5c1c601a162f4.jpg\"/></li><li><img src=\"http://pic1.win4000.com/wallpaper/2018-12-24/5c2034a4aefdb.jpg\"/></li><li><img src=\"http://pic1.win4000.com/wallpaper/2019-01-04/5c2ebdd372308.jpg\"/></li><li><img src=\"http://pic1.win4000.com/wallpaper/2018-12-21/5c1c601a162f4.jpg\"/></li></ul></div></body>
引入外部CSS文件
<link type=\"text/css\" href=\"css.css\" rel=\"stylesheet\" />
CSS代码块
*{padding: 0;margin: 0;}li{list-style: none;}img{border:none;}body{background:rgb(255,255,255);}.play{overflow: hidden;width: 470px;height: 250px;position: relative;margin: 80px auto 0;}ol{position: absolute;right: 5px;bottom: 5px;z-index: 2;}ol li{float: left;margin-right:20px;display: inline;cursor: pointer;background:rgb(95,159,163);border:1px solid rgb(210,203,44);}.active{padding: 3px 8px;font-weight: bold;color: rgb(255,255,255);background:rgb(210,203,44);position: relative;botton:2px;}ul{position: absolute;top: 0px;left: 0px;z-index: 1;}ul li{width: 470px;height: 250px;float: left;}ul img{float: left;width: 470px;height: 250px;}
重点：JS部分 代码
<script >$(function(){var aBtns = $(\"#play ol li\");var oUl = $(\"#play ul\");var aLis = oUl.find(\"li\");// // 给所有按钮增加点击事件// aBtns.click(function(){// //jQuery attr() 方法也用于设置/改变属性值。// //siblings()除this以外的兄弟节点 进行操作// $(this).attr(\"class\",\"active\").siblings().attr(\"class\",\" \");// //设置向上滚动动画 .index()获取下标数值// oUl.animate({// top:$(this).index() * -250// },500)var iNow=0; //当前显示图片的下标var timer = null;aBtns.click(function(){iNow= $(this).index();tab();})$(\"#play\").mouseenter(function(){clearInterval(timer);}).mouseleave(function(){timer = setInterval(function(){iNow++;tab();},2000)})//启动一个定时器timer = setInterval(function(){iNow++;tab();},2000);function tab(){aBtns.attr(\"class\",\"\").eq(iNow).attr(\"class\",\"active\");if(iNow==aBtns.size()){aBtns.eq(0).attr(\"class\",\"active\");}//对于animate（）函数，动画结束就是调用 回调函数//.size()是求buttom的数量oUl.animate({top: iNow * -250},500,function(){//判断是否为最后一个if(iNow==aBtns.size()){iNow=0;oUl.css(\"top\",\"0\");}})}// })})</script>
重点讲解：
（1）启动一个定时器，实现自动轮播的作用
timer = setInterval(function(){iNow++;tab();},2000);
鼠标移入是图片暂停滚动，清除定时器，鼠标移出时调用启动定时器
$(\"#play\").mouseenter(function(){clearInterval(timer);}).mouseleave(function(){timer = setInterval(function(){iNow++;tab();},2000)})
(2）获取当前图片下标
var iNow=0; //当前显示图片的下标aBtns.click(function(){iNow= $(this).index();tab();})
使得当前下标为iNow的相应“class”变为“active”，实现数字框样式随着相应图片改变而改变
function tab(){aBtns.attr(\"class\",\"\").eq(iNow).attr(\"class\",\"active\");if(iNow==aBtns.size()){aBtns.eq(0).attr(\"class\",\"active\");}
（3）实现图片轮转到最后一张返回到第一张图片继续进行下一轮轮播的作用。
oUl.animate({top: iNow * -250},500,function(){//判断是否为最后一个if(iNow==aBtns.size()){iNow=0;oUl.css(\"top\",\"0\");}})
对于animate（）函数，动画结束就是调用 回调函数
.size()是求buttom的数量
