| jQuery实现轮播图（无缝轮播，附效果图），代码有详解。 | 您所在的位置：网站首页 › 照片折叠效果图 › jQuery实现轮播图（无缝轮播，附效果图），代码有详解。 |
jQuery实现轮播图（无缝轮播，附效果图），代码有详解。
|
jQuery实现轮播图
这里用了一些有颜色的div块当做图片，复制之后可以直接用，有需要的话再根据自己的需求替换就可以了。 功能： （1）左右无缝轮播。 （2）鼠标移上去会停止，移走继续动。 （3）点击圆点切换到对应的图片。 （4）点击箭头向对应的方向移动。 效果图： jQuery代码（要引入jQuery文件）： Document * { margin: 0; padding: 0; } .banner { width: 600px; height: 400px; border: 5px solid black; margin: 100px auto; overflow: hidden; cursor: pointer; position: relative; } .banner .slide { width: 4000px; height: 400px; position: absolute; left: -600px; } .banner .slide .pic { width: 600px; height: 400px; line-height: 400px; text-align: center; float: left; font-size: 72px; color: white; } .banner .slide .a { background-color: black; } .banner .slide .b { background-color: pink; } .banner .slide .c { background-color: purple; } .banner .dots{ width: 100px; height: 30px; position: absolute; bottom: 0px; left: 50%; margin-left: -50px; z-index: 2;/*让圆点显示在轮播图上面*/ } .banner .dots .dot{ /*圆点的一些样式*/ width:20px; height: 20px; float: left; border-radius: 50%; margin:5px 6px; background-color: rgba(7,17,27,0.4); box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset; cursor:pointer; } .banner .dots .active{ /*小圆点高亮的样式*/ box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset; background-color: #fff; } .banner .arrow{ /*左箭头*/ width: 0; height: 0; border-right: 30px solid rgba(255,255,255,.5); border-top: 30px solid transparent; border-bottom: 30px solid transparent; position: absolute; left:0; top: 50%; margin-top: -30px; z-index: 2; } .banner .arrow:hover{ /*鼠标移动到箭头时候的样式*/ border-right-color:white ; } .banner .next{ /*右箭头*/ left:auto; right: 0; top: 50%; margin-top: -30px; transform: rotate(180deg); z-index: 2; } C A B C A var index=1;//这是记录图片的索引，通过索引来控制图片的切换， // 注意是从1开始的 [1,size-2] var timer=null;//seInterval()函数会返回一个值，这是用来接收那个值的，可以用来停止轮播的效果 var size=$('.slide').children().size();//图片的张数 var picWidth=$('.pic').width();//获取图片的宽度 //鼠标移上去的时候图片轮播要暂停 $('.banner').mouseover(function(){ clearInterval(timer); }); //鼠标移走的时候再次开始 $('.banner').mouseleave(function(){ autoSlide(); }); /*这里要调用这个函数。这里也是一个关键。 因为当你点进这个页面以后不管你鼠标放在哪里，图片都是要动的吧。 这样子写的意思就是触发这个.slide类的mouseover事件， 而上面那个是给这个元素绑定事件*/ $('.slide').mouseleave(); //自动播放 function autoSlide(){ timer=setInterval(function(){ index++;//通过索引来控制图片嘛，每隔一段时间当然要让图片动起来。 changeImg(); changeDots(); },1500);//每隔1.5S就切换一次图片 }; // 图片切换函数 function changeImg(){ var slideWidth=-1*picWidth*index;//移动的距离 $('.slide').animate({ 'left':slideWidth+'px'//每次滑动一个图片的距离 },500);//500的意思是动画效果要在500ms内完成 if(index>=size-1){ /*这是关键之三， 当移动到最后一张图片的时候, 瞬间（animate函数最后那个0代表转换时间为0ms，所以就是一瞬间的事） 切换为第一张。*/ $('.slide').animate({'left':-picWidth+'px'},0);// 图片切换过去 index=1;//索引要也切换为第一幅图的索引 } if(index //给当前的小圆点添加高亮的样式（active），然后把其他小圆点的样式去掉。 /*这里设置index-1的原因是因为点只有三个。 当图片的索引为1，圆点的索引为0 图片索引为2，圆点索引为1 所以我们可以看到一直都差1*/ $('.dot').eq(index-1).addClass('active').siblings().removeClass('active'); } //点击小圆点，切换到对应的图片 $('.dot').click(function(event){ var target=event.target;//获取点击到的小圆点，获取到的是一个DOM元素 //获取DOM元素的索引值。 index=$(target).index()+1;// +1的原因：看上面changeDots()的注释 changeImg();//改变图片 changeDots();// 小圆点的状态也要跟着变 }); // 点击下一张切换图片 $('.next').click(function(){ index++; changeImg(); changeDots(); }); // 点击上一张切换图片 $('.prev').click(function(){ index--; changeImg(); changeDots(); });刚学JQuery的时候，想着要做些什么来检验一下自己的学习成果，这时候在逛一些设计得比较优秀的网页的时候就看到了在主页上面不断切换的图片（当时不知道叫什么），这是我第一次对轮播图有了一些概念。于是就想能不能自己也做一个跟它效果一样的东西出来。遂在网上搜了资料，再结合自己所学过的JQuery知识，实现了一个无缝衔接轮播图的简单版本。 |
【本文地址】
公司简介
联系我们