javascript - 幻灯片 - 返回第一张图片

标签 javascript jquery

<分区>

有谁知道如何在此幻灯片中添加另一个按钮,使用户在幻灯片放映期间的任何给定点返回到第一张图片?

http://www.switchonthecode.com/tutorials/jquery-creating-a-slideshow

如有任何帮助,我们将不胜感激。

谢谢!!

最佳答案

假设您遵循您提供的示例中的代码,这样的事情应该有效:

<script type="text/javascript>
$(document).ready(function(){

    $('#btnGoFirstSlide').click(function(){
        //hide all
        $('#slideshow-holder .slideshow-content').hide();

        //show the first one :)
        $('#slideshow-holder .slideshow-content:eq(0)').show();
    });

});
</script>
<body>
    <div id="slideshow-area">
      <div id="slideshow-scroller">
        <div id="slideshow-holder">
          <div class="slideshow-content">
            <img src="eureka_small.jpg" />
          </div>
          <div class="slideshow-content">
            <img src="wallace_gromit_small.jpg" />
          </div>
          <div class="slideshow-content">
            <img src="dead_like_me_small.jpg" />
          </div>
        </div>
      </div>
      <div id="slideshow-previous"></div>
      <div id="slideshow-next"></div>
    </div>

    <a id="btnGoFirstSlide" href="#">Go to First Slide</a>
</body>

此外,如果您想使用内置动画转到第一张幻灯片,请尝试计算 ScrollAmount 并在点击事件中调用该函数:

$("#slideshow-scroller").animate({scrollLeft: scrollAmount}, 1000);

关于javascript - 幻灯片 - 返回第一张图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5858971/

相关文章:

javascript - 数据库插入后更新 Meteor js 中的客户端 View

javascript - 为什么在 React 和纯 CSS 中呈现的相同代码会提供不同的结果 :

jquery-validate - 带有实时 "click"的 jQuery 验证插件

javascript - 可观察到返回错误,但请求数据正常返回

javascript - Threejs,了解Raycaster相交的对象坐标

javascript - 单击子元素时 react 获取父元素的状态/数据

jquery - 脚本无响应 - 是否可以避免?

javascript - 解析 json 编码的数组并获取值

jquery - 饼图中的 Struts 2 jQuery 插件,带有 json 结果

javascript - 继续在'运算符中获取 "Uncaught TypeError: Cannot use '以搜索 '191'“jQuery