jQuery幻灯片显示控制按钮

时间:2019-05-22 23:47:04

标签: jquery controls

尝试在其他设计者放在一起的现有幻灯片放映模板上添加控制按钮。 (我对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>

0 个答案:

没有答案