CSS图片（伪）轮播

最新推荐文章于 2021-08-25 19:40:27 发布

Tony L.Du

最新推荐文章于 2021-08-25 19:40:27 发布

阅读量641

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/Dextrad_ihacker/article/details/53240923

HTML5 专栏收录该内容

5 篇文章

订阅专栏

效果：
http://115.159.53.185/test/lunbo/
有bug

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
         #imageBox{
            width: 720px;
            height: 300px;
            margin: 50px auto;
            list-style: none;
            position: relative;
            overflow: hidden;
         }
         #imageBox li{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 100%;
            transition: all 0.3s;//过渡
            z-index: 5;
         }
         #imageBox li:first-child{
            left: -100%;
         }

         #imageBox li:nth-child(2){
            left:0;
         }
         #imageBox li img{
            width: 100%;
            height: 100%;
         }
         #next{
            margin-left: 750px;
         }
    </style>
    <body>
        <ul id="imageBox">
            <li><img src="img/1.png"/></li>
            <li><img src="img/2.png"/></li>
            <li><img src="img/3.png"/></li>
            <li><img src="img/4.png"/></li>
        </ul>
        <button id="next">next</button>
        <button id="prev">prev</button>

        <script type="text/javascript">
            var lis = document.getElementById("imageBox").getElementsByTagName('li');
            var next = document.getElementById("next");
            var prev = document.getElementById("prev");
            var nowIndex = 1;
            var count = lis.length;

            next.onclick = function(){
                for(var i = 0; i < count; i++){
                    if(i!=nowIndex){
                        lis[i].style.left = '100%';
                    }
                }               
                //下一个图片的编号
                var nextIndex = nowIndex + 1 >= count ? 0 : nowIndex + 1;
                //当前图片向左：
                lis[nowIndex].style.left = '-100%';
                lis[nowIndex].style.zIndex = '5';
                //下一页从右向左
                lis[nextIndex].style.left = '0%';
                lis[nextIndex].style.zIndex = '6';

                nowIndex = nextIndex;
            }
            prev.onclick = function(){
                for(var i = 0; i < count; i++){
                    if(i!=nowIndex){
                        lis[i].style.left = '-100%';
                    }
                }               
                //下一个图片的编号
                var nextIndex = nowIndex != 0 ? nowIndex-1 : count-1;
                //当前图片向左：
                lis[nowIndex].style.left = '100%';
                lis[nowIndex].style.zIndex = '5';
                //下一页从右向左
                lis[nextIndex].style.left = '0%';
                lis[nextIndex].style.zIndex = '6';

                nowIndex = nextIndex;
            }


        </script>
    </body>
</html>