淘寶大圖滾動小例子

Vivian_shuang發表於2016-07-11

<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8">

<title></title>

<style type="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>

<div class="banner">

<ul class="bnn">

<li><img src="img/55.jpg" alt="" /></li>

<li><img src="img/11.jpg" alt="" /></li>

<li><img src="img/22.jpg" alt="" /></li>

<li><img src="img/33.jpg" alt="" /></li>

<li><img src="img/44.jpg" alt="" /></li>

<li><img src="img/55.jpg" alt="" /></li>

<!--<li><img src="img/11.jpg" alt="" /></li>-->

</ul>

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

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

<div class="controls">

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

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

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

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

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

</div>

</div>


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

<script type="text/javascript">

var aList = 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;

function AutoAct() {

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(var j=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(var j=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(var j=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>

<!--//正滾動的時候把數改了,這句話(函式的定時器)在if之後執行完，所以if之後left是move();之後的-->

相關文章