尝试在其他设计者放在一起的现有幻灯片放映模板上添加控制按钮。 (我对jQuery的了解非常有限)有人可以在这里帮助我吗?我只知道我们需要使用$ rS来与其他设置不冲突。而且我唯一添加的是“ //下一个/上一个控件”部分。
var $rS = jQuery.noConflict();
$rS(function() {
// Next/previous controls
$rS("slideshow-control_left").onclick(
showSlides('#slideshow > div:-1')
)
$rS("#slideshow > div:gt(0)").hide();
/*With the following setup, one slide will stay on page for 3 seconds (solid) and 1 second of transitioning (the previous fades out while the next fades in)*/
setInterval(function() {
$rS('#slideshow > div:first')
/*Set fadeout time here. Unite is millisecond.*/
.fadeOut(1000)
.next()
/*Set fadein time here. Unite is millisecond.*/
.fadeIn(1000)
.end()
.appendTo('#slideshow');
/*Set the fixed frame duration here. Unite is millisecond.*/
}, 3000);
});
});
#slideshow {
position: relative;
}
#slideshow > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
#slideshow {
width: 960px;
height:284px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="slideshow-control">
<a id="slideshow-control_left" href="#">
<span class="slideshow-control_left-icon">left</span>
</a>
<a id="slideshow-control_right" href="#">
<span class="slideshow-control_right-icon">right</span>
</a>
</div>
<div id="slideshow">
<div >1</div>
<div >2</div>
<div >3</div>
</div>