0

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

<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])，但我真的不知道该输入什么内容。

谢谢大家

4

4 回答 4

2

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

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

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秒）是淡出动画的速度。

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

jsFiddle 演示

于 2013-07-13T15:22:45.943 回答
1

如果你不想改变你的结构并且仍然想保留点击功能，你可以做这样的事情

这类似于您的原始方法，但基于函数和元素，siblings而不是单独处理每个图像。这已针对轻松添加新元素和保留功能进行了优化。我也用 asetInterval来循环动画功能

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 的解决方案结合起来，让它变得特别棒

于 2013-07-13T17:04:29.407 回答
1

问题是，.show 是异步的。因此，您的 javascript 将继续发挥作用。这就是第三个参数的用途，它是一个匿名函数，当效果完成时会被调用。

您应该研究一个 jquery 插件，自己制作这些东西是在浪费时间。有数百个这样的插件，所以总有一个适合您的需求。

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

于 2013-07-13T15:12:25.887 回答
1

你可以这样做：

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

小提琴演示

于 2013-07-13T15:15:29.827 回答