jQuery实现轮播图（无缝轮播，附效果图），代码有详解。

jQuery实现轮播图

这里用了一些有颜色的div块当做图片，复制之后可以直接用，有需要的话再根据自己的需求替换就可以了。

功能：
（1）左右无缝轮播。
（2）鼠标移上去会停止，移走继续动。
（3）点击圆点切换到对应的图片。
（4）点击箭头向对应的方向移动。

效果图：

jQuery代码（要引入jQuery文件）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>* {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;}</style>
</head>
<body><div class="banner"><div class="slide"><!-- 这边多设置一张重复的图片就是我实现无缝轮播的关键之一啦，当图片轮播到C的时候继续让它滑动，当切换到A（副本）的时候，立马用JS将图片替换成图片A，然后，再从第二张开始轮播在视觉上我们感受到的就是无缝轮播了。这个瞬间就是0ms，我们肉眼看不到的。-->           <div class="pic c">C</div><!-- C(副本)--><!-- 真正要轮播的就这三个ABC图片 --><div class="pic a">A</div><div class="pic b">B</div><div class="pic c">C</div><!-- 这边也是同样的道理，无缝轮播要添加的副本 --><div class="pic a">A</div><!-- A(副本)--></div><div class="dots"><div class="dot active"></div><div class="dot"></div><div class="dot"></div></div><div class="arrow next"></div><div class="arrow prev"></div></div><!-- 这里引用jQuery的源码 --><script type="text/javascript" src="jquery-2.2.4.min.js"></script><script type="text/javascript">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<1){//要注意在执行下面这段函数之前，已经切换到图片C了。$('.slide').animate({'left':-(size-2)*picWidth+'px'},0);// 而这里便是无缝切换的代码// (肉眼看不到),但实际已经切换到图片C了index=size-2;}}//小圆点切换的函数function changeDots(){//给当前的小圆点添加高亮的样式（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();});</script>
</body>
</html>

刚学JQuery的时候，想着要做些什么来检验一下自己的学习成果，这时候在逛一些设计得比较优秀的网页的时候就看到了在主页上面不断切换的图片（当时不知道叫什么），这是我第一次对轮播图有了一些概念。于是就想能不能自己也做一个跟它效果一样的东西出来。遂在网上搜了资料，再结合自己所学过的JQuery知识，实现了一个无缝衔接轮播图的简单版本。

jQuery实现轮播图（无缝轮播，附效果图），代码有详解。相关推荐

jq轮播图——无缝轮播
css代码: /* 整个轮播图 */ .banner{width: 520px;height: 280px;overflow: hidden;margin:10% auto;position: rel ...
无缝轮播图无缝轮播图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
用animation实现轮播图无缝衔接
思路使用animation来展示轮播图: 轮播分为两个独立的部分:位移与动效.使二者互不影响动效分为进入动画和退出动画在所有动效结束后位移 html部分 <body><u ...
一键生成轮播图，轮播图插件
一键生成轮播图,轮播图插件简介写练习的时候发现每次写轮播图都觉得很麻烦,突发奇想,何不写个轮播图插件,需要轮播图的时候,直接调用插件一键生成就行了!!! 于是乎,便写了以下代码(因为博主还是在校学 ...
英雄联盟轮播图自动轮播
六月过去了,七月还会远吗?不知不觉到了六月底的最后一天.你好,七月! 大家好,我是小陈陈呀,上次写了一篇英雄联盟轮播图手动轮播,当天晚上有很多大朋友小朋友私信小陈陈:可以在上次手动轮播的基础上,实现自 ...
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图)
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图) 每一步都有详细的注释: <!DOCTYPE html> <html lang="en"> &l ...
html怎么做产品轮播图,商品轮播图是什么意思（html轮播图怎么制作）
但轮播图对用户真的有意义吗?或者它只是设计者用来偷懒,将内容一股脑塞进去的工具呢? 不论将这个问题抛向谁,他们都会告诉你,"轮播图就是个反面模式(anti-pattern)."轮播 ...
web 完整轮播图前端轮播图详细
web 完整轮播图前端轮播图预览: 应用 HTML + CSS + JS HTML CSS JS 预览: 应用 HTML + CSS + JS JS代码分析如下: html代码比较简短,这里用j ...
HTML导航栏的四种制作方法,jQuery+CSS3实现四种应用广泛的导航条制作实例详解
导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下 ...

jQuery实现轮播图（无缝轮播，附效果图），代码有详解。

jQuery实现轮播图

jQuery实现轮播图（无缝轮播，附效果图），代码有详解。相关推荐

最新文章

热门文章