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)||(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[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)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,达到无限向右自动轮播的效果.