Question

我想在此旁边添加另一张带有不同图片的幻灯片。

我的图片尺寸不同。

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

Answer 1

这里的关键概念是幻灯片显示是一个包含一些图像的区域，并且该区域可以在页面的任何位置重复，但JavaScript代码应该在特定区域中工作。下面的代码显示了一些可能的解决方案。

 (function () {
    function slideshow(container) {
        var imgLen = document.getElementById(container);
        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);
        }
    }

    slideshow('imgGallary1');
    slideshow('imgGallary2');
})();

 .container {
   display: inline-flex;
 }
 .sildeshow {
   position: relative;
   width: 45%;
   height: 300px;
   border-radius: 5px;
   border: 1px solid red;
   overflow: hidden;
 }

<div class="container">
  <div id="imgGallary1" class="sildeshow">
    <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>
  <div id="imgGallary2" class="sildeshow">
    <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>
</div>

如何创建2个并排自动播放图像幻灯片

1 个答案: