jq实现轮播图
之前设计了一个校团委网站，里面有一个轮播图效果，上网后查看了许多方法，觉得下面这个方法最为适用，记录下来
js代码：
$(document).ready(function () { //无缝切换轮播 var i = 0;//索引 var clone = $(".banner .imgList li").first().clone();//克隆第一张图片 $(".banner .imgList").append(clone);//复制到列表最后 var size = $(".banner .imgList li").size();//记录图片总数 /*自动轮播*/ var t = setInterval(function () { i++; move();},2000); /*鼠标悬停事件*/ $(".banner").hover(function () { clearInterval(t);//鼠标悬停时清除定时器 }, function () { t = setInterval(function () { i++; move(); }, 2000); //鼠标移出时清除定时器 }); /*鼠标滑入原点事件*/ $(".banner .indexList li").hover(function () { var index = $(this).index();//获取当前索引值 i = index; $(".banner .imgList").stop().animate({ left: -index * 1366 }, 500); $(this).addClass("onIndex").siblings().removeClass("onIndex"); $(".infoList").find("li").removeClass().eq(i).addClass("onInfo"); }); /*向左按钮*/ $(".prev").click(function () { i--; move(); }) /*向右按钮*/ $(".next").click(function () { i++; move(); }); /*移动事件*/ function move() { //情况1索引为5 if (i == size) {//当索引变为5，将left变为0，此时图片依旧未变，而之后把索引变为1，执行animate（），使得动画效果如同从第一张切换到第二张 $(".banner .imgList").css({ left: 0 });//无时间移动 i = 1; } //情况2索引为-1 if (i == -1) { $(".banner .imgList").css({ left: -(size - 1) * 1366 }); i = size - 2; } $(".banner .imgList").stop().animate({ left: -i * 1366 }, 500); if (i == size - 1) {//当索引指向的是复制的项，把突出显示转移到第一张图片 $(".banner .indexList li").eq(0).addClass("onIndex").siblings().removeClass(); $(".banner .infoList li").eq(0).addClass("onInfo").siblings().removeClass(); } else { $(".banner .indexList li").eq(i).addClass("onIndex").siblings().removeClass(); $(".banner .infoList li").eq(i).addClass("onInfo").siblings().removeClass(); } } });
html代码：
<div class="wrapper"> <div class="banner"> <ul class="imgList"> <li><a href="#"><img src="img/2017届粤西全体大合照.png"/></a></li> <li><a href="#"><img src="img/部门素拓合照.png"/></a></li> <li><a href="#"><img src="img/班级合照3.png"/></a></li> <li><a href="#"><img src="img/粤西动员大会.png"/></a></li> </ul> <ul class="infoList"> <li class="onInfo">就业工作学生协助会成功举办粤西专场招聘会</li> <li >部门素拓合照</li> <li >班级合照</li> <li >粤西动员大会</li> </ul> <ul class="indexList"> <li class="onIndex"></li> <li></li> <li></li> <li></li> </ul> <div class="bg"></div> <div class="instructor"> <img class="prev" src="img/左箭头.png" /> <img class="next" src="img/右箭头.png"/> </div> </div> </div>
下面是原生js实现图片轮播的功能：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body,li,ul,img{ margin: 0; padding:0; } ul{ list-style: none; } img{ width: 500px; height: 350px; } .wrapper{ position: relative; top: 130px; left: 400px; width: 500px; height: 350px; overflow:hidden; } .banner{ position: relative; width: 3000px; height: 350px; } .wrapper .banner .imgList{ position: absolute; } .wrapper .banner .imgList li{ float: left; } </style> </head> <body> <div class="wrapper"> <div class="banner"> <ul class="imgList" title="2333" style="left: 0px;"> <li><a href="#"><img src="img/一轮面试.jpg" /></a></li> <li><a href="#"><img src="img/三轮合照.jpg" /></a></li> <li><a href="#"><img src="img/二轮面试.jpg" /></a></li> <li><a href="#"><img src="img/第一次会议修改.jpg" /></a></li> <li><a href="#"><img src="img/粤西3.png" /></a></li> </ul> </div> </div> <script type="text/javascript"> var i=0; var e=document.getElementsByClassName("imgList")[0]; var list=e.getElementsByTagName("li")[0]; var clone=list.cloneNode(true);//注意，appendChild是用于移动元素的，不是用来复制拷贝元素的 e.appendChild(clone); var width=list.getElementsByTagName("img")[0].width; //获取宽度 var length=e.getElementsByTagName("li").length; //获取总长度 function transMove(value){ var left=parseInt(e.style.left); if(left>value){ e.style.left=(left-10)+"px"; var repeat="transMove("+value+")"; var g=setTimeout(repeat,20); } } var t=setInterval(function(){i++;move();},2000); function move(){ if(i==length){ e.style.left="0px";//直接给标签添加属性 i=1; } if(i==-1){ e.style.left='-1*(length-1)*width+"px"'; i=length-2; } //e.style.setProperty("left",-1*i*width+"px"); transMove(-1*i*width); } </script> </body> </html>
