在简单滑块上实现自动播放的setInterval函数

时间:2015-05-18 19:09:11

标签: javascript jquery

我尝试添加自动播放功能,默认情况下循环这个带有字幕的简单图片轮播。我的第一次尝试只是添加了dom准备好的点击功能所包含的内容......这没有用。 注意我仍然需要导航按钮才能继续工作。

的jQuery

 $(document).ready(function() {
    $('.img-wrap .slideZ:gt(0)').hide();
    $('.nextbox').click(function() {
        $('.captionZ').fadeIn();
        $('.img-wrap .slideZ:first-child').fadeOut("slow").next().fadeIn("slow").end().appendTo('.img-wrap');
    });
    $('.prevbox').click(function() {
        $('.captionZ').fadeIn();
        $('.img-wrap .slideZ:first-child').fadeOut();
        $('.img-wrap .slideZ:last-child').prependTo('.img-wrap').fadeOut();
        $('.img-wrap .slideZ:first-child').fadeIn();
     });
    });

加价

<div class="paginateyo">
            <div class="prevbox">
            <img src="images/prev_arrow.jpg" id="prv" alt="Previous"/>
            <span class="prvp">previous</span>
            </div>
            /
            <div class="nextbox">
            <span class="nxtp">next</span>
            <img src="images/next_arrow.jpg" id="nxt" alt="Next"/>
            </div>
        </div>
        </div>  

        <div id="img-grp-wrap">
            <div class="img-wrap">
                <div class="slideZ">
                <img src="images/slide_image1.jpg" alt=""/>
                <div class="captionZ">aaaaaaaaaaaaaa
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image2.jpg" alt=""/>
                <div class="captionZ">bbbbbbbbbbbbbb
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image3.jpg" alt=""/>
                <div class="captionZ">cccccccccccccccc
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image4.jpg" alt=""/>
                <div class="captionZ">dddddddddddddddd
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image5.jpg" alt=""/>
                <div class="captionZ">eeeeeeeeeeeeeeeeee
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image6.jpg" alt=""/>
                <div class="captionZ">fffffffffffffffff
                </div>
                </div>
                <div class="slideZ">
                <img src="images/slide_image7.jpg" alt=""/>
                <div class="captionZ">gggggggggggggggggg
                </div>
                </div>
            </div>  

        </div>

1 个答案:

答案 0 :(得分:1)

做这样的事情:

function interval(){
    function(){
     $('.captionZ').fadeIn();
     $('.img-wrap .slideZ:first-child').fadeOut("slow").next().fadeIn("slow").end().appendTo('.img-wrap');
}    
var t = setInterval(interval) ;

如果你想让它继续前进到下一个&#34;图片。根据您的设置方式,您还可以使onclick通过删除setInterval()的间隔然后创建新的window.clearInterval(interval)来重置;WITH q1 AS ( SELECT ItemID ,[HP] AS HPUpdatedDate ,[Apple] AS AppleUpdatedDate ,[Microsoft] AS MicrosoftUpdatedDate ,[IBM] AS IBMUpdatedDate FROM ( SELECT Itemid ,Vendorname ,UpdatedDate FROM VendorItemPricing WHERE ItemID = 122 ) A PIVOT(MAX(UpdatedDate) FOR Vendorname IN ( [HP] ,[Apple] ,Microsoft ,IBM )) P ) ,q2 AS ( SELECT ItemID ,[HP] AS HPPrice ,[Apple] AS ApplePrice ,[Microsoft] AS MicrosoftPrice ,[IBM] AS IBMPrice FROM ( SELECT Itemid ,Vendorname ,VendorPrice FROM VendorItemPricing WHERE ItemID = 122 ) A PIVOT(MAX(VendorPrice) FOR Vendorname IN ( [HP] ,[Apple] ,Microsoft ,IBM )) P ) ,q3 AS ( SELECT ItemID ,[HP] AS HPObsoleteItem ,[Apple] AS AppleObsoleteItem ,[Microsoft] AS MicrosoftObsoleteItem ,[IBM] AS IBMObsoleteItem FROM ( SELECT Itemid ,Vendorname ,CAST(ObsoleteItem AS TINYINT) AS INTColumn FROM VendorItemPricing WHERE ItemID = 122 ) A PIVOT(MAX(INTColumn) FOR Vendorname IN ( [HP] ,[Apple] ,Microsoft ,IBM )) P ) SELECT q1.ItemID ,q1.HPUpdatedDate ,q1.AppleUpdatedDate ,q1.MicrosoftUpdatedDate ,q1.IBMUpdatedDate ,q2.HPPrice ,q2.ApplePrice ,q2.MicrosoftPrice ,q2.IBMPrice ,q3.HPObsoleteItem ,q3.AppleObsoleteItem ,q3.MicrosoftObsoleteItem ,q3.IBMObsoleteItem FROM q1 JOIN q2 ON q1.ItemID = q2.ItemID JOIN q3 ON q1.ItemID = q3.ItemID 函数。