将jquery幻灯片代码修改为自动播放

时间:2016-05-26 13:29:06

标签: javascript php jquery html mysql

我发现了some code in an article on daniweb.com用于jquery幻灯片放映并让它从mysql中提取数据。我想修改它,以便幻灯片每5秒左右自动更改一次,而不必单击按钮但不知道如何修改此代码来执行此操作...

这是当前的代码:它使用mysql数据库和php从表中提取二手车信息,然后以幻灯片形式显示。我的想法是在rasPi上运行7-10"在我们的收银台或候车室展示,让顾客看到......

非常感谢任何帮助,谢谢!



$(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
	.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
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
	// 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
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
  
  
});
&#13;
*		{
		font-family:Arial;
		
		}

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

			}

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

.stock		{
			font-size:14px;
			font-size:18px;
			color:#999;
			margin-left:10px;
			
			}
	
.carimg		{
		width:480px;
		padding:5px;
		margin-left:10px;
		box-shadow:0px 2px 5px 1px #bbb;
		
		}
		
.details	{
			padding:30px;
			font-size:25px;
			
			}
			
.price	{
		font-size:35px;
		font-weight:bold;
		color:#333;
		text-align:center;
		margin-top:-20px;
		margin-bottom:10px;
		}
&#13;
<!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>

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

	<div class="container">
	
	<?php

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

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

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

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

<table class='tableStyle'>
	
	<tr>
		<td colspan='2'><div class='stock'>Stock: " . $row["stock"] ."</div></td>
	</tr>
	<tr>
		<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>
	</tr>
	<tr>
		<td colspan='2'><hr /></td>
	</tr>
	<tr>
		<td><img class='carimg' src='" .$row["img"] . "' /></td>
		<td class='details'><div class='price'>Price: $" . number_format($row["price"]) ."</div><br>
		<hr style='margin-top:-25px;'/>
			<b>Vehicle Features</b>
			<ul>
				<li>" . $row["feat1"] . "</li>
				<li>" . $row["feat2"] . "</li>
				<li>" . $row["feat3"] . "</li>
				<li>" . $row["feat4"] . "</li>
			</ul>
		</td>
	<tr>
</table>
	   			
	   			</div>
	   		</div>
	  	</div>";
    	}
	}


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

	mysqli_close($conn);
	?>

	</div>
	
	<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

尝试在脚本标记内添加以下代码。您可以根据自己的要求随意更改幻灯片更改时间。

这里5000表示5 * 1000毫秒,即5秒。

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

如果有帮助,请接受此答案。

更新:连续播放幻灯片(循环播放)

注意:使用以下代码段替换现有的animate函数

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