旅游网站开发的背景和意义,音乐网站开发的目的,黄冈网站建设报价,做数据统计的网站之前设计了一个校团委网站#xff0c;里面有一个轮播图效果#xff0c;上网后查看了许多方法#xff0c;觉得下面这个方法最为适用#xff0c;记录下来 js代码#xff1a; $(document).ready(function () {//无缝切换轮播var i 0;//索引var clone $(.banner .imgL… 之前设计了一个校团委网站里面有一个轮播图效果上网后查看了许多方法觉得下面这个方法最为适用记录下来 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 classwrapperdiv classbannerul classimgListlia href#img srcimg/2017届粤西全体大合照.png//a/lilia href#img srcimg/部门素拓合照.png//a/lilia href#img srcimg/班级合照3.png//a/lilia href#img srcimg/粤西动员大会.png//a/li/ulul classinfoListli classonInfo就业工作学生协助会成功举办粤西专场招聘会/lili 部门素拓合照/lili 班级合照/lili 粤西动员大会/li/ulul classindexListli classonIndex/lili/lili/lili/li/uldiv classbg/divdiv classinstructorimg classprev srcimg/左箭头.png /img classnext srcimg/右箭头.png//div /div/div 下面是原生js实现图片轮播的功能 !DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle typetext/cssbody,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/headbodydiv classwrapperdiv classbannerul classimgList title2333 styleleft: 0px;lia href#img srcimg/一轮面试.jpg //a/lilia href#img srcimg/三轮合照.jpg //a/lilia href#img srcimg/二轮面试.jpg //a/lilia href#img srcimg/第一次会议修改.jpg //a/lilia href#img srcimg/粤西3.png //a/li/ul/div/divscript typetext/javascriptvar i0;var edocument.getElementsByClassName(imgList)[0];var liste.getElementsByTagName(li)[0];var clonelist.cloneNode(true);//注意appendChild是用于移动元素的不是用来复制拷贝元素的 e.appendChild(clone);var widthlist.getElementsByTagName(img)[0].width; //获取宽度var lengthe.getElementsByTagName(li).length; //获取总长度function transMove(value){var leftparseInt(e.style.left);if(leftvalue){e.style.left(left-10)px;var repeattransMove(value);var gsetTimeout(repeat,20);}}var tsetInterval(function(){i;move();},2000);function move(){if(ilength){e.style.left0px;//直接给标签添加属性i1;}if(i-1){e.style.left-1*(length-1)*widthpx;ilength-2;}//e.style.setProperty(left,-1*i*widthpx);transMove(-1*i*width);}/script/body
/html 转载于:https://www.cnblogs.com/runhua/p/6863893.html
