<style>
#outer{
position: relative;
width: 800px;
height: 450px;
margin: 30px auto 0;
overflow: hidden;
}
#inner{
position: absolute;
left: 0;
top: 0;
width:4800px ;
height: 450px;
overflow: hidden;
}
#inner img{
width: 800px;
height: 450px;
float: left;
}
#prePage{
position: absolute;
top: 50%;
left: 0;
width: 50px;
height: 100px;
font-size: 30px;
color: white;
text-align: center;
line-height: 100px;
background: rgba(200,200,200,0.5);
margin-top: -50px;
}
#nextPage{
position: absolute;
top: 50%;
right: 0;
width: 50px;
height: 100px;
font-size: 30px;
color: white;
text-align: center;
line-height: 100px;
background: rgba(200,200,200,0.5);
margin-top: -50px;
}
#tab{
width: 800px;
height: 100px;
margin: 0 auto;
}
#tab img{
width: 200px;
height: 100px;
float: left;
opacity: 1;
}
</style>
<div id="outer">
<div id="inner">
<!--<img src="img/8.jpg" alt="" />-->
<img src="img/5.jpg" alt="" />
<img src="img/6.jpg" alt="" />
<img src="img/7.jpg" alt="" />
<img src="img/8.jpg" alt="" />
<!--<img src="img/5.jpg" alt="" />-->
</div>
<span id="prePage"><</span ><span id="nextPage">></span>
</div>
<div id="tab">
<img src="img/5.jpg" alt="" />
<img src="img/6.jpg" alt="" />
<img src="img/7.jpg" alt="" />
<img src="img/8.jpg" alt="" />
</div>
<script src="js/move.js"></script>
<script>
var inner = document.getElementById("inner");
var prePage = document.getElementById("prePage");
var nextPage = document.getElementById("nextPage");
var tab = document.getElementById("tab");
var tabImg = tab.getElementsByTagName("img");
// var page = 1;
// var time;
// var flag = true;
// var time1 = setInterval(function(){
// page++;
// changePage();
// },2000)
// outer.onmouseover = function(){
// clearInterval(time1);
// }
// outer.onmouseout = function(){
// time1 = setInterval(function(){
// page++;
// changePage();
// },2000);
// }
// prePage.onclick = function(){
// if(flag)
// {
// page --;
// changePage();
// flag = false;
// }
//
// }
// nextPage.onclick = function(){
// if(flag)
// {
// page++;
// changePage();
// flag = false;
// }
//
// }
// function changePage(){
// var start = parseInt(inner.style.left);
// var end = page *(-800);
//
// move(start,end);
// }
// function move(start,end){
//
// var speed = (end - start )/100;
//
// time = setInterval(function(){
// start += speed;
// if(start == end)
// {
// clearInterval(time);
// if(start == (-4000))
// {
// page = 1;
// start = -800;
// }
// if(start == 0)
// {
// page = 4;
// start = -3200;
// }
// flag = true;
// }
//
// inner.style.left = start + "px";
// },1)
// }
//
// for(var i = 0 ;i<tabImg.length;i++)
// {
// tabImg[i].index = i ;
// tabImg[i].onmouseover = function(){
// for(var j = 0 ; j < tabImg.length;j++)
// {
// tabImg[j].style.opacity = "";
// }
// tabImg[this.index].style.opacity = "0.5";
//
// var start = parseInt(inner.style.left);//-800
// var end = (this.index+1)*(-800);//-1600
// var speed = (end - start) /100;
//
// var time2 = setInterval(function(){
// start += speed;
// if(start>=end && speed >0)
// {
// clearInterval(time2);
// start = end;
// }
// if(start <= end && speed <0)
// {
// clearInterval(time2);
// start = end;
// }
// inner.style.left = start +"px";
// },1)
//
// }
//
//
// }
var page = 0;
var time;
for(var i = 0 ; i < tabImg.length;i++)
{
tabImg[i].index = i;
tabImg[i].onmouseover = function(){
clearInterval(time);
page = this.index;
move(inner,"left",this.index*(-800),100,function(){
time = setTimeout(movec,1000);
});
}
}
movec();
function movec(){
page++;
if(page >3){
page=0;
}
var end = page*(-800);
move(inner,"left",end,100,function(){
time = setTimeout(movec,1000);
})
}
prePage.onclick = function(){
clearTimeout(time);
page++;
if(page>3)
{
page = 0;
}
move(inner,"left",page*(-800),100,function(){
time = setTimeout(movec,1000);
})
}
nextPage.onclick = function(){
clearTimeout(time);
page--;
if(page<0)
{
page = 3;
}
move(inner,"left",page*(-800),100,function(){
time = setTimeout(movec,1000);
})
}
</script>
move.js
//一次改進版
//function move(obj, attr, end, start, stepNum) {
//
// var speed = (end - start) / stepNum;
// this.time = setInterval(function() {
// start += speed;
// if (start >= end && speed > 0) {
// clearInterval(this.time);
// start = end;
// }
// if (start <= end && speed < 0) {
// clearInterval(this.time);
// start = end;
// }
// obj.style[attr] = start + "px";
// }, 10)
//}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]
}else{
return getComputedStyle(obj)[attr];
}
}
//二次改進版
function move(obj, attr, end,stepNum,fn) {
var start = parseInt(getStyle(obj,attr));
var speed = (end - start) / stepNum;
clearInterval(obj.time);
obj.time = setInterval(function() {
start += speed;
if (start >= end && speed > 0) {
clearInterval(obj.time);
start = end;
if(fn){
fn();
}
}
if (start <= end && speed < 0) {
clearInterval(obj.time);
start = end;
if(fn)
{
fn();
}
}
obj.style[attr] = start + "px";
}, 10)
}