应客户的要求实现一个滚动图片的效果,使用javascript+css从0开始还是有一定难度的。但是我们有万能的互联网,从网上找了一下,很多这样的列子,于是找了一个稍加修改就达到了客户的要求。
首先看一下效果图:
下面贴一下主要的代码:
<html>
<head>
<title>水平滚动</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="lib.min.js"></script>
</head>
<body>
<br/>
<div id="jCarouselLiteDemo">
<img src="tplj.gif" width="24" height="114"/><img
src="jt.gif" width="17" height="114" class="prev" style="cursor:hand"/>
<div class="carousel default" style="position:absolute; left:41px;">
<div class="jCarouselLite">
<ul>
<li><img alt="haha" src="img1.jpg" style="cursor:hand" οnclick="javascript:openwindow('#')"></li>
<li><img alt="haha" src="img2.jpg" style="cursor:hand" οnclick="javascript:openwindow('#')"></li>
<li><img alt="haha" src="img3.jpg" style="cursor:hand" οnclick="javascript:openwindow('#')"></li>
<li><img alt="haha" src="img4.jpg" style="cursor:hand" οnclick="javascript:openwindow('#')"></li>
<li><img alt="haha" src="img5.jpg" style="cursor:hand" οnclick="javascript:openwindow('#')"></li>
<li><img alt="haha" src="img2.jpg" style="cursor:hand" οnclick="javascript:openwindow('#')"></li>
<li><img alt="haha" src="img3.jpg" style="cursor:hand" οnclick="javascript:openwindow('#')"></li>
<li><img alt="haha" src="img4.jpg" style="cursor:hand" οnclick="javascript:openwindow('#')"></li>
</ul>
</div>
<div style="position:relative; top:-1px; left:-3px;"><img src="jt_right.gif" width="21" height="114" class="next" style="cursor:hand"/></div>
</div>
<script type="text/javascript">
$(".default .jCarouselLite").jCarouselLite({
btnNext: ".default .next", //下一张图片
btnPrev: ".prev",//上一张兔皮啊没
auto: 2000,//指定2000毫秒定期自动滚动
circular: true,//是否循环滚动
mouseWheel: true,//鼠标滑是否可以轮控制上下滚动
scroll: 1,//每次滚动的图片数量
speed: 600,//滚动速度
start: 0,//开始的地方
vertical: false,//是否垂直滚动
visible: 4//可见数量
});
function openwindow(url){
window.open(url);
}
</script>
</div>
</body>
</html>
具体可以查看jquery中jCarouselLite的用法
项目已经上传到csdn上,请多指教。下载地址:http://download.csdn.net/detail/zhengzhb/3804417