jquery插件jCarouselLite实现图片无缝滚动-优快云博客

本文介绍如何使用jQuery插件jCarouselLite创建图片轮播功能，包括配置自动滚动间隔及滚动速度，并展示了具体的HTML、CSS和JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>关于jquery插件jCarouselLite的问题</title>

<scriptsrc="jquery-1.2.6.pack.js"type="text/javascript"></script>

<scriptsrc="jcarousellite_1.0.1.js"type="text/javascript"></script>

<scripttype="text/javascript">
$(document).ready(function(){
$(".carousel").jCarouselLite({
auto:800,
speed:1000
});
});

</script>

<styletype="text/css">
body{
color:#000000;
font-family:verdana,sans-serif;
font-size:80%;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:1px;
line-height:160%;
}
ul{
margin:0;
padding:0;
list-style-type:none;
}
.clear{
clear:both;
}
.carousel{
margin:0pt0pt20px40px;
padding:10px0pt0pt;
position:relative;
}
.jCarouselLite{
background-color:#DFDFDF;
border:1pxsolidblack;
float:left;
/*官方有这段不知道有何用处,如果放进去就会显示不了图片了,js动态产生的值为何没有替换掉*/
/*left:-5000px;
position:relative;
visibility:hidden;*/
}
.jCarouselLiteliimg{
background-color:#fff;
width:150px;
height:118px;
margin:10px;
}
/*jCarouselLite动态计算产生的css如下(用firebug查看的值)start*/
/*.jCarouselLite{
overflow:hidden;visibility:visible;position:relative;z-index:2;left:0px;width:510px;
}
.jCarouselLiteul{
margin:0pt;padding:0pt;position:relative;list-style-type:none;z-index:1;width:2890px;left:-510px;
}
.jCarouselLiteli{
overflow:hidden;float:left;width:170px;height:144px;
}
.jCarouselLiteliimg{
overflow:hidden;
}
*//*end*/
/*最终想要的结果是是左边按钮-中间图片-右边按钮,如果把插件的js去掉,把上面注释掉的css应用上去就是想要的结果*/

</style>

</head>

<body>

<divclass="carousel">

<divclass="jCarouselLite">

<ul>

<li><imgsrc="image/1.jpg"alt=""width="150"height="118"/></li>

<li><imgsrc="image/2.jpg"alt=""width="150"height="118"/></li>

<li><imgsrc="image/3.jpg"alt=""width="150"height="118"/></li>

<li><imgsrc="image/4.jpg"alt=""width="150"height="118"/></li>

<li><imgsrc="image/5.jpg"alt=""width="150"height="118"/></li>

<li><imgsrc="image/6.jpg"alt=""width="150"height="118"/></li>

</ul>

</div>

<divclass="clear"></div>

</div>

</body>

</html>