2019 十月 14 , 星期一
Home / web前端 / Jquery 图片滚动 myScoll

Jquery 图片滚动 myScoll

插件参数:

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

使用方法:

首先保证html结构如下:

</pre>
<div id="product0">
<div>
<ul>
	<li><dl><dt><a><img alt="" src="img.jpg" /></a></dt><dd><a>图片滚动插件</a></dd></dl></li>
	<li><dl><dt><a><img alt="" src="img.jpg" /></a></dt><dd><a>图片滚动插件</a></dd></dl></li>
	<li><dl><dt><a><img alt="" src="img.jpg" /></a></dt><dd><a>图片滚动插件</a></dd></dl></li>
</ul>
</div>
</div>
<pre>

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

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
}

调用插件:


//手动滚动
$("#product0").myScroll({
visible:3,
scroll:2,
speed:1000
});

//自动滚动
$("#product").myScroll({
visible:4,
scroll:3,
auto:[true,2000],
speed:1000
});

插件源代码:

(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);

转自http://www.muzilei.com/archives/185

Check Also

Jquery form 插件

表单插件API提供了几个方法, ...

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>