JS 轮播

标签：

HTML部分

    <div class="focus_img">

        <ul class="img_list">

            <li><img src="s1.png" /></li>

            <li><img src="s2.png" /></li>

            <li><img src="s1.png" /></li>

            <li><img src="s2.png" /></li>

            <li><img src="s1.png" /></li>

        </ul>

        <ul class="img_index">

            <li class="one">1</li>

            <li class="two">2</li>

            <li class="three">3</li>

            <li class="four">4</li>

            <li class="five">5</li>

        </ul>

    </div>

<div class="focus_img">

<ul id="change" class="img_list2">

</ul>

</div>

CSS部分

body {  background-color: #f0f0f0;  }

.focus_img { position: relative; height: 800px; width: 600px; overflow: hidden; margin: auto; border: solid 2px #000000;

}

ul{ position: absolute;}

.img_list { top: 0; left: 0; -webkit-animation: img_list 10s 2s infinite;

    width:10000px;

  }

.img_list   li { float:left;width: 600px; height: 800px; overflow: hidden;}

.img_list li img{ height: 600px; width: 800px;}

.img_index { bottom: 10px;right: 10px} 

.img_index li {float: left; width: 16px; height: 16px; border: solid 1px #cccccc; background-color: #ffffff; color:#000000; text-align: center;line-height: 16px;overflow: hidden;cursor: pointer;margin-right: 2px;  }

.img_index    .one { background-color: #000000; color: #ffffff; -webkit-animation: one 10s 2s infinite;}

.img_index    .two { -webkit-animation: two 10s 2s infinite;}

 .img_index   .three {-webkit-animation: three 10s 2s infinite;}

 .img_index   .four {-webkit-animation: four 10s 2s infinite;}

.img_index    .five {-webkit-animation: five 10s 2s infinite;}

@-webkit-keyframes img_list {

  0%{ -webkit-transform: translate(0,0);}

  10%,20% {-webkit-transform: translate(0,0);}

  30%,40% {-webkit-transform: translate(-600px,0);}

  50%,60% {-webkit-transform: translate(-1200px,0);}

  70%,80% {-webkit-transform: translate(-1800px,0);}

  90%,100% {-webkit-transform: translate(-2400px,0);}

}

@-webkit-keyframes one {

  10%,20%,30%,40%,50%,60%,70%,80%{ background-color: #ffffff; color: #000000;}

  0%,90%,100%{ background-color: #000000;color: #ffffff;}

}

@-webkit-keyframes two {

  0%,30%,40%,50%,60%,70%,80%,90%,100%{ background-color: #ffffff; color: #000000;}

  10%,20%{ background-color: #000000;color: #ffffff;}

}

@-webkit-keyframes three {

  0%,10%,20%,50%,60%,70%,80%,90%,100%{ background-color: #ffffff; color: #000000;}

  30%,40%{ background-color: #000000;color: #ffffff;}

}

@-webkit-keyframes four {

  0%,10%,20%,30%,40%,70%,80%,90%,100%{ background-color: #ffffff; color: #000000;}

  50%,60%{ background-color: #000000;color: #ffffff;}

}

@-webkit-keyframes five {

  0%,10%,20%,30%,40%,50%,60%,90%,100%{ background-color: #ffffff; color: #000000;}

  70%,80%{ background-color: #000000;color: #ffffff;}

}

.img_list2 {width:2000px;margin-left: -50px;}

.img_list2   li { float:left;width: 600px; height: 800px; overflow: hidden;}

.img_list2 li img{ height: 600px; width: 800px;}

JS部分

        var imgs = document.getElementsByClassName(‘img_list‘)[0];

var lis = imgs.getElementsByTagName(‘li‘);

var num = lis.length;

var change_box = document.getElementById(‘change‘);

var new_lis = ‘‘;

var px = 50;

var id;

var n = 1;

new_lis = ‘<li>‘+lis[0].innerHTML +‘</li><li>‘+ lis[1].innerHTML+‘</li>‘;

change_box.innerHTML = new_lis;

console.log(change_box);

function scroll(){

px+=5;

change_box.style.left = ‘-‘+px+‘px‘;

id = setTimeout("srcoll()",2);

if(px>650) {

px = 50;

clearTimeout(id);

change();

}

}

function change(){

change_box.childNodes[0].remove();

change_box.style.left = ‘-‘+px+‘px‘;

var new_li = document.createElement(‘li‘);

n++;

if(n>=num) n=0;

new_li.innerHTML = lis[n].innerHTML;

change_box.appendChild(new_li);

setTimeout("srcoll()",3000);

}

        srcoll();

JS 轮播

标签：

原文地址：http://my.oschina.net/wisdomofgod/blog/491846