<divclass="wrapper">

<divid="container"><!--图片展示区域盒子-->

<ulid="imglist"><!--将所有图片并列展示盒子-->

<li>

<imgsrc="./img/banner.jpg"alt="暂无图片">

</li>

<li>

<imgsrc="./img/banner0.jpg"alt="暂无图片">

</li>

<li>

<imgsrc="./img/banner.jpg"alt="暂无图片">

</li>

<li>

<imgsrc="./img/banner0.jpg"alt="暂无图片">

</li>

</ul>

<ulid="point">

<liclass="selected"></li>

<li></li>

<li></li>

<li></li>

</ul>

</div>

</div>

二、CSS样式

.wrapper{

position:relative;

overflow:hidden;

width:100%;

height:870px;

}

#container{

width:1920px;

height:870px;

position:absolute;

top:50%;

left:50%;

overflow:hidden;

transform:translate(-50%,-50%);

-webkit-transform:translate(-50%,-50%);

-moz-transform:translate(-50%,-50%);

-ms-transform:translate(-50%,-50%);

-o-transform:translate(-50%,-50%);

background-color:#aa201c;

}

#imglist{

width:7680px;

height:870px;

list-style-type:none;

position:absolute;

top:0;

left:0;

z-index:1;

}

#imglist>li{

width:1920px;

height:870px;

float:left;

overflow:hidden;

}

#point{

list-style-type:none;

position:absolute;

bottom:5px;

left:50%;

/*right:0;*/

/*margin:auto;*/

width:100%;

height:29px;

line-height:29px;

z-index:10;

}

#point>.selected{

background-color:#aa201c;

}

#point>li{

width:16px;

height:16px;

float:left;

background-color:#c5c8ce;

border-radius:100%;

margin-right:10px;

-webkit-border-radius:100%;

}

三、JS代码

varwrap=document.getElementById("container");

varinner=document.getElementById("imglist");

varspanList=document.getElementById("point").getElementsByTagName("li");

varleft=document.getElementById("left");

varright=document.getElementById("right");

varclickFlag=true;//设置左右切换标记位防止连续按

vartime//主要用来设置自动滑动的计时器

varindex=0;//记录每次滑动图片的下标

varDistance=wrap.offsetWidth;//获取展示区的宽度，即每张图片的宽度

//定义图片滑动的函数

functionAutoGo(){

varstart=inner.offsetLeft;//获取移动块当前的left的开始坐标

varend=index*Distance*(-1);//获取移动块移动结束的坐标。

//计算公式即当移动到第三张图片时，图片下标为2乘以图片的宽度就是块的left值。

varchange=end-start;//偏移量

vartimer;//用计时器为图片添加动画效果

vart=0;

varmaxT=30;

clear();//先把按钮状态清除,再让对应按钮改变状态

if(index==spanList.length){

spanList[0].className="selected";

}else{

spanList[index].className="selected";

}

clearInterval(timer);//开启计时器前先把之前的清

timer=setInterval(function(){

t++;

if(t>=maxT){//当图片到达终点停止计时器

clearInterval(timer);

clickFlag=true;//当图片到达终点才能切换

}

inner.style.left=change/maxT*t+start+"px";//每个17毫秒让块移动

if(index==spanList.length&&t>=maxT){

inner.style.left=0;

index=0;

//当图片到最后一张时把它瞬间切换回第一张，由于都同一张图片不会影响效果

}

},17);

}

//编写图片向右滑动的函数

functionforward(){

index++;

//当图片下标到最后一张把小标换0

if(index>spanList.length){

index=0;

}

AutoGo();

}

//编写图片向左滑动函数

functionbackward(){

index--;

//当图片下标到第一张让它返回到倒数第二张，

//left值要变到最后一张才不影响过渡效果

if(index<0){

index=spanList.length-1;

inner.style.left=(index+1)*Distance*(-1)+"px";

}

AutoGo();

}

//开启图片自动向右滑动的计时器

time=setInterval(forward,3000);

//设置鼠标悬停动画停止

wrap.onmouseover=function(){

clearInterval(time);

}

wrap.onmouseout=function(){

time=setInterval(forward,3000);

}

//遍历每个按钮让其切换到对应图片

for(vari=0;i<spanList.length;i++){

spanList[i].onclick=function(){

index=this.innerText-1;

AutoGo();

}

}

//清除页面所有按钮状态颜色

functionclear(){

for(vari=0;i<spanList.length;i++){

spanList[i].className="";

}

}