Question

我有一个由jQuery创建的幻灯片，默认情况下从左到右滑动。有一个下一个按钮，点击该按钮应从左向右滑动图像，同时点击上一个按钮，图像应从右向左滑动。

目前我的代码如下：

jQuery('.slider').cycle({ 
      fx:     'scrollRight', 
      speed:  1000, 
      timeout:5000, 
      next:   '.next',
      prev:  '.prev'
    });

现在它默认从右向左滑动，然后根据需要单击下一个按钮，但是 它必须在上一次按钮点击时从左向右移动，这不会发生..

如果有任何机构可以帮助解决这个问题，我将非常感激。

修改这是html代码：

<div class="slider ddblock-processed" style="position: relative; width: 990px; height: 396px; visibility: visible; overflow-x: hidden; overflow-y: hidden; ">
         <div class="slide" style="position: absolute; top: 0px; opacity: 1; width: 990px; height: 396px; z-index: 4; left: 990px; display: none; "><img src="http://files/images/ddblock/mobile-apps.png" alt="image" style="height: 392px; width: 990px; " class="ddblock-processed"></div>
         <div class="slide" style="position: absolute; top: 0px; opacity: 1; width: 990px; height: 396px; z-index: 4; left: 990px; display: none; "><img src="http://files/images/ddblock/seo.png" alt="image" style="height: 392px; width: 990px; " class="ddblock-processed"></div>
         <div class="slide" style="position: absolute; z-index: 5; top: 0px; opacity: 1; display: block; width: 990px; height: 396px; left: 0px; "><img src="http://files/images/ddblock/web-applications.png" alt="image" style="height: 392px; width: 990px; " class="ddblock-processed"></div>
         <div class="slide" style="position: absolute; top: 0px; opacity: 1; width: 990px; height: 396px; z-index: 4; left: 990px; display: none; "><img src="http://files/images/ddblock/webdesign.png" alt="image" style="height: 392px; width: 990px; " class="ddblock-processed"></div>
       </div>
 <!-- prev/next pager on slide -->
       <div class="pager-slide prev-container prev-container-top">
   <a class="prev" href="#"></a>
  </div>
  <div class="pager-slide next-container next-container-top">
   <a class="next" href="#"></a>
  </div>

Answer 1

尝试使用Google提供的免费解决方案HTML5Slides。

使用jquery进行幻灯片放映

1 个答案: