CSS
li {
float: left;
width: 160px;
text-align: center;
padding:0;
list-style-type: none;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/YlMarquee.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".stroll1").jMarquee({
visible:4,
step:2,
direction:"left"
});
})
</script>
</head>
<body>
<div class="stroll1" style="width:620px;">
<ul>
<li>
<a href="product_view.asp?id=560"><img src="upload/product/2009111637482185.jpg" /><br />09</a>
</li>
<li>
<a href="product_view.asp?id=675"><img src="upload/product/2009111734891917.jpg" /><br />xxx</a>
</li>
<li>
<a href="product_view.asp?id=676"><img src="upload/product/2009111734948889.jpg" /><br />xxxx</a>
</li>
<li>
<a href="product_view.asp?id=677"><img src="upload/product/2009111735062873.jpg" /><br />xxxx</a>
</li>
<li>
<a href="product_view.asp?id=679"><img src="upload/product/2009111735195357.jpg" /><br />xx</a>
</li>
<li>
<a href="product_view.asp?id=678"><img src="upload/product/2009111735165809.jpg" /><br />xxxx</a>
</li>
<li>
<a href="product_view.asp?id=680"><img src="upload/product/2009111735243905.jpg" /><br />test</a>
</li>
<li>
<a href="product_view.asp?id=681"><img src="upload/product/33333333333333333" /><br />3333333333</a>
</li>
</ul>
</div>
</body>
</html>
JS
/* 彦磊基于jQuery图片平滑滚动插件(2009.04)
* 在IE6/IE7/Mozilla 5.0（Firefox 3.0.5）中测试通过
*
*
* 此插件要求运行在jQuery v1.2 或更高版本上
* 插件可以实现图片平滑向上或向左滚动
* 如果您需要更多的效果或在使用中本插件存在BUG，可以给在彦磊的博客上留言，彦磊将尽自己最大努力完善此插件
* 您留言前请先到：http://gmarwaha.com/jquery/jcarousellite/ 上面下载jcarousellite插件
* 来和彦磊图片平滑滚动的插件相互补充使用以获取更多的图片效果
* 彦磊图片平滑滚动插件只是对jcarousellite插件的补充
*
*
* 技术支持：HTTP://HI.BAIDU.COM/DPXDQX
* 此为自由拷贝版本，您可以在此基础上添加任何功能
* 彦磊建议您将修改过的版本或发布地址发到彦磊博客上以共享，也建议您保留部分彦磊的信息
*
*
* 此插件没有象jcarousellite插件样对相关元素的CSS全自动设置，部分CSS样式需要您为设置
* 原因很简单：您需要考虑部分用户的浏览器不支持JAVASCRIPT或相关功能被禁用
* 您需要让您的页面元素布局在此时也能显示正确，因此必要的CSS设置还需要您自己来做。
*
* 使用前您一定要引入jQurey及本脚本,如
* <script type="text/javascript" src="js/jquery_last.js"></script>
* <script type="text/javascript" src="js/YlMarquee.js">
* 使用方法：
*
* 1、为您要设置滚动的对象设置容器，并命名class，如class="ylMarquee"
* 2、将您要滚动的对象置入<ul></ul>中，并添加li标签，li标签中可以是图片、文字或表格……
* 3、此版本需要您设置每个li列表的宽度或高度一至
* <div class="ylMarquee">
* <ul>
* <li><img src="image/1.jpg" alt="1"></li>
* <li><img src="image/2.jpg" alt="2"></li>
* <li><img src="image/3.jpg" alt="3"></li>
* </ul>
* </div>
* 4、设置ylMarquee的height或width样式——向上滚动必须设置height的大小，向左滚动必须设置width的大小，否则页面将显示不正常。
* 5、在页面中添加jQuery语句，调用此插件，并对相关参数进行设置,如：
* <script type="text/javascript">
* $(document).ready(function(){
* $(".stroll").jMarquee({
* visible:3,
* step:1,
* direction:"left"
* });
*});
* </script>
* 6、插件相关参数：
* visible:页面可见元素（图片）个数，默认为1，必须参数。
* step:滚动步长，整数，默认为1，增大此数可加快滚动速度，设为0，则不进行滚动。
* direction:滚动方向，有"left"（向左滚动）和"up"（向上滚动）两个参数，注意设置时一定要加英文的双引("")号或单引号('')。
*/
(function($) {
$.fn.jMarquee = function(o) {
o = $.extend({
speed:30,
step:1,//滚动步长
direction:"up",//滚动方向
visible:1//可见元素数量
}, o || {});
//获取滚动内容内各元素相关信息
var i=0;
var div=$(this);
var ul=$("ul",div);
var tli=$("li",ul);
var liSize=tli.size();
if(o.direction=="left")
tli.css("float","left");
var liWidth=tli.innerWidth();
var liHeight=tli.height();
var ulHeight=liHeight*liSize;
var ulWidth=liWidth*liSize;
//如果对象元素个数大于指定的显示元素则进行滚动，否则不滚动。
if(liSize>o.visible){
ul.append(tli.slice(0,o.visible).clone()) //复制前o.visible个li，并添加到ul的最后
li=$("li",ul);
liSize=li.size();
//给滚动内容添加相关CSS样式
div.css({"position":"relative",overflow:"hidden"});
ul.css({"position":"relative",margin:"0",padding:"0","list-style":"none"});
li.css({margin:"0",padding:"0","position":"relative"});
switch(o.direction){
case "left":
div.css("width",(liWidth*o.visible)+"px");
ul.css("width",(liWidth*liSize)+"px");
li.css("float","left");
break;
case "up":
div.css({"height":(liHeight*o.visible)+"px"});
ul.css("height",(liHeight*liSize)+"px");
break;
}
var MyMar=setInterval(ylMarquee,o.speed);
ul.hover(
function(){clearInterval(MyMar);},
function(){MyMar=setInterval(ylMarquee,o.speed);}
);
};
function ylMarquee(){
if(o.direction=="left"){
if(div.scrollLeft()>=ulWidth){
div.scrollLeft(0);
}
else
{
var leftNum=div.scrollLeft();
leftNum+=parseInt(o.step);
div.scrollLeft(leftNum)
}
}
if(o.direction=="up"){
if(div.scrollTop()>=ulHeight){
div.scrollTop(0);
}
else{
var topNum=div.scrollTop();
topNum+=parseInt(o.step);
div.scrollTop(topNum);
}
}
};
};
})(jQuery);
|
|
