js实现图片左右移动轮播

实现效果:
1.图片能够自动轮播.
2.移入图片时自动轮播停止,并且有左右两个箭头.
3.图片下方有一排按钮,可以点击进行切换，并且按钮的样式也随之切换.

代码如下:
html+css:

*{margin: 0;padding: 0;}html,body{width: 100%;}.container{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 800px;height: 500px;overflow: hidden;}.list{position: absolute;width: 5600px;height: 500px;z-index: 1;}.list img{float: left;width: 800px;height: 500px;}.buttons{position: absolute;left: 50%;bottom: 20px;margin-left: -90px;width: 180px;text-align: center;cursor: pointer;z-index: 2;}.buttons span{display: inline-block;width: 20px;height: 20px;margin-right: 5px;border-radius: 50%;background: #aaa;border: 1px solid #fff;}.buttons span:last-child{margin-right: 0;}.buttons .on{background: #000;}.arrow{display: none;position: absolute;top: 230px;width: 40px;height: 40px;background: rgba(0,0,0,0.4);font-size: 40px;font-weight: bold;text-align: center;cursor: pointer;color: #fff;z-index: 2;}.container:hover .arrow{display: block;}#pre{left: 0;}#next{right: 0;}

js:

(function shuff(){function $(id) {return document.getElementById(id);}/*index是为了确定当前图层坐标,animated是为了使运动过程中的点击失效*/var list=$("list"),pre=$("pre"),next=$("next"),index=1,animated=true,timer,button=$("buttons"),buttons=$("buttons").getElementsByTagName("span"),container=$("container");/**运动函数*time为图层转换一次的时间*/function animate(len) {animated=false; var newLeft=parseInt(list.style.left)+len;var time=300;var interval=10;var speed=len/(time/interval);(function move(){if ((speed>0&&parseInt(list.style.left)<newLeft)||(speed<0&&parseInt(list.style.left)>newLeft)) {list.style.left=parseInt(list.style.left)+speed+"px";setTimeout(move,interval);}else{list.style.left=newLeft+"px";if (newLeft>-800) {list.style.left=-4000+"px";}if (newLeft<-4000) {list.style.left=-800+"px";}animated=true;}})();}/*按钮点击样式变化*/function showButton(){for(var i=0;i<buttons.length;i++){buttons[i].className="";}buttons[index-1].className="on";}/*按钮点击函数*/function buttonListen(){if (!animated) {return;}var spanIndex=parseInt(this.getAttribute("index"));var diff=spanIndex-index;animate(diff*(-800));index=spanIndex;showButton();}/*自动轮播函数*/function play(){timer=setInterval(function(){nextListen();},3000);}/*暂停轮播函数*/function suspend(){clearInterval(timer);}/*左箭头点击函数*/function preListen(){if (!animated) {return;}if (index==1) {index=5;}else{index--;}animate(800);showButton();}/*右箭头点击函数*/function nextListen(){if (!animated) {return;}if(index==5){index=1;}else{index++;}animate(-800);showButton();}function start(){container.addEventListener('mouseenter',suspend,false);container.addEventListener('mouseleave',play,false);button.addEventListener('click',function(event){if (event.target&&event.target.tagName.toLowerCase()=="span") {buttonListen.call(event.target);}},false);pre.addEventListener('click',preListen,false);next.addEventListener('click',nextListen,false);play();}   start();})();

思路：
1.为了左右移动轮播顺畅，所以第一张图前插上最后一张图,最后一张图插上第一张图.让所有图片float:left;每张图片的宽度设置为800;最外层为一个id为container的容器,设置它的宽为800,overflow:hidden;水平垂直居中.

2.animate(len)是运动函数,先计算出当前list的left值,time为滑过一张图总共所需的时间,interval是滑过一张图时每次滑动的时间,speed为每次移动的距离,当移动的距离小于len时，setTimeout(move,interval);当left距离小于4000时,图片回到原位.

function animate(len) {animated=false; var newLeft=parseInt(list.style.left)+len;var time=300;var interval=10;var speed=len/(time/interval);(function move(){if ((speed>0&&parseInt(list.style.left)<newLeft)||(speed<0&&parseInt(list.style.left)>newLeft)) {list.style.left=parseInt(list.style.left)+speed+"px";setTimeout(move,interval);}else{list.style.left=newLeft+"px";if (newLeft>-800) {list.style.left=-4000+"px";}if (newLeft<-4000) {list.style.left=-800+"px";}animated=true;}})();}

3.创建animated的目的是当图片移动时,点击下方按钮和左右移动按钮无效.index是为了记录当前图片的索引,在每一个span按钮上也设置了index属性.在buttonListen函数中写入showButton()来渲染按钮.

function buttonListen(){if (!animated) {return;}var spanIndex=parseInt(this.getAttribute("index"));var diff=spanIndex-index;animate(diff*(-800));index=spanIndex;showButton();}

4.nextListen()为右箭头点击事件,每调用一次,index++,animate(-800),向右移动800,当index=5时,将index重置为1,并且也要调用showButton()对按钮进行渲染.
5.play()函数内创建一个setInterval,不间断调用nextListen,达到无限向右自动轮播的效果.

js实现图片左右移动轮播相关推荐

html图片自动左右轮播,原生JS实现图片左右轮播
本效果使用js实现,当图片移动到200像素后回到0像素再向右移动200像素一直左右移动,不需要marquee标签. 完整的HTML代码如下,保存到HTML文档打开可以查看效果: JS使图片左右移动_何 ...
js焦点图片层叠轮播切换滚动
拉门循环滚动展示图片的动画写得多了,今天来一个平时少写的,先上图: 功能描述: 自定义图片尺寸: 每隔一段时间自动滚动图片: 每次动画执行的时候改变图片的位置,宽高以及其它属性也要跟随着变化: 鼠标移 ...
js实现图片3D轮播效果（收藏）
3D的图片轮播效果很炫,写到这里只是为了不丢代码,不为别的. 效果预览: html代码: <head> <meta http-equiv="Content-Type&quo ...
html图片自动循环轮播图,js实现图片无缝循环轮播
本文实例为大家分享了js实现图片无缝循环轮播的具体代码,供大家参考,具体内容如下代码如下 Document #container{ overflow:hidden; width:400px; hei ...
2个js实现图片轮播效果（用）
第一个(使用) 不过要注意在web.config中将该location的位置的访问权限设为allow user="*",设置了deny user="?"或&qu ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...
html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
JS实现图片轮播效果（自动和手动）
本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换 ps:由于很多同志反馈无法总有各种奇怪的情况,所以有需要的直接下载整个工程:JS ...
如何使用js实现图片轮播
要说起js的轮播功能,已经是有很多成熟的方法,在这里,这个算法确实好: 看看下面的代码实现吧: <!DOCTYPE html> <html lang="en"&g ...

js实现图片左右移动轮播

js实现图片左右移动轮播相关推荐

最新文章

热门文章