jcarousellite的使用方法

代码

#prev1
{
width : 17px ;
height : 58px ;
float : left ;
text-indent : -5000px ;
background : url(../Images/Index/companylogo/index_ZLHZS_left.jpg) no-repeat ;
cursor : pointer ;
overflow : hidden ;
margin : 0px ;
padding : 0px ;
}
#next1
{
width : 18px ;
height : 58px ;
text-indent : -5000px ;
background : url(../Images/Index/companylogo/index_ZLHZS_right.jpg) no-repeat ;
cursor : pointer ;
overflow : hidden ;
margin-left : 1px ;
padding : 0px ;
float : left ;

}
#box1
{
width : 944px ;
float : left ;
margin : 0px ;
height : 53px ;
overflow : hidden ;
}
#box1 ul li
{
width : 117px ;
float : left ;
height : 51px ;
overflow : hidden ;
text-align : center ;
border-right : 1px #ccc dashed ;
}
#box1 ul li a
{
display : block ;
color : #666 ;
}
#box1 ul li a:hover
{
background : #d1d1d1 ;
color : #000 ;
}
#box1 ul li a img
{
width : 112px ;
height : 51px ;
}

 

<div id="prev1">
                上一张</div>
                <div id="box1">
                    <ul>
                        <li><a href="http://www.vancl.com/" target="_blank">
                            <img src="Images/Index/companylogo/index_logo_01.jpg" /></a></li>
                        <li><a href="http://www.360buy.com/" target="_blank">
                            <img src="Images/Index/companylogo/index_logo_02.jpg" /></a></li>
                        <li><a href="http://www.elong.com/" target="_blank">
                            <img src="Images/Index/companylogo/index_logo_03.jpg" /></a></li>
                        <li><a href="http://www.dell.com/" target="_blank">
                            <img src="Images/Index/companylogo/index_logo_04.jpg" /></a></li>
                        <li><a href="http://www.pgbao.com/" target="_blank">
                            <img src="Images/Index/companylogo/index_logo_05.jpg" /></a></li>
                        <li><a href="http://www.jxdyf.com/" target="_blank">
                            <img src="Images/Index/companylogo/index_logo_06.jpg" /></a></li>
                        <li><a href="http://www.yesmytea.com/" target="_blank">
                            <img src="Images/Index/companylogo/index_logo_07.jpg" /></a></li>
                        <li><a href="http://www.xinhuabookstore.com/" target="_blank">
                            <img src="Images/Index/companylogo/index_logo_08.jpg" /></a></li>
                    </ul>
                </div>
                <div id="next1">
                下一张</div>

 

代码

< script type = " text/javascript " >
$(document).ready( function () {
$( " #box1 " ).jCarouselLite({
btnPrev: " #prev1 " ,
btnNext: " #next1 " ,
auto: 4000 , // 图片停留时间
scroll: 1 , // 每次滚动覆盖的图片个数
speed: 800 , // 设置速度，0是不动。其次就是数字越大 ，移动越慢。
vertical: false , // 横向（true），竖向（false）
visible: 8 , // 显示的数量
circular: true , // 是否循环
play: false // 停止自动播放，true则是自动播放
});
});
< / script>

 http://post.zhubajie.com/p/1282276563/8138174.jpg，IT点点滴滴

转载于:https://www.cnblogs.com/axinno1/archive/2010/06/23/1763792.html