[英]Adding autoplay + prev&next buttons to slider
即時消息使用codrops教程http://tympanus.net/codrops/2014/03/13/tilted-content-slideshow/comment-page-2/#comment-458990中介紹的滑塊。
它使用一個簡單的有序列表來顯示幻燈片:
<div class="slideshow" id="slideshow">
<ol class="slides">
<li class="current">
<div class="description">
<h2>Slide 1 Title</h2>
<p>Slide 1 content</p>
</div>
<div class="tiltview col">
<a href="http://grovemade.com/"><img src="img/1_screen.jpg"/></a>
<a href="https://tsovet.com/"><img src="img/2_screen.jpg"/></a>
</div>
</li>
<li>
<div class="description">
<h2>Slide 2 title</h2>
<p>Slide 2 content</p>
</div>
<div class="tiltview row">
<a href="http://pexcil.com/"><img src="img/3_mobile.jpg"/></a>
<a href="http://foodsense.is/"><img src="img/4_mobile.jpg"/></a>
</div>
</li>
</ol>
</div><!-- /slideshow -->
然后,使用javascript創建一個導航,該導航顯示了一組導航,單擊它們會顯示幻燈片:
TiltSlider.prototype._addNavigation = function() {
// add nav "dots"
this.nav = document.createElement( 'nav' )
var inner = '';
for( var i = 0; i < this.itemsCount; ++i ) {
inner += i === 0 ? '<span class="current"></span>' : '<span></span>';
}
this.nav.innerHTML = inner;
this.el.appendChild( this.nav );
this.navDots = [].slice.call( this.nav.children );
}
TiltSlider.prototype._initEvents = function() {
var self = this;
// show a new item when clicking the navigation "dots"
this.navDots.forEach( function( dot, idx ) {
dot.addEventListener( 'click', function() {
if( idx !== self.current ) {
self._showItem( idx );
}
} );
} );
}
一切正常,但是沒有人知道如何向此滑塊添加自動播放和上一個和下一個按鈕嗎?
您可以使用jquery手動創建自動播放功能。 我的代碼將在10秒后調用每張幻燈片。 (即)下一個滑塊將在10秒后調用
$(document).ready(function(){
new TiltSlider( document.getElementById( 'slideshow' ) );
window.setInterval(function(){
$('nav>.current').next().trigger('click');
if($('nav > .current').next().index() == '-1'){
$('nav > span').trigger('click');
}
}, 10000);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.