将自动播放 + 上一个和下一个按钮添加到滑块
Posted
技术标签:
【中文标题】将自动播放 + 上一个和下一个按钮添加到滑块【英文标题】:Adding autoplay + prev&next buttons to slider 【发布时间】:2014-04-05 02:25:33 【问题描述】:我使用 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 );
);
);
一切正常,但有人知道如何向此滑块添加自动播放和 prev&next 按钮吗??
【问题讨论】:
【参考方案1】:您可以使用 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);
);
【讨论】:
如何在鼠标悬停时停止滑块??请回复以上是关于将自动播放 + 上一个和下一个按钮添加到滑块的主要内容,如果未能解决你的问题,请参考以下文章