jquery slideshow code zu autoplay ändern

Question

Ich fand some code in an article on daniweb.com für eine jquery slideshow und habe es funktioniert ziehen daten von mysql. Ich möchte es so ändern, dass die Folie automatisch alle 5 Sekunden oder so wechselt, anstatt auf die Schaltflächen klicken zu müssen, aber nicht wissen, wie Sie diesen Code ändern können ...

Hier ist der aktuelle Code: Es verwendet Eine MySQL-Datenbank und PHP, um gebrauchte Auto-Informationen aus einer Tabelle zu ziehen und dann in einer Diashow anzuzeigen. Die Idee ist, das auf einem Raspi mit einer 7-10" Anzeige in unserem Kassierer Zähler oder Wartezimmer laufen für die Kunden zu sehen ...

Jede Hilfe wäre sehr dankbar, danke!

$(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

Versuchen Sie den folgenden Code in einem Script-Tag hinzufügen. Fühlen Sie sich frei, die Diatransport Dauer wie pro Ihre Anforderung zu ändern.

hier 5000 bedeutet 5 * 1000 Milli Sekunden, was 5 Sekunden.

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

Akzeptieren Sie diese Antwort, wenn es hilft.

Update: Spielt die Diashow kontinuierlich (Looping)

Hinweis: Ersetzen Sie die vorhandene belebte Funktion mit dem unter

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