javascript 实现图片轮播和点击切换功能

浏览数：19 / 时间：2015年06月08日

图片轮播是网页上一个比较常见的功能，下面我们来实现他吧

原理很简单：

1：固定的区域，所有的图片重叠，一次只能显示一张图片

2：通过改变图片的zIndex属性改变显示的图片，就可以达到切换的效果了

<!-- cycle_pic.html -->
<!DOCTYPE html>
<html>
<head>
    <title>cycle_pic</title>
    <meta charset="utf-8">
    <meta content="text/html" http-equiv="Content-Type">
    <style type="text/css">
        #slideshow_wrapper {
            POSITION: relative;
            PADDING-BOTTOM: 0px;
            BACKGROUND-COLOR: #121212;
            PADDING-LEFT: 0px;
            WIDTH: 650px;
            PADDING-RIGHT: 0px;
            HEIGHT: 400px;
            OVERFLOW: hidden;
            PADDING-TOP: 0px
        }
        #slideshow_footbar {
            Z-INDEX: 5;
            POSITION: absolute;
            FILTER: alpha(opacity=50);
            WIDTH: 100%;
            BOTTOM: 0px;
            HEIGHT: 30px;
            background-color: black;
            opacity:0.5;
        }
        #slideshow_photo {
            POSITION: absolute;
            WIDTH: 100%;
            HEIGHT: 100%;
            CURSOR: pointer
        }
        #slideshow_photo A {
            Z-INDEX: 1;
            BORDER-BOTTOM: 0px;
            POSITION: absolute;
            BORDER-LEFT: 0px;
            MARGIN: 0px;
            DISPLAY: block;
            BORDER-TOP: 0px;
            TOP: 0px;
            BORDER-RIGHT: 0px;
            LEFT: 0px
        }
        #slideshow_footbar .slideshow-bt {
            BACKGROUND-COLOR: #d2d3d4;
            MARGIN: 10px 10px 0px 0px;
            WIDTH: 10px;
            DISPLAY: inline;
            FLOAT: right;
            HEIGHT: 10px;
            FONT-SIZE: 0px
        }
        #slideshow_footbar .bt-on {
            BACKGROUND-COLOR: red;
        }
</style>
<script type="text/javascript" charset="utf-8">
    var curIndex=1;//初始换显示第一张
    function slideTo (index) {
        var index = parseInt(index);
        var pic = document.getElementById("slideshow_photo").childNodes;
        for(var i=0;i<pic.length;i++){//改变zIndex属性
            if(pic[i].attributes && pic[i].attributes[‘index‘] && parseInt(pic[i].attributes[‘index‘].value)==index){
                pic[i].style.zIndex=2;
                curIndex=index;
            }
            else if(pic[i].attributes && pic[i].attributes[‘index‘]) {
                pic[i].style.zIndex=1;
            }
        }
        var bts = document.getElementsByClassName("slideshow-bt");
        for(var i=0;i<bts.length;i++){//改变显示的效果
            if(parseInt(bts[i].attributes[‘index‘].value)==index){
                bts[i].className="slideshow-bt bt-on";
            }
            else bts[i].className = "slideshow-bt";
        }
    }
    window.onload = function  () {    //为按钮初始化onclick事件
        var bts = document.getElementsByClassName("slideshow-bt");
        for(var i=0;i<bts.length;i++){
            bts[i].onclick = function  () {
                slideTo(this.attributes[‘index‘].value);
            }
        }
    }
    setInterval(function  () {//循环切换
        if(curIndex+1>5) curIndex=0;
        slideTo(curIndex+1);
    },2000);
</script>
</head>
<body>
    <div id="slideshow_wrapper">
        <div id="slideshow_photo">
            <a href="#" title="" index="1"><img src="./num/1.jpg" width="650px;" alt="1" border="0px;"></a>
            <a href="#" title="" index="2"><img src="./num/2.jpg" width="650px;" alt="2" border="0px;"></a>
            <a href="#" title="" index="3"><img src="./num/3.jpg" width="650px;" alt="3" border="0px;"></a>
            <a href="#" title="" index="4"><img src="./num/4.jpg" width="650px;" alt="4" border="0px;"></a>
            <a href="#" title="" index="5"><img src="./num/5.jpg" width="650px;" alt="5" border="0px;"></a>
        </div>
        <div id="slideshow_footbar">    
            <div class="slideshow-bt" index="5"></div>
            <div class="slideshow-bt" index="4"></div>
            <div class="slideshow-bt" index="3"></div>
            <div class="slideshow-bt" index="2"></div>
            <div class="slideshow-bt" index="1"></div>
        </div>
    </div>
</body>
</html>