jQuery自动滚动浏览图片

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

要使用此功能，您必须使用position:relative上的div和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的使其特别真棒