0
我無法啓動圖像的自動切片，它只發生點擊後發生，應如何修改我的代碼以便我可以更改切片在一段時間後（例如5秒）自動拍攝圖像。在jQuery和自動切片圖像中運行一段時間後運行函數
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slicebox - 3D Image Slider</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Slicebox - 3D Image Slider with Fallback" />
<meta name="keywords" content="jquery, css3, 3d, webkit, fallback, slider, css3, 3d transforms, slices, rotate, box, automatic" />
<meta name="author" content="Pedro Botelho for Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<script type="text/javascript" src="js/modernizr.custom.46884.js"></script>
</head>
<body onload="funct()">
<div class="container">
<div class="codrops-top clearfix">
<a href="http://tympanus.net/Development/AutomaticImageMontage/"><span>« Previous Demo: </span>Automatic Image Montage</a>
<span class="right">
<a target="_blank" href="http://www.flickr.com/photos/strupler/">Images by <strong>ND Strupler</strong></a>
<a href="http://tympanus.net/codrops/?p=5657"><strong>Back to the Codrops Article</strong></a>
</span>
</div>
<h1>Slicebox <span>A fresh 3D image slider with graceful fallback</span></h1>
<div class="more">
<ul id="sb-examples">
<li>More examples:</li>
<li class="selected"><a href="index.html">Example 1</a></li>
<li><a href="index2.html">Example 2</a></li>
<li><a href="index3.html">Example 3</a></li>
<li><a href="index4.html">Example 4</a></li>
</ul>
</div>
<div class="wrapper" id="checkthis">
<ul id="sb-slider" class="sb-slider">
<li>
<a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/1.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Creative Lifesaver</h3>
</div>
</li>
<li>
<a href="http://www.flickr.com/photos/strupler/2968268187" target="_blank"><img src="images/2.jpg" alt="image2"/></a>
<div class="sb-description">
<h3>Honest Entertainer</h3>
</div>
</li>
<li>
<a href="http://www.flickr.com/photos/strupler/2968114825" target="_blank"><img src="images/3.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Brave Astronaut</h3>
</div>
</li>
<li>
<a href="http://www.flickr.com/photos/strupler/2968122059" target="_blank"><img src="images/4.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Affectionate Decision Maker</h3>
</div>
</li>
<li>
<a href="http://www.flickr.com/photos/strupler/2969119944" target="_blank"><img src="images/5.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Faithful Investor</h3>
</div>
</li>
<li>
<a href="http://www.flickr.com/photos/strupler/2968126177" target="_blank"><img src="images/6.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Groundbreaking Artist</h3>
</div>
</li>
<li>
<a href="http://www.flickr.com/photos/strupler/2968945158" target="_blank"><img src="images/7.jpg" alt="image1"/></a>
<div class="sb-description">
<h3>Selfless Philantropist</h3>
</div>
</li>
</ul>
<div id="shadow" class="shadow"></div>
<div id="nav-arrows" class="nav-arrows">
<a href="#x">Next</a>
<a href="#y">Previous</a>
</div>
<div id="nav-dots" class="nav-dots">
<span class="nav-dot-current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div><!-- /wrapper -->
<p class="info"><strong>Example 1:</strong> Default settings</p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slicebox.js"></script>
<script type="text/javascript">
$(function() {
var Page = (function() {
var $navArrows = $('#nav-arrows').hide(),
$navDots = $('#nav-dots').hide(),
$nav = $navDots.children('span'),
$shadow = $('#shadow').hide(),
slicebox = $('#sb-slider').slicebox({
onReady : function() {
$navArrows.show();
$navDots.show();
$shadow.show();
},
onBeforeChange : function(pos) {
$nav.removeClass('nav-dot-current');
$nav.eq(pos).addClass('nav-dot-current');
}
}),
init = function() {
initEvents();
},
initEvents = function() {
// add navigation events
$navArrows.children(':first').on('click', function() {
setInterval("callme()", 1000);
return false;
});
//$(function(){
//callme();
//});
function callme(){
//$('#checkit').append("callme loaded<br />");
slicebox.next();
setInterval("callme()", 1000);
}
$navArrows.children(':last').on('click', function() {
slicebox.previous();
return false;
});
$nav.each(function(i) {
$(this).on('click', function(event) {
var $dot = $(this);
if(!slicebox.isActive()) {
$nav.removeClass('nav-dot-current');
$dot.addClass('nav-dot-current');
}
slicebox.jump(i + 1);
return false;
});
});
};
return { init : init };
})();
Page.init();
});
</script>
<script>
// make sure the "myContainer" id in the script is the same id of the div
$(document).ready(function() {
slicebox.next();
$('#nav-arrows').sbslider(); // this is the piece of code that will do the magic thing
});
</script>
</body>
</html>
我不能夠啓動圖像的自動切片，它是隻發生在點擊後，我應該如何修改我的代碼，這樣我時，自動改變圖像的切片。
尋找jquery-timer插件 - 非常有用 –
但我需要改變圖像的切片，我應該在哪裏使用計時器，以及如何？ – Santanu
請告訴我如何修改代碼以使其發生，首先我必須單擊按鈕，然後纔可以發生事件，但是我想在幾秒鐘後自動執行它，應如何修改代碼？ – Santanu