JS学习笔记--轮播图效果

<style>
ul, ol { padding:0; margin:0; }
li { list-style:none; }
#box { width:600px; height:350px; border:10px solid #ccc; margin:0 auto; position:relative; background:url(img/loader_ico.gif) no-repeat center; overflow:hidden; }
#box a { position:absolute; top:160px; z-index:1; width:30px; height:30px; line-height:30px; background:rgba(0,0,0, 0.4); color:#fff; text-align:center; text-decoration:none; font-size:14px; }
#box a:hover { background:rgba(0,0,0, 1); }
#box .prev { left:10px; }
#box .next { right:10px; }
#box img { width:600px; height:350px; }
#box ul { position:absolute; top:0; left:0; width:3600px; transition:1s; }
#box ul li { float:left; width:600px; height:350px; }
#box ol { position:absolute; bottom:10px; left:240px;  }
#box ol li { float:left; width:30px; height:30px; margin-right:4px; background:#3CC; line-height:30px; text-align:center; font-size:14px; cursor:pointer;}
#box .active { background:red; color:#fff; }
</style>

<div id="box">
    <a class="prev" href="javascript:;"><</a>
    <a class="next" href="javascript:;">></a>
    <ul>
        <!--<li><img src="img/136.jpg" /></li>
        <li><img src="img/138.jpg" /></li>
        <li><img src="img/139.jpg" /></li>
        <li><img src="img/150.jpg" /></li>
        <li><img src="img/151.jpg" /></li>
        <li><img src="img/152.jpg" /></li>-->
    </ul>
    <ol>
        <!--<li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>-->
    </ol>
</div>

<script>
var oDiv = document.getElementById(‘box‘);
var aA = oDiv.getElementsByTagName(‘a‘);
var oImg = oDiv.getElementsByTagName(‘img‘)[0];
var oUl = oDiv.getElementsByTagName(‘ul‘)[0];
var oOl = oDiv.getElementsByTagName(‘ol‘)[0];
var aLi = oOl.getElementsByTagName(‘li‘);
var arrUrl = [ ‘img/136.jpg‘, ‘img/138.jpg‘, ‘img/139.jpg‘, ‘img/150.jpg‘, ‘img/151.jpg‘, ‘img/152.jpg‘ ];
var num = 0;

// 初始化
for (var i=0; i<arrUrl.length; i++) {
    oUl.innerHTML += ‘<li><img src="‘ + arrUrl[i] + ‘" /></li>‘;
    oOl.innerHTML += ‘<li>‘ + (i+1) + ‘</li>‘;
}
aLi[num].className = ‘active‘; //默认点击第一个红色

aA[0].onclick = function () { //按钮左
    num--
    if(num == -1){
        num = arrUrl.length-1; //回到最后一张
    }    
    fnTab();
}
aA[1].onclick = function () { //按钮右
    num++    
    if(num == arrUrl.length) {
        num = arrUrl.length-1 //最后一张
        num = 0 //第一张
    }
    fnTab();
}

// li 点击事件
for (var i=0; i<arrUrl.length; i++) {
    
    aLi[i].index = i;
    
    aLi[i].onclick = function () {
        //alert( this.index*600 );
        num = this.index;
        fnTab();
    };
}

function fnTab() {
    for (var i=0; i<aLi.length; i++) {
        aLi[i].className = ‘‘;
    }
    aLi[num].className = ‘active‘;
    oUl.style.left = -num*600 + ‘px‘; //每点击一次600px
}

</script>