jQuery实现轮播图（无缝轮播，附效果图），代码有详解。 |
您所在的位置：网站首页 › 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 |
【本文地址】
今日新闻 |
推荐新闻 |