轮播图---左右切换无长滚动效果轮播图-中级难度版
Posted qinghao-qin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播图---左右切换无长滚动效果轮播图-中级难度版相关的知识，希望对你有一定的参考价值。
左右切换无长滚动轮播图
思路：首先设有全局变量position（确定当前图片是第几张），arr数组：存放图片地址，方向：direction，
及lis小圆点数组，prev，记录小圆点的前一个， moveBool是否进入运动函数等
1、点击事件：点击左边的leftBn，设置direction="right"，position--，在这要确定position不能超出数组长度范围，
超出要重新赋值，点击小圆点把小圆点的当前是lis数组中的第几个赋值给position，然后图片生成
2、图片生成：图片根据当前direction值以及position来确定插入当前图片的前面和后面，如果direction=”right“，
插在当前图片的前面，并把装图片的盒子宽度乘以2倍，设置控制图片运动的moveBool为true，
3、图片运动：根据当前direction值运动，如果值为right，则让装图片的盒子的left值为offset.left+40,即向右运动，
当运动完成后设置相关属性停止进入运动函数并设置其他相关属性
4、自动运动：设置控制自动运动的变量，初值为0，每次进入定时器++，当等于一定值时，给direction赋值，position++，
生成图片，当点击事件发生时，则给这个变量的值设成负值，让其时间更久才能再次生成图片。
5、关于小圆点及其它琐碎事情。每次清空之前prev的属性设置，然后给prev设置当前的li所在的position，再重新设置背景属性。
易错点：插入图片位置，给装图片的大盒子定位及运动。及图片生成和图片运动这一块。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中级轮播图重构</title> <style> *{margin: 0; padding: 0; } #carousel,#imgCon img{width: 1200px; height: 400px; } #carousel {position: relative; margin: auto; overflow: hidden; } #imgCon{width: 1200px; height: 400px; position: absolute; left: 0; font-size: 0; } #leftBn,#rightBn {position: absolute; top:170px; cursor: pointer; } #leftBn{left: 20px;} #rightBn {right: 20px; } ul{position: absolute; bottom: 20px; list-style: none; margin: auto; } li {width: 20px; height: 20px; border: 1px solid red; border-radius: 10px; float: left; margin-left: 8px; cursor: pointer; } </style> <script src="../universalMethod.js"></script> </head> <body> <div id="carousel"> <div id="imgCon"> <img src="img/a.jpeg"> </div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <img src="img/left.png" id="leftBn"> <img src="img/right.png" id="rightBn"> </div> <script> var imgCon,leftBn,rightBn,ul,lis,prev var arr=["img/a.jpeg","img/b.jpeg","img/c.jpeg","img/d.jpeg","img/e.jpeg"] var position=0 var direction var autoNum=0 var moveBool=false const WIDTH=1200 const HEIGHT=400 init() function init(){ imgCon=document.getElementById("imgCon") leftBn=document.getElementById("leftBn") rightBn=document.getElementById("rightBn") ul=document.getElementsByTagName("ul")[0] leftBn.addEventListener("click",clickHandler) rightBn.addEventListener("click",clickHandler) lis=ul.children for(var i=0;i<lis.length;i++){ lis[i].index=i lis[i].addEventListener("click",liClickHandler) } ul.style.left=(WIDTH-ul.clientWidth)/2+"px" liBG() setInterval(animation,16) } function createImg(){ var data1=new Date() var img=Method.createElem("img",null,{ width:WIDTH+"px", height:HEIGHT+"px" }) img.src=arr[position] imgCon.style.width=WIDTH*2+"px" if(direction==="left"){ imgCon.appendChild(img) } if(direction==="right"){ imgCon.insertBefore(img,imgCon.lastElementChild) imgCon.style.left=-WIDTH+"px" } var data2=new Date() moveBool=true console.log(data2-data1) liBG() } function moveImg(){ if(!moveBool) return if(direction==="left"){ if(imgCon.offsetLeft<=-WIDTH){ imgCon.style.left=0+"px" imgCon.firstElementChild.remove() imgCon.style.width=WIDTH+"px" moveBool=false return } imgCon.style.left=(imgCon.offsetLeft-40)+"px" } if(direction==="right"){ if(imgCon.offsetLeft>=0){ imgCon.lastElementChild.remove() imgCon.style.width=WIDTH+"px" moveBool=false return } imgCon.style.left=(imgCon.offsetLeft+40)+"px" } } function animation(){ moveImg() autoMove() } function autoMove(){ autoNum++ if(autoNum===240){ autoNum=0 position++ if(position>arr.length-1) position=0 direction="left" createImg() } } function clickHandler(){ if(moveBool) return autoNum=-120 if(this===leftBn){ position-- if(position<0) position=arr.length-1 direction="right" createImg() return } position++ if(position>arr.length-1) position = 0 direction="left" createImg() } function liClickHandler(){ if(moveBool) return autoNum=-120 if(this.index>position) direction="left" if(this.index<position) direction="right" position=this.index createImg() } function liBG(){ if(prev){ prev.style.background="rgba(255,0,0,0)" } prev=lis[position] prev.style.background="rgba(255,0,0,0.5)" } </script> </body> </html>
以上是关于轮播图---左右切换无长滚动效果轮播图-中级难度版的主要内容，如果未能解决你的问题，请参考以下文章