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

末蓝、 2023-06-04 04:59 28阅读 0赞

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

原理很简单：

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

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

<!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>

转载于:https://www.cnblogs.com/qwj-sysu/p/4080797.html