之前设计了一个校团委网站，里面有一个轮播图效果，上网后查看了许多方法，觉得下面这个方法最为适用，记录下来
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索引为5if (i == size) {//当索引变为5，将left变为0，此时图片依旧未变，而之后把索引变为1，执行animate（），使得动画效果如同从第一张切换到第二张$(".banner .imgList").css({ left: 0 });//无时间移动i = 1;}//情况2索引为-1if (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>
