jqueryのスライドショーコードを自動再生するように変更する

Question

jqueryのスライドショーでsome code in an article on daniweb.comが見つかりました。私はスライドを自動的に変更するので、ボタンをクリックする代わりに、このコードを変更する方法がわからないので、スライドを5秒ごとに変更します。

これは現在のコードです： mysqlデータベースとphpを使用して中古車情報をテーブルから取り出し、スライドショーで表示します。アイデアは、

は、任意の助けをいただければ幸いです...私たちのレジカウンターや顧客が参照するための待合室で7-10" の表示とrasPiでこれを実行することですありがとうございました！

$(document).ready(function(){ 
 
    var currentPosition = 0; 
 
    var slideWidth = 950; 
 
    var slides = $('.slide'); 
 
    var numberOfSlides = slides.length; 
 
    // Remove scrollbar in JS 
 
    $('#slidesContainer').css('overflow', 'hidden'); 
 
    // Wrap all .slides with #slideInner div 
 
    slides 
 
    .wrapAll('<div id="slideInner"></div>') 
 
    // Float left to display horizontally, readjust .slides width 
 
\t .css({ 
 
     'float' : 'left', 
 
     'width' : slideWidth 
 
    }); 
 
    // Set #slideInner width equal to total width of all slides 
 
    $('#slideInner').css('width', slideWidth * numberOfSlides); 
 
    // Insert controls in the DOM 
 
    $('#slideshow') 
 
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>') 
 
    .append('<span class="control" id="rightControl">Clicking moves right</span>'); 
 
    // Hide left arrow control on first load 
 
    manageControls(currentPosition); 
 
    // Create event listeners for .controls clicks 
 
    $('.control') 
 
    .bind('click', function(){ 
 
    // Determine new position 
 
\t currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1; 
 
\t // Hide/show controls 
 
    manageControls(currentPosition); 
 
    // Move slideInner using margin-left 
 
    $('#slideInner').animate({ 
 
     'marginLeft' : slideWidth*(-currentPosition) 
 
    }); 
 
    }); 
 
    // manageControls: Hides and Shows controls depending on currentPosition 
 
    function manageControls(position){ 
 
    // Hide left arrow if position is first slide 
 
\t if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() } 
 
\t // Hide right arrow if position is last slide 
 
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() } 
 
    } \t 
 
    
 
    
 
});

* \t \t { 
 
\t \t font-family:Arial; 
 
\t \t 
 
\t \t } 
 

 
body \t { 
 
\t \t width:800px; 
 
\t \t height:572px; 
 
\t \t background:linear-gradient(#117dc8,#15527c); 
 
\t \t 
 
\t \t } 
 
\t \t 
 
.header \t \t { 
 
\t \t \t color:white; 
 
\t \t \t font-size:28px; 
 
\t \t \t margin-left:20px; 
 
\t \t \t margin-top:10px; 
 
\t \t \t } 
 
\t \t \t 
 
.logo \t \t { 
 
\t \t \t position:absolute; 
 
\t \t \t margin-left:720px; 
 
\t \t \t margin-top:-30px; 
 
\t \t \t z-index:10; 
 
\t \t \t width:250px; 
 
\t \t \t 
 
\t \t \t } 
 
\t \t \t 
 
.container \t { 
 
\t \t \t position:relative; 
 
\t \t \t background-color:#fafafa; 
 
\t \t \t width:940px; 
 
\t \t \t height:480px; 
 
\t \t \t border-radius:10px; 
 
\t \t \t margin-top:10px; 
 
\t \t \t margin-left:6px; 
 
\t \t \t padding:5px; 
 
\t \t \t z-index:6; 
 
\t \t \t 
 
\t \t \t } 
 
\t \t \t 
 
#carDisplay \t { 
 
\t \t \t width:915px; 
 
\t \t \t height:455px; 
 
\t \t \t padding:10px; 
 
\t \t \t border:none; 
 
\t \t \t 
 
\t \t \t } 
 
\t \t \t 
 
.contact \t { 
 
\t \t \t position:absolute; 
 
\t \t \t color:white; 
 
\t \t \t margin:15px 80px; 
 
\t \t \t font-size:20px; 
 

 
\t \t \t } 
 

 
* \t \t { 
 
\t \t font-family:Arial; 
 
\t \t 
 
\t \t } 
 
\t \t 
 
#cert \t { 
 
\t \t color:#e3001b; \t \t \t 
 
\t \t 
 
\t \t } 
 
\t 
 
.cartitle \t { 
 
\t \t \t font-size:30px; 
 
\t \t \t margin-left:10px; 
 
\t \t \t 
 
\t \t \t } \t 
 

 
.stock \t \t { 
 
\t \t \t font-size:14px; 
 
\t \t \t font-size:18px; 
 
\t \t \t color:#999; 
 
\t \t \t margin-left:10px; 
 
\t \t \t 
 
\t \t \t } 
 
\t 
 
.carimg \t \t { 
 
\t \t width:480px; 
 
\t \t padding:5px; 
 
\t \t margin-left:10px; 
 
\t \t box-shadow:0px 2px 5px 1px #bbb; 
 
\t \t 
 
\t \t } 
 
\t \t 
 
.details \t { 
 
\t \t \t padding:30px; 
 
\t \t \t font-size:25px; 
 
\t \t \t 
 
\t \t \t } 
 
\t \t \t 
 
.price \t { 
 
\t \t font-size:35px; 
 
\t \t font-weight:bold; 
 
\t \t color:#333; 
 
\t \t text-align:center; 
 
\t \t margin-top:-20px; 
 
\t \t margin-bottom:10px; 
 
\t \t }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<title>Used Car New Arrivals</title> 
 

 
<link rel="stylesheet" href="css/mainstyle.css"> 
 
<link rel="stylesheet" href="css/framestyle.css"> 
 

 
<script src="jscript.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 

 
</head> 
 
<body> 
 

 
\t <div class="header"><i>Used Car New Arrivals | </i><span style="font-size:20px;">Falmouth Toyota</span></div> 
 
\t <img class="logo" src="ft-logo.png" /> 
 

 
\t <div class="container"> 
 
\t 
 
\t <?php 
 

 
\t $servername = "localhost"; 
 
\t $username = "root"; 
 
\t $password = "root"; 
 
\t $dbname = "usedcars"; 
 

 
\t // Create connection 
 
\t $conn = mysqli_connect($servername, $username, $password, $dbname); 
 
\t // Check connection 
 
\t if (!$conn) { 
 
    \t die("Connection failed: " . mysqli_connect_error()); 
 
\t } 
 

 
\t $sql = "SELECT * FROM usedcars"; 
 
\t $result = mysqli_query($conn, $sql); 
 
\t $num = mysql_num_rows($result); 
 
\t 
 
\t if (mysqli_num_rows($result) > 0) { 
 
    \t // output data of each row 
 
    \t while($row = mysqli_fetch_assoc($result)) { 
 

 
\t echo "<div id='slideshow'> 
 
    \t \t \t <div id='slidesContainer'> 
 
\t  \t \t \t <div class='slide'> 
 

 
<table class='tableStyle'> 
 
\t 
 
\t <tr> 
 
\t \t <td colspan='2'><div class='stock'>Stock: " . $row["stock"] ."</div></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan='2'><div class='cartitle'><b><span id='cert'>" . $row["certified"] . "</span> " . $row["preowned"]. " " . $row["year"] . " " . $row["make"] . " " . $row["model"] . " " . "</b><span style='font-size:18px;color:#999;'> - " . number_format($row["mileage"]) . " miles</span></div></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan='2'><hr /></td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td><img class='carimg' src='" .$row["img"] . "' /></td> 
 
\t \t <td class='details'><div class='price'>Price: $" . number_format($row["price"]) ."</div><br> 
 
\t \t <hr style='margin-top:-25px;'/> 
 
\t \t \t <b>Vehicle Features</b> 
 
\t \t \t <ul> 
 
\t \t \t \t <li>" . $row["feat1"] . "</li> 
 
\t \t \t \t <li>" . $row["feat2"] . "</li> 
 
\t \t \t \t <li>" . $row["feat3"] . "</li> 
 
\t \t \t \t <li>" . $row["feat4"] . "</li> 
 
\t \t \t </ul> 
 
\t \t </td> 
 
\t <tr> 
 
</table> 
 
\t  \t \t \t 
 
\t  \t \t \t </div> 
 
\t  \t \t </div> 
 
\t \t </div>"; 
 
    \t } 
 
\t } 
 

 

 
\t else { 
 
    \t echo "<span>No images available</span>"; 
 
\t } 
 

 
\t mysqli_close($conn); 
 
\t ?> 
 

 
\t </div> 
 
\t 
 
\t <div class="contact">VISIT OUR SHOWROOM FOR MORE INFORMATION ON ANY OF THESE VEHICLES</div> 
 

 
</body> 
 

 
<script src="jscript.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 

 

 
</html>

スクリプトタグ内に次のコードを追加し

Answer 1

してみてください。あなたの要件ごとにスライド変更期間を変更すること自由に感じなさい。

ここでは5000 5秒で5×1000ミリ秒を意味する。

window.setInterval(function() { 
    $('#rightControl.control').click(); 
}, 5000); 

この回答があれば受け入れてください。

更新：連続スライドショーを再生（ループ）

注：以下に、既存のアニメーション機能を交換してください。これは、働いていた

$('#slideInner').animate({ 
    'marginLeft' : slideWidth*(-currentPosition) 
}, function() { 
    // if last slide then move the pointer to 1st slide 
    if(currentPosition == numberOfSlides-1) { 
     currentPosition = -1; 
    } 
});