发表新帖
发表新帖

How to make a simple auto playing slide show with javascript?

后端 未结
关注
2 1177
小蘑菇
小蘑菇 2021-01-03 16:59

I want to make a simple slide show that automatically plays when the page is loaded. Here is my code so far:

HTML:


   &         


        

                      

              相关标签:
2条回答
  • 旧时难觅i
    2021-01-03 17:20

    Try this simple javascript code to make image slider.

    <html>
<head>
    <style>
        .container{
            position:relative;
            width:100%;
            height:300px;
            border-radius:5px;
            border:1px solid red;
            overflow:hidden;
        }
    </style>
</head>
<body>
<div id="imgGallary" class="container">
    <img src="http://www.examiningcalvinism.com/kingdavid.jpg" alt="" width="100%" height="300" />
    <img src="http://www.kingjamesbibleonline.org/1611-Bible/1611-King-James-Bible-Introduction.jpg" alt="" width="100%" height="300" />
    <img src="http://biblestudyoutlines.org/wp-content/uploads/2012/07/the-triump-of-david-over-king-hadadezer-of-zobah-1024x729.jpg" alt="" width="100%" height="300" />
    <img src="http://www.cgu.edu/Images/news/Flame%20Winter12/KJV-BibleBW.jpg" alt="" width="100%" height="300" />
</div>
<script>
(function(){
        var imgLen = document.getElementById('imgGallary');
        var images = imgLen.getElementsByTagName('img');
        var counter = 1;

        if(counter <= images.length){
            setInterval(function(){
                images[0].src = images[counter].src;
                console.log(images[counter].src);
                counter++;

                if(counter === images.length){
                    counter = 1;
                }
            },4000);
        }
})();
</script>
</body>
</html>
    0 讨论(0)
  • 粉色の甜心
    2021-01-03 17:27

    $("#slideshow > div:gt(0)").hide();

    setInterval(function() { $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); }, 3000);

    0 讨论(0)
 看不清?
提交回复
热议问题