简易图片自动轮播

Posted 暗杠小发

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简易图片自动轮播相关的知识，希望对你有一定的参考价值。

根据前段时间学的大图轮播，自己做了一个简单的图片自动轮播

代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #body
            {
                width: 90%;
                border: 1px solid red;
                height: 1000px;
                margin: 0px auto;
            }
            #stage
            {
                width: 1000px;
                height: 500px;
                border: 10px solid black;
                position: absolute;
                left: 150px;
                top: 200px;
                overflow: hidden;
            }
            #left-btn
            {
                position: absolute;
                left: 0px;
                top:0px;
                height: 500px;
                width: 40px;
                background-color: black;
                color: white;
                opacity: 0.5;
                line-height: 500px;
                text-align: center;
                font-size: 30px;
                z-index: 999;
            }
            #right-btn
            {
                position: absolute;
                right: 0px;
                top:0px;
                height: 500px;
                width: 40px;
                background-color: black;
                color: white;
                opacity: 0.5;
                line-height: 500px;
                text-align: center;
                font-size: 30px;
                z-index: 999;
            }
            #left-btn:hover
            {
                cursor: pointer;
                opacity: 0.7;
            }
            #right-btn:hover
            {
                cursor: pointer;
                opacity: 0.7;
            }
            #ad-banner
            {
                height: 500px;
                width: 5000px;
                position: relative;
                background-color: blue;
            }
            .ad{
                width: 1000px;
                height: 500px;
                float: left;
                text-align: center;
                line-height: 500px;
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <div id="body">
            <div id="stage">
                <div id="left-btn"><</div>
                <div id="right-btn">></div>
                <div id="ad-banner">
                    <div class="ad" style="background-color: red">1</div>
                    <div class="ad" style="background-color: green">2</div>
                    <div class="ad" style="background-color: blue">3</div>
                    <div class="ad" style="background-color: pink">4</div>
                    <div class="ad" style="background-color: white">5</div>
                </div>
            </div>
        </div>
    </body>
</html>
<script>
var speed = 10; 
var count = 1;
var banner = document.getElementById(‘ad-banner‘);
var arr = Array();
window.onload=function(){setInterval(‘change()‘,3000);}
function change()
{
arr.push(window.setInterval(‘moveLeft()‘,10));
}
function moveLeft()
{
var banner_left = banner.offsetLeft;
    if(count<5)
    {
        if(banner_left>(count*(-1000)))
        {
        banner.style.marginLeft = banner_left - speed + ‘px‘
        }
        else
        {
            for(var i in arr)
            {
                window.clearInterval(arr[i]);
            }
        
            if(count<5)
            {
            count++;
        
            }
         }
    }
    else if(count==5)
    {
        banner.style.marginLeft = banner_left + 4000 + ‘px‘;
                for(var i in arr) {
                        window.clearInterval(arr[i]);
                    }
                count=1
    }
}

其中有个体验不好的地方是从最后一张到第一张速度太快，没有轮播效果。这个问题有待解决。

以上是关于简易图片自动轮播的主要内容，如果未能解决你的问题，请参考以下文章

jquery自动轮播图代码只能出现一张图片第二三张就空白了 轮播正常播放

jquery简单自动轮播图代码怎么写

jquery图片上下轮播的问题，怎么实现自动轮播？

JavaScript实现图片的自动轮播

解决：使用 swiper 自动轮播图片，当拖动过 swiper 内的内容时，导致不继续自动轮播

前端例程20220920：纯CSS图片自动轮播效果