<div id="wrap">
<!-- 图片展示区 -->
<div id="inner" class="clear">
<!-- 所有图片并排的块 -->
<img src="img/timg10.jpg" alt="">
<img src="img/timg14.jpg" alt="">
<img src="img/timg15.jpg" alt="">
<img src="img/timg8.jpg" alt="">
<img src="img/timg9.jpg" alt="">
</div>
<div class="paganation" id="paganation">
<!-- 页面按钮区域 -->
<span class ="selected">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div id="left" class="arrow"><</div>
<!-- 向左切换按钮 -->
<div id="right" class="arrow">></div>
<!-- 向右切换按钮 -->
</div>
<style>
*{ margin:0; padding:0; border:0; }
.clear{ *zoom:1; }
.clear:after{ visibility: none; content:""; display:block; clear:both; height:0; }
#wrap{ width: 510px; height:286px; margin:0 auto; position:relative; overflow: hidden; }
#inner{ width: 1000%; height:100%; position:absolute; left:0; top:0; }
#inner img{ width:10%; height:100%; float: left; }
.paganation{ width: 100%; position: absolute; bottom:10px; text-align:center; }
.paganation span{ padding:5px 8px; background: #F2F2F2; color:red; border-radius:50%; cursor: pointer }
.paganation .selected{ background: red; color:white; }
.arrow{ position:absolute; top:0; width: 30px; height: 286px; line-height: 286px; text-align: center; color: red; cursor: pointer; }
#right{ right: 0; }
.arrow:hover{ background: rgba(0,0,0,0.5); }
</style>
window.οnlοad=function()
{
var wrap=document.getElementById("wrap");
var inner=document.getElementById("inner");
var spanList=document.getElementById("paganation").getElementsByTagName("span");
var left=document.getElementById("left");
var right=document.getElementById("right");
var clickFlag=true;
var time
var index=0;
var Distance=wrap.offsetWidth;
//定义图片滑动的函数
function AutoGo()
{
var start=inner.offsetLeft;
var end=index*Distance*(-1);
var change=end-start;
var timer;
var t=0;
var maxT=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);
}
//编写图片向右滑动的函数
function forward()
{
index++;
/* 长度比下标大1 */
if(index>spanList.length - 1)
{
index=0;
}
AutoGo();
}
//编写图片向左滑动函数
function backward()
{
index--;
if(index<0)
{
index=spanList.length-1;
inner.style.left=(index+1)*Distance*(-1)+"px";
}
AutoGo();
}
//开启图片自动向右滑动的计时器
time=setInterval(forward,3000);
//设置鼠标悬停动画停止
wrap.οnmοuseοver=function()
{
clearInterval(time);
}
wrap.οnmοuseοut=function()
{
time=setInterval(forward,3000);
}
//遍历每个按钮让其切换到对应图片
for(var i=0;i<spanList.length;i++)
{
spanList[i].οnclick=function(){
index=this.innerText-1;
AutoGo();
}
}
//左切换事件
left.οnclick=function()
{
if(clickFlag){
backward();
}
clickFlag=false;
}
//右切换事件
right.οnclick=function(){
if(clickFlag){
forward();
}
clickFlag=false;
}
//清除页面所有按钮状态颜色
function clear()
{
for(var i=0;i<spanList.length;i++)
{
spanList[i].className="";
}
}
}