Question

我正在为一个我为朋友设计的网站创建一个简单的小幻灯片。到目前为止，通过单击图像显示/隐藏相应的图像，我可以完美地工作。我试图让它自动滚动图像但它似乎不起作用。这是我的代码：

<script type="text/javascript">
$(function() // run after page loads
{
  $('.slide1t').show();

  $('.slide2').click(function()
  { 
    $('.slide2t').show();
    $('.slide1t').hide();
    $('.slide3t').hide();
    $('.slide4t').hide();
  });
  $('.slide1').click(function()
  { 
    $('.slide1t').show();
    $('.slide2t').hide();
    $('.slide3t').hide();
    $('.slide4t').hide();
  });
  $('.slide3').click(function()
  { 
    $('.slide3t').show();
    $('.slide1t').hide();
    $('.slide2t').hide();
    $('.slide4t').hide();
  });
  $('.slide4').click(function()
  { 
    $('.slide4t').show();
    $('.slide1t').hide();
    $('.slide2t').hide();
    $('.slide3t').hide();
  });
});

</script>

这是我用来隐藏/显示图像的代码。可以使用切换缩短吗？

这就是我试图让它们自动滚动的内容：

<script type="text/javascript">
$(function() // run after page loads
{
  $('.slide1t').show([1000]),
  $('.slide1t').hide(),
  $('.slide2t').show([1000]),
  $('.slide21t').hide(),
  $('.slide3t').show([1000]),
  $('.slide3t').hide(),
  $('.slide4t').show([1000]),
  $('.slide4t').hide()
});

</script>

我已经尝试过这个相同代码的其他方面来尝试让它做某事，但是没有铁砧。

<div id="slideshow">

        <div class="text"> 
            <a class="slide1" href="#"><img src="images/1.png" width="240" height="60" /></a>
            <a class="slide2" href="#"><img src="images/2.png" width="240" height="60" /></a> 
            <a class="slide3" href="#"><img src="images/3.png" width="240" height="60" /></a> 
            <a class="slide4" href="#"><img src="images/4.png" width="240" height="60" /></a>
        </div>

        <div class="image">        
            <a class="slide1t" href="#"><img src="images/image1.png" width="525" height="210" /></a>
            <a class="slide2t" href="#"><img src="images/image1.png" width="525" height="110" /></a>
            <a class="slide3t" href="#"><img src="images/image1.png" width="525" height="170" /></a>
            <a class="slide4t" href="#"><img src="images/image1.png" width="525" height="190" /></a>
        </div>

    </div>

我查看了文档，看到你可以使用.show([duration],[easing],[callback])，但我真的不知道要输入什么内容。

全部谢谢

Answer 1

您是否正在制作幻灯片，您可以在当前幻灯片的左侧和右侧看到上一张和下一张幻灯片，或只是一张幻灯片淡入另一张幻灯片？

如果是后者，您可以使用这个非常简单的代码来执行此操作。

HTML：

<div class="image">        
    <img src="images/image1.png"  />
    <img src="images/image2.png"  />
    <img src="images/image3.png"  />
    <img src="images/image4.png"  />
</div>

CSS：

.image
{
    position:relative;
}

.image img
{
   position:absolute;
   top:0;
   left:0;
}

jQuery的：

$(function() {

    $('.image img:gt(0)').hide(); // to hide all but the first image when page loads

    setInterval(function()
    {
        $('.image :first-child').fadeOut(1000)
            .next().fadeIn(1000).end().appendTo('.image');
    },5000);        
}

这基本上像一包卡片一样洗牌。 5000（5秒）是褪色之间的间隔，1000（1秒）是褪色动画的速度。

要使其工作，您必须在包含div和position:relative上使用position:absolute将图像放在彼此的顶部。

jsFiddle demo

Answer 2

问题是，.show是异步的。所以你的javascript将继续它会产生效果。这是第三个参数的用途，它是一个匿名函数，在效果结束时会被调用。

你应该查看一个jquery插件，自己做这件事就是在浪费时间。这些插件有数百个，因此总有一个适合您的需求。

例如：http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/

Answer 3

你可以这样做：

$('.image a').each(function (index) {
    $(this).show(1000, function () {
        $(this).delay(index * 1000).hide(1000);
    });
});

FIDDLE DEMO

Answer 4

如果您不想更改结构并仍希望保留点击功能，则可以执行某些操作like this

这与您的原始方法类似，但基于函数和元素siblings而不是每个图像个体。这是为了轻松添加新元素和保留功能而优化的。我使用setInterval来循环动画功能

HTML（略有改动）

<div id="slideshow">
        <div class="text"> <a id='one' href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="240" height="60" /></a>
     <a id='two' href="#"><img src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width="240" height="60" /></a>  <a id='three' href="#"><img src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" width="240" height="60" /></a>  <a id='four' href="#"><img src="https://si0.twimg.com/profile_images/2204583306/fb_logo.png" width="240" height="60" /></a>

</div>
        <div class="image"> <a id='one' href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="525" height="210" /></a>
     <a id='two' href="#"><img src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width="525" height="110" /></a>
     <a id='three' href="#"><img src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" width="525" height="170" /></a>
     <a id='four' href="#"><img src="https://si0.twimg.com/profile_images/2204583306/fb_logo.png" width="525" height="190" /></a>

        </div>
    </div>

CSS：

.image a:not(#one) {
    display:none;
}

的javascript：

$('.text a').click(function () {
    var idName = $(this).attr('id');
    $('.image a').each(function () {
        if ($(this).attr('id') === idName) $(this).show(1000);
        else {
            $(this).hide(1000);
        }
    });
    window.clearInterval(loop);
    loop = self.setInterval(function () {
        autoChangeSlide()
    }, 5000);
});

function autoChangeSlide() {
    var elem;
    $('.image a').each(function () {
        if ($(this).is(':visible')) elem = $(this);
    });
    if (elem.attr('id') != $('.image').children('a').last().attr('id')) {
        elem.hide(1000).next().show(1000);
    } else {
        elem.hide(1000).parent().children('a').first().show(1000);
    }
}
var loop = self.setInterval(function () {
    autoChangeSlide()
}, 5000);

您可以将我的解决方案与Dolchio相结合，使其特别棒极了

jQuery自动滚动图像

4 个答案: