jquery 图片横向滚动的插件代码
本文导语: 本节内容： jquery实现图片的横向滚动 本节分享的这段代码，有如下功能： 图片横向左右滚动、自动滚动，可以自定义显示图片个数和滚动时间。 1，jquery插件代码 代码示例: (function($) { $.fn.myScroll = function(options) { ...
本节内容：
jquery实现图片的横向滚动
本节分享的这段代码，有如下功能：
图片横向左右滚动、自动滚动，可以自定义显示图片个数和滚动时间。
1，jquery插件代码
(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)
{ // www.
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结构
3，css代码
/*-插件样式*/
.myScroll {
width:100%;
height:210px;
overflow:hidden;
zoom:1;
}
.myScroll p {
width:22px;
height:210px;
background-image:url(/blog_article/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
});
您可能感兴趣的文章:
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。