Javascript 如何在幻灯片放映中自动更改幻灯片_Javascript_Jquery_Css_Slider

Javascript 如何在幻灯片放映中自动更改幻灯片

javascript jquery css

Javascript 如何在幻灯片放映中自动更改幻灯片,javascript,jquery,css,slider,Javascript,Jquery,Css,Slider,我在我的网站上添加了一个Jquery滑块（称为SudoSlider），带有“上一页”和“下一页”按钮，允许用户前进到下一页或返回下一页。然而，我想让幻灯片自动改变我遇到过类似的问题，但我的Javascript相当有限，因此我无法使用提供给其他用户的代码如果有人能帮我做到这一点，我将非常感激请参阅此处了解所使用的代码此外，如果JSFIDLE没有任何用处，则可以看到滑块在运行非常感谢这是工作小提琴：我刚刚更改了加载javascript的顺序。下面是包含javascript的完整HTML

我在我的网站上添加了一个Jquery滑块（称为SudoSlider），带有“上一页”和“下一页”按钮，允许用户前进到下一页或返回下一页。然而，我想让幻灯片自动改变

我遇到过类似的问题，但我的Javascript相当有限，因此我无法使用提供给其他用户的代码

如果有人能帮我做到这一点，我将非常感激

请参阅此处了解所使用的代码

此外，如果JSFIDLE没有任何用处，则可以看到滑块在运行

非常感谢

这是工作小提琴：

我刚刚更改了加载javascript的顺序。下面是包含javascript的完整HTML和包含外部css

HTML更改：

<html>
  <head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/></script>
<script type="text/javascript" src="http://www.pinknoise-systems.co.uk/userfiles/jquery/slider/js/jquery.sudoSlider.min.js"/></script>
<script type="text/javascript">
    $(document).ready(function(){    
            var sudoSlider = $("#slider").sudoSlider();
     });    
</script>
</head>
<body>
<div id="container">
    <div style="position:relative;">
        <div id="slider">
            <ul>                
                <li>
                    <div style="margin:0 auto;text-align:center;height:300px;">
                        <img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_6.png" />
                    </div>
                </li>
                <li>
                    <div style="margin:0 auto;width:620px;height:300px;background:url('http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_5.png');">

                    <div class="product_row_1">
                        <div class="one">
                        <a href="http://www.pinknoise-systems.co.uk/Sennheiser_SKP_300_G3--product--1091.html" class="slide_product_name">Sennheiser SKP 300 G3</a>
                        <div class="p-image"><a href="http://www.pinknoise-systems.co.uk/Sennheiser_SKP_300_G3--product--1091.html"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/skp300.jpg" /></a></div>
                        <div class="p-content">
                            <img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
                            <p class="slide_product_price">£296.00</p>
                             <p class="slide_product_price2">EX VAT @20%</p>
                        </div>
                        </div>

                        <div class="two margin-3">
                         <a href="http://www.pinknoise-systems.co.uk/Fostex_PM841_Professional_Studio_Monitor--product--1110.html" class="slide_product_name">Fostex PM8.4.1</a>
                        <div class="p-image"><a href="href="http://www.pinknoise-systems.co.uk/Fostex_PM841_Professional_Studio_Monitor--product--1110.html""><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/pm841.jpg" /></a></div>
                        <div class="p-content">
                            <img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
                            <p class="slide_product_price">£412.50</p>
                           <p class="slide_product_price2">EX VAT @20%</p>
                        </div>
                        </div>

                        <div class="three margin-3">
                         <a href="http://www.pinknoise-systems.co.uk/Delkin_Wingman_HD_3oz_Waterproof_Action_Camera--product--850.html" class="slide_product_name">Delkin Wingman</a>
                        <div class="p-image"><a href="http://www.pinknoise-systems.co.uk/Delkin_Wingman_HD_3oz_Waterproof_Action_Camera--product--850.html"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/wingman.jpg" /></a></div>
                        <div class="p-content">
                            <div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
                            <p class="slide_product_price">£179.19</p>
                            <p class="slide_product_price2">EX VAT @20%</p>
                        </div>
                        </div>

                    </div>


                    <div class="product_row_2">
                        <div class="one">
                        <a href="http://www.pinknoise-systems.co.uk/DFocus_Street_Runner_Bundle--product--1104.html" class="slide_product_name">D|Focus Street Runner Kit</a>
                        <div class="p-image"><a href="http://www.pinknoise-systems.co.uk/DFocus_Street_Runner_Bundle--product--1104.html"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/streetrunnerbundle.jpg" /></a></div>
                        <div class="p-content">
                            <div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
                            <p class="slide_product_price">£332.50</p>
                            <p class="slide_product_price2">EX VAT @20%</p>
                        </div>
                        </div>

                        <div class="two margin-3">
                         <a href="http://www.pinknoise-systems.co.uk/DFocus_Field_Runner_Bundle--product--1105.html" class="slide_product_name">D|Focus Field Runner Kit</a>
                        <div class="p-image"><a href="http://www.pinknoise-systems.co.uk/DFocus_Field_Runner_Bundle--product--1105.html"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/fieldrunnerkit.jpg" /></a></div>
                        <div class="p-content">
                            <div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
                            <p class="slide_product_price">£382.50</p>
                             <p class="slide_product_price2">EX VAT @20%</p>
                        </div>
                        </div>

                        <div class="three margin-3">
                         <a href="http://www.pinknoise-systems.co.uk/DFocus_Austin_Rig_Bundle--product--1106.html" class="slide_product_name">D|Focus Austin Rig Bundle</a>
                        <div class="p-image"><a href="http://www.pinknoise-systems.co.uk/DFocus_Austin_Rig_Bundle--product--1106.html"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/austinrigbundle.jpg" /></a></div>
                        <div class="p-content">
                            <img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
                            <p class="slide_product_price">£499.17</p>
                            <p class="slide_product_price2">EX VAT @20%</p>
                        </div>
                        </div>

                    </div>

                    </div>
                </li>    
            <li>
                    <div style="margin:0 auto;text-align:center;">
                        <img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_3.jpg" />
                    </div>
                </li>

                <li>
                    <div style="margin:0 auto;text-align:center;">
                        <img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_4.jpg" />
                    </div>
                </li>
            </ul>
        </div>
    </div>
    </div>
</body>
</html>


$（文档）.ready（函数（）{
var sudoSlider=$（“#滑块”）.sudoSlider（）；
});    




296.00英镑
20%的增值税税前
412.50英镑
20%的增值税税前
179.19英镑
20%的增值税税前
332.50英镑
20%的增值税税前
382.50英镑
20%的增值税税前
499.17英镑
20%的增值税税前

试试这个，它会将滑块设置为自动更改

   $(document).ready(function(){    
        var sudoSlider = $("#slider").sudoSlider({fade: true,auto:true});
    });

这是

您是如何修复的？你改变了什么？如果JSFIDLE发生故障，我们将永远不会知道您是如何修复的谢谢您的回复，我将非常感激。是否可以使每张幻灯片从右侧滑入，而不是褪色？很抱歉，我的Javascript非常有限。@SVS非常感谢，很抱歉我的回答应该是最上面的答案。非常感谢你的调整。我设法编辑了滑块的参数。我成功地使它连续滑动，并设置了滑动时间/暂停时间。请参阅此JSFIDLE以获取最新版本。我希望能让它在幻灯片中（快速）向后滑动，在到达最后一张幻灯片时返回到第一张幻灯片。此外，如果访客单击“上一步/下一步”按钮，自动滑动功能似乎会停止。提前谢谢大家！非常感谢到目前为止的答案，非常感谢。我设法使用@Furqan的回复来了解如何编辑滑块的参数。我成功地使它连续滑动，并设置了滑动时间/暂停时间。有关最新版本，请参见[link]JSFiddle。我希望能让它在幻灯片中（快速）向后滑动，在到达最后一张幻灯片时返回到第一张幻灯片。此外，如果访客单击“上一步/下一步”按钮，自动滑动功能似乎会停止。提前谢谢大家！