jquery 图片横向滚动插件
83443560 2013-11-03
使用jquery做的，图片横向左右滚动，和自动滚动的插件，可以自定义显示图片个数和滚动时间
1、插件源代码
(function($)
{
$.fn.myScroll = function(options)
{
//默认配置
var defaults = {
auto: [false, 3000],
//是否自动滚动,第二个参数是自动滚动是切换的间隔时间
visible: 4,
//可显示的数量
speed: 1000,
//动画时间，可选slow，fast，数值类
scroll: 1 //每次切换的个数,此数小于等于visible值
};
var opts = $.extend(
{}, defaults, options);
opts.scroll = opts.scroll > opts.visible ? opts.visible : opts.scroll;
this.each(function(i)
{
var prevBtn = $(this).find("p.myPrevBtn"),
nextBtn = $(this).find("p.myNextBtn"),
block = $(this).find("div.myBlock"),
innerBlock = block.find("ul"),
list = block.find('ul>li'),
listNum = list.size(),
listWidth = list.width(),
blockWidth = listWidth * opts.visible,
ntervalId;
//设置宽度样式
$(this).width(blockWidth + prevBtn.width() + nextBtn.width());
block.width(blockWidth).find("ul").width(listWidth * listNum);
//获取已滚动个数
function getSnum()
{
return (parseInt(innerBlock.css("margin-left")) * -1) / listWidth;
}
//获取滚动的距离
function getMove(c)
{
return c >= opts.scroll ? opts.scroll * listWidth : c * listWidth;
}
//单击向前按钮
prevBtn.click(function()
{
var snum = getSnum(),
c = listNum - snum - opts.visible,
m = getMove(c);
if (listNum - snum > opts.visible)
{
innerBlock.animate(
{
"margin-left": "-=" + m
}, opts.speed);
}
});
//单击向后按钮
nextBtn.click(function()
{
var snum = getSnum(),
m = getMove(snum);
if (snum > 0)
{
innerBlock.animate(
{
"margin-left": "+=" + m
}, opts.speed);
}
});
//如果自动滚动
if (opts.auto[0])
{
$(this).width(blockWidth);
prevBtn.hide();
nextBtn.hide();
function auto()
{
var snum = getSnum(),
m = getMove(listNum - snum - opts.visible);
if (listNum - snum > opts.visible)
{
innerBlock.animate(
{
"margin-left": "-=" + m
}, opts.speed);
}
else
{
innerBlock.css("margin-left", 0).find('li').slice(0, listNum - opts.visible).appendTo(innerBlock);
}
}
//当鼠标经过滚动区域停止滚动
block.hover(function()
{
clearInterval(intervalId);
}, function()
{
intervalId = setInterval(auto, opts.auto[1] + Math.abs(opts.speed - opts.auto[1]) + 100);
}).trigger('mouseleave');
}
});
};
})(jQuery);
2、html结构
/*---------------------------------------------------
html结构代码，li里面的结构可以根据实际情况修改
----------------------------------------------------*/
<div class="myScroll" id="product0">
<p class="myPrevBtn"></p>
<p class="myNextBtn"></p>
<div class="myBlock">
<ul>
<li>
<dl>
<dt><a href=""><img src="img.jpg" alt="" /></a></dt>
<dd><a href="">图片滚动插件</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href=""><img src="img.jpg" alt="" /></a></dt>
<dd><a href="">图片滚动插件</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href=""><img src="img.jpg" alt="" /></a></dt>
<dd><a href="">图片滚动插件</a></dd>
</dl>
</li>
</ul>
</div>
</div>
3、css代码
*{ margin:0; padding:0}
/*-插件样式*/
.myScroll {
width:100%;
height:210px;
overflow:hidden;
zoom:1;
}
.myScroll p {
width:22px;
height:210px;
background-image:url(icon.gif);
background-repeat:no-repeat;
cursor:pointer
}
.myPrevBtn {
background-position:left center;
float:left;
display:inline
}
.myNextBtn {
background-position:right center;
float:right;
display:inline
}
.myBlock {
overflow:hidden;
float:left;
display:inline
}
.myBlock ul {
width:100%;
overflow:hidden;
zoom:1;
list-style:none
}
.myBlock ul li {
width:200px;
float:left;
padding:10px 0;
display:inline
}
.myBlock ul li:hover {
background-color:#FFC
}
.myBlock dl {
width:160px;
margin:0 auto;
list-style:none;
}
.myBlock dl dt {
width:160px;
height:160px;
overflow:hidden;
background-color:#FFF
}
.myBlock dl dt img {
width:160px;
}
.myBlock dl dd {
line-height:18px;
list-style:none;
text-align:center
}
.myBlock dl dd a {
display:inline-block;
padding:3px 0;
width:100%;
}
.myClone {
overflow:hidden;
zoom:1
}
.myClone ul {
float:left;
display:inline
}
4、插件调用方法
//手动滚动
$("#product0").myScroll({
visible:3,
scroll:2,
speed:1000
});
//自动滚动
$("#product").myScroll({
visible:4,
scroll:3,
auto:[true,2000],
speed:1000
});
5、效果图
