Question

我使用了全宽度响应-jQuery-Slider-Banner-Rotator-Plugin

http://www.jqueryscript.net/slider/Full-Width-Responsive-jQuery-Slider-Banner-Rotator-Plugin.html

获得全屏宽度，我在我的网站上实现了这个，但我遇到了一个问题。

图像上有五个点。滑块按照点的顺序显示图像。每当我点击滑块上的任何一个点（即第四个点）时，它都不会从该点继续（ ie;不显示第4个之后的第5个图像）而是按照之前的位置顺序（即显示第2个）。

任何帮助都将不胜感激。

html代码：

<div class="banner">
<div class="slider">
<ul>
<li> <a href="#"> <img src="slider01.jpg" width="1920" height="447"> </a> </li>
<li> <a href="#"> <img src="slider02.jpg" width="1920" height="447"> </a> </li>
<li> <a href="#"> <img src="slider03.jpg" width="1920" height="447"> </a> </li>
<li> <a href="#"> <img src="slider04.jpg" width="1920" height="447"> </a> </li>
</ul>
<div class="dots"> 
<a href="javascript:void(0);" rel="0" class="cur"></a> 
<a href="javascript:void(0);" rel="1"></a> 
<a href="javascript:void(0);" rel="2"></a> 
<a href="javascript:void(0);" rel="3"></a> 
</div>
<div class="arrow"> 
<a href="javascript:void(0);" class="btn-left">&lt;</a> 
<a href="javascript:void(0);" class="btn-right">&gt;</a> 
</div>
</div>
</div>

调用插件：

 <script type="text/javascript">

  $(document).omSlider({
    slider: $('.slider'),
    dots: $('.dots'),
    next:$('.btn-right'),
    pre:$('.btn-left'),
    timer: 12000,
    showtime: 1000

  });
  </script>

Jquery代码：

$.om = $.om || {};
$.om.slider = function(el, options) {

  'use strict';

  var base = this;
  base.init = function() {
    options = $.extend({
      slider: null,
      dots: null,
      next: null,
      pre: null,
      index: 0,
      timer: 5000,
      showtime: 800
    }, options || {});
    var s,
      inbox = options.slider.find('ul>li'),
      size = inbox.size(),
      b = options.index,
      play = 1,
      movelist = options.dots;

    function move() {
      b++;
      if (b > size - 1) {
        b = 0;
      }
      inbox.each(function(e) {
        inbox.eq(e).hide(0);
        movelist.find("a").eq(e).removeClass("cur");
        if (e == b) {
          inbox.eq(b).fadeIn(options.showtime);
          movelist.find("a").eq(b).addClass("cur");
        }
      });
    }
    s = setInterval(move, options.timer);

    function stopp(obj) {
      $(obj).hover(function() {
        if (play) {
          clearInterval(s);
          play = 0;
        }
      }, function() {
        if (!play) {
          s = setInterval(move, options.timer);
          play = 1;
        }
      });
    }

    if (options.next === null || options.pre === null) {
      options.slider.find('.arrow').hide()
    } else {
      options.next.click(function() {
        move();
      });

      options.pre.click(function() {
        b--;
        if (b < 0) {
          b = size - 1
        }
        inbox.each(function(e) {
          inbox.eq(e).hide(0);
          movelist.find("a").eq(e).removeClass("cur");
          if (e == b) {
            inbox.eq(b).fadeIn(options.showtime);
            movelist.find("a").eq(b).addClass("cur");
          }
        });
      });

      options.slider.hover(function() {
        options.next.fadeIn();
        options.pre.fadeIn();
      }, function() {
        options.next.fadeOut();
        options.pre.fadeOut();
      });

    }

    movelist.find("a").click(function() {
      var rel = $(this).attr("rel");
      inbox.each(function(e) {
        inbox.eq(e).hide(0);
        movelist.find("a").eq(e).removeClass("cur");
        if (e == rel) {
          inbox.eq(rel).fadeIn(options.showtime);
          movelist.find("a").eq(rel).addClass("cur");
        }
      });
    });

    inbox.each(function(e) {
      var inboxsize = inbox.size();
      var inboxwimg = $(this).find('img').width();
      inbox.eq(e).css({
        "margin-left": (-1) * inboxwimg / 2 + "px",
        "z-index": inboxsize - e
      });
    });

  }
}

$.fn.omSlider = function(options) {
  return this.each(function() {
    new $.om.slider(this, options).init();
  });
};

Full-Width-Responsive-jQuery-Slider无法正常工作？

0 个答案: