<!DOCTYPE HTML>
<html>
<head>
<title>JQuery的jCarousellite插件打造超炫左右滚动效果</title>
<script src=”http://www.viphper.com/js/jquery-1.8.3.js” type=”text/javascript”></script>
<script src=”http://www.viphper.com/js/jcarousellite.js” type=”text/javascript”></script>
<style type=”text/css”>
.slide{
width:996px;
height:117px;
padding:5px;
position:relative;
}
.slide ul li{
float:left;
display:block;
width:130px; height:92px;
text-align:center;
line-height:92px;
padding: 5px;
position:relative; /*设置图片样式加透明字*/}
.slide ul li span{
width:120px;
height: 25px;
line-height: 25px;
margin-left: 10px;
background:#000;
display:block;
position:absolute; /*它的父为 slide ul li（注：只有父设置为相对定位，子设置绝对定位时不会飘出）*/
bottom:0; left:0; top:70px;
color:#fff;
filter:alpha(opacity=50);
-moz-opacity:0.6;
opacity:0.6;
text-align:center;
}/**************左右箭头***************/
.yl,.yr{
position:absolute; /*它的父为slide*/
width:33px;
height:33px;
background:url(images/pre_btn.png) no-repeat;
top:32px;
left:20px;
z-index: 9999;
}
.yr{
left:942px;
background:url(images/back_btn.png) no-repeat
}
</style>
<script type=text/javascript>
$(document).ready(function(){
$(‘#slide_01’).jCarouselLite({
btnPrev: ‘#prev’,
btnNext: ‘#next’,
scroll:1, //每次滚动一个
visible:7, //显示7个
auto:800, //自动
speed:1000 //加速
});
});
</script>
</head>
<body>
<div >
<div id=”slide_01″>
<ul>
<li><a href=”http://www.viphper.com/” title=”PHP学习网”><img src=”images/01.jpg” ></a><span>PHP学习网</span></li>
<li><a href=”http://www.viphper.com/” title=”PHP学习网”><img src=”images/02.jpg” ></a><span>PHP学习网</span></li>
<li><a href=”http://www.viphper.com/” title=”PHP学习网”><img src=”images/03.jpg” ></a><span>PHP学习网</span></li>
<li><a href=”http://www.viphper.com/” title=”PHP学习网”><img src=”images/04.jpg” ></a><span>PHP学习网</span></li>
<li><a href=”http://www.viphper.com/” title=”PHP学习网”><img src=”images/05.jpg” ></a><span>PHP学习网</span></li>
<li><a href=”http://www.viphper.com/” title=”PHP学习网”><img src=”images/06.jpg” ></a><span>PHP学习网</span></li>
<li><a href=”http://www.viphper.com/” title=”PHP学习网”><img src=”images/07.jpg” ></a><span>PHP学习网</span></li>
</ul>
</div>
<a href=”javascript:void(0);” id=”prev”></a>
<a href=”javascript:void(0);” id=”next”></a>
</div>
</body>
</html>
查看更多关于JQuery的jCarousellite插件打造超炫左右滚动效果的详细内容...