片滚动插件myScroll

在做产品展示时经常用到，此插件支持两种形式，一种手段左右滚动，一种自动播放。可控制图片显示个数，滚动间隔时间，及动画时间等。

插件参数：

auto:[false,3000]   这里是个数组，第一个是否自动滚动,第二个是自动滚动间隔时间
visible:4    可显示图片的数量
speed:1000 动画时间，可选slow，fast，数值类
scroll:1     每次切换的个数,此数小于等于visible值

使用方法：

首先保证html结构如下：

1
<div class="myScroll" id="product0"> 

2
<p class="myPrevBtn"></p> 

3
<p class="myNextBtn"></p> 

4
<div class="myBlock"> 

5
<ul> 

6
  <li> 

7
  <dl> 

8
    <dt><a href=""><img src="img.jpg" alt="" /></a></dt> 

9
    <dd><a href="">图片滚动插件</a></dd> 

10
  </dl> 

11
  </li> 

12
  <li> 

13
  <dl> 

14
    <dt><a href=""><img src="img.jpg" alt="" /></a></dt> 

15
    <dd><a href="">图片滚动插件</a></dd> 

16
  </dl> 

17
  </li> 

18
  <li> 

19
  <dl> 

20
    <dt><a href=""><img src="img.jpg" alt="" /></a></dt> 

21
    <dd><a href="">图片滚动插件</a></dd> 

22
  </dl> 

23
  </li> 

24
</ul> 

25
</div> 

26
</div>

html结构中li里面的形式自己可以根据实际情况修改

css样式：

1
*{ margin:0; padding:0} 

2
  
3
/*-插件样式*/

4
.myScroll { 

5
    width:100%; 

6
    height:210px; 

7
    overflow:hidden; 

8
    zoom:1; 

9
} 

10
.myScroll p { 

11
    width:22px; 

12
    height:210px; 

13
    background-image:url(icon.gif); 

14
    background-repeat:no-repeat; 

15
    cursor:pointer

16
} 

17
.myPrevBtn { 

18
    background-position:left center; 

19
    float:left; 

20
    display:inline

21
} 

22
.myNextBtn { 

23
    background-position:right center; 

24
    float:right; 

25
    display:inline

26
} 

27
.myBlock { 

28
    overflow:hidden; 

29
    float:left; 

30
    display:inline

31
} 

32
.myBlock ul { 

33
    width:100%; 

34
    overflow:hidden; 

35
    zoom:1; 

36
    list-style:none

37
} 

38
.myBlock ul li { 

39
    width:200px; 

40
    float:left; 

41
    padding:10px 0; 

42
    display:inline

43
} 

44
.myBlock ul li:hover { 

45
    background-color:#FFC

46
} 

47
.myBlock dl { 

48
    width:160px; 

49
    margin:0 auto; 

50
    list-style:none; 

51
} 

52
.myBlock dl dt { 

53
    width:160px; 

54
    height:160px; 

55
    overflow:hidden; 

56
    background-color:#FFF

57
} 

58
.myBlock dl dt img { 

59
    width:160px; 

60
} 

61
.myBlock dl dd { 

62
    line-height:18px; 

63
    list-style:none; 

64
    text-align:center

65
} 

66
.myBlock dl dd a { 

67
    display:inline-block; 

68
    padding:3px 0; 

69
    width:100%; 

70
} 

71
.myClone { 

72
    overflow:hidden; 

73
    zoom:1

74
} 

75
.myClone ul { 

76
    float:left; 

77
    display:inline

78
}

调用插件：

1
//手动滚动 

2
$("#product0").myScroll({ 

3
            visible:3, 

4
        scroll:2, 

5
        speed:1000 

6
        }); 

7
  
8
//自动滚动 

9
$("#product").myScroll({ 

10
               visible:4, 

11
               scroll:3, 

12
               auto:[true,2000], 

13
               speed:1000 

14
});

浏览DEMO>>

源代码：

1
(function($) 

2
{ 

3
  $.fn.myScroll = function(options) 

4
  { 

5
  
6
    //默认配置 

7
    var defaults = { 

8
      auto: [false, 3000], 

9
      //是否自动滚动,第二个参数是自动滚动是切换的间隔时间 

10
      visible: 4, 

11
      //可显示的数量 

12
      speed: 1000, 

13
      //动画时间，可选slow，fast，数值类 

14
      scroll: 1 //每次切换的个数,此数小于等于visible值 

15
    }; 

16
  
17
    var opts = $.extend( 

18
    {}, defaults, options); 

19
    opts.scroll = opts.scroll > opts.visible ? opts.visible : opts.scroll; 

20
  
21
    this.each(function(i) 

22
    { 

23
  
24
      var prevBtn = $(this).find("p.myPrevBtn"), 

25
          nextBtn = $(this).find("p.myNextBtn"), 

26
          block = $(this).find("div.myBlock"), 

27
          innerBlock = block.find("ul"), 

28
          list = block.find('ul>li'), 

29
          listNum = list.size(), 

30
          listWidth = list.width(), 

31
          blockWidth = listWidth * opts.visible, 

32
          ntervalId; 

33
  
34
      //设置宽度样式 

35
    $(this).width(blockWidth + prevBtn.width() + nextBtn.width()); 

36
      block.width(blockWidth).find("ul").width(listWidth * listNum); 

37
  
38
      //获取已滚动个数 

39
  
40
      function getSnum() 

41
      { 

42
        return (parseInt(innerBlock.css("margin-left")) * -1) / listWidth; 

43
      } 

44
  
45
      //获取滚动的距离 

46
  
47
      function getMove(c) 

48
      { 

49
        return c >= opts.scroll ? opts.scroll * listWidth : c * listWidth; 

50
      } 

51
  
52
      //单击向前按钮 

53
      prevBtn.click(function() 

54
      { 

55
        var snum = getSnum(), 

56
            c = listNum - snum - opts.visible, 

57
            m = getMove(c); 

58
  
59
        if (listNum - snum > opts.visible) 

60
        { 

61
          innerBlock.animate( 

62
          { 

63
            "margin-left": "-=" + m 

64
          }, opts.speed); 

65
        } 

66
      }); 

67
  
68
      //单击向后按钮 

69
      nextBtn.click(function() 

70
      { 

71
        var snum = getSnum(), 

72
            m = getMove(snum); 

73
  
74
        if (snum > 0) 

75
        { 

76
          innerBlock.animate( 

77
          { 

78
            "margin-left": "+=" + m 

79
          }, opts.speed); 

80
        } 

81
      }); 

82
  
83
      //如果自动滚动 

84
      if (opts.auto[0]) 

85
      { 

86
  
87
        $(this).width(blockWidth); 

88
        prevBtn.hide(); 

89
        nextBtn.hide(); 

90
  
91
        function auto() 

92
        { 

93
          var snum = getSnum(), 

94
              m = getMove(listNum - snum - opts.visible); 

95
  
96
          if (listNum - snum > opts.visible) 

97
          { 

98
            innerBlock.animate( 

99
            { 

100
              "margin-left": "-=" + m 

101
            }, opts.speed); 

102
          } 

103
          else

104
          { 

105
            innerBlock.css("margin-left", 0).find('li').slice(0, listNum - opts.visible).appendTo(innerBlock); 

106
          } 

107
        } 

108
  
109
        //当鼠标经过滚动区域停止滚动 

110
    block.hover(function() 

111
        { 

112
          clearInterval(intervalId); 

113
        }, function() 

114
        { 

115
          intervalId = setInterval(auto, opts.auto[1] + Math.abs(opts.speed - opts.auto[1]) + 100); 

116
        }).trigger('mouseleave'); 

117
  
118
      } 

119
  
120
    }); 

121
  
122
  }; 

123
  
124
})(jQuery);