淘宝大图滚动小例子

来源：互联网发布：魔法王座怒炮进阶数据编辑：程序博客网时间：2024/04/28 21:21

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

margin:0;

padding:0;

}

.banner{

width:520px;

height:280px;

overflow:hidden;

position:relative;

}

ul{

list-style:none;

width:3640px;

height:280px;

position:absolute;

left:-520px;

top:0;

}

li{

float:left;

}

.banner>a{

position:absolute;

top:50%;

width:24px;

background-color:#222222;

opacity:0.45;

margin-top:-28px;

height:56px;

color:#fff;

text-align: center;

line-height:56px;

}

#last{

left:0;

}

#next{

right:0;

}

.banner>div>a{

text-decoration:none;

width:10px;

border-radius:50%;

background-color:#222222;

height:10px;

margin:0 2px;

float:left;

}

.banner>div{

width:70px;

position:absolute;

bottom:12px;

left:0;

right:0;

margin:0 auto;

z-index:1;

}

</style>

</head>

<body>

<divclass="banner">

<ulclass="bnn">

</ul>

<ahref="javascript:void(0);"id="last"><</a>

<ahref="javascript:void(0);"id="next">></a>

<divclass="controls">

<ahref="javascript(void)" style="background-color:#FF4400;" ></a>

<ahref="javascript(void)"></a>

</div>

<scriptsrc="js/move-1.js" type="text/javascript" charset="utf-8"></script>

<scripttype="text/javascript">

varaList = document.querySelectorAll("li");

var oBnn = document.querySelector(".bnn");

var oLast = document.querySelector("#last");

var oNext = document.querySelector("#next");

var aBtn = document.querySelectorAll(".controls>a");

var i = 1;

var timer = null;

var direction = true;

functionAutoAct() {

clearInterval(timer);

timer = setInterval(function() {

//if(i >= 5){

//i = 0;

//oBnn.style.left = 0;

//}

//move(oBnn,{left:-520*(i+1)});

//for(var j=0; j<aBtn.length; j++){

//aBtn[j].style.backgroundColor = "#222222";

//}

//aBtn[i].style.backgroundColor = "#FF4400";

//i++;

//},1000);

//i++;

for(varj=0; j<aBtn.length; j++){

aBtn[j].style.backgroundColor= "#222222";

}

j++;

if(i === 5) {

i= 0;

oBnn.style.left= 0 + "px";

}

aBtn[i].style.backgroundColor= "#FF4400";

move(oBnn, {left:-520 * ++i});

}, 1000);

}

AutoAct();

for (var m = 0; m< aBtn.length; m++) {

aBtn[m].index = m;

aBtn[m].onmouseover= function() {

i = this.index;

for(var j = 0; j< aBtn.length; j++) {

aBtn[j].style.backgroundColor= "#222222";

}

move(oBnn, {

left:-520 * (i + 1)

});

aBtn[i].style.backgroundColor= "#FF4400";

}

oLast.onclick= function(){

clearInterval(timer);

i--;

if(i== -1){

i= 4;

oBnn.style.left= -3120 + "px";

}

move(oBnn,{left:-520*(i+1)});

for(varj=0; j<aBtn.length; j++){

aBtn[j].style.backgroundColor= "#222222";

}

aBtn[i].style.backgroundColor= "#FF4400";

AutoAct();

}

oNext.onclick= function(){

clearInterval(timer);

i++;

if(i>= 5){

i= 0;

oBnn.style.left= 0;

}

move(oBnn,{left:-520*(i+1)});

for(varj=0; j<aBtn.length; j++){

aBtn[j].style.backgroundColor= "#222222";

}

aBtn[i].style.backgroundColor= "#FF4400";

AutoAct();

}

//oLast.onclick = function(){

//i--;

//if(i <= 0){

//oBnn.style.left = -3120 + "px";

//i = 0;

//}

//move(oBnn,{left: oBnn.offsetLeft + (aList[0].offsetWidth)});

//};

//oNext.onclick = function(){

//i++;

//if(i >= 5){

//oBnn.style.left = 0 + "px";

//i = 0;

//}

//move(oBnn,{left: oBnn.offsetLeft - (aList[0].offsetWidth)});

//};

//for(var i=0; i<aBtn.length; i++){

//aBtn[i].onmouseover = function(){

//}

//var timer = null;

//var i = 0;

//timer = setInterval(function(){

////clearInterval(timer);

//i++;

//if(i == 5){

//oBnn.style.left = 0 + "px";

//i = 0;

//}

//move(oBnn,{left: oBnn.offsetLeft - (aList[0].offsetWidth)});

//for(var j=0; j>aBtn.length; j++){

//aBtn[j].style.backgroundColor = "";

//}

//aBtn[i]

//},1000);

//i++;

//move(oBnn,{left:-520*i});

//if(i == 6){

//i = 1;

//oBnn.style.left = 0;

//}

</script>

</body>

</html>

0 0