Web サイトに Jquery スライダー (SudoSlider と呼ばれる) を追加しました。これには、ユーザーが次のスライドに進んだり、1 つ戻ったりできる「前」および「次」ボタンがあります。ただし、スライドが自動的に変わるようにしたいと思います。
これに似た質問に出くわしましたが、私の Javascript はかなり制限されているため、他のユーザーに提供されたコードを使用できません。
誰かが私がこれを達成するのを手伝ってくれるなら、私はとても感謝しています.
使用されているコードについては、こちらのJSFiddleを参照してください。
また、JSFiddle が役に立たない場合は、ここでスライダーの動作を確認できます。
よろしくお願いします！
ここに作業フィドルがあります：http://jsfiddle.net/surendraVsingh/VN7F8/1/
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>
</p>
これを試してください、それは自動的に変わるようにスライダーを設定します。
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider({fade: true,auto:true});
});
ここに作業リンクがあります