您的位置：首页 > Web前端 > JQuery

使用jquery实现的漂亮的滚动图片

2011-11-17 13:33 513 查看
应客户的要求实现一个滚动图片的效果，使用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" onclick="javascript:openwindow('#')"></li>
     <li><img alt="haha" src="img2.jpg" style="cursor:hand" onclick="javascript:openwindow('#')"></li>
     <li><img alt="haha" src="img3.jpg" style="cursor:hand" onclick="javascript:openwindow('#')"></li>
     <li><img alt="haha" src="img4.jpg" style="cursor:hand" onclick="javascript:openwindow('#')"></li>
     <li><img alt="haha" src="img5.jpg" style="cursor:hand" onclick="javascript:openwindow('#')"></li>
     <li><img alt="haha" src="img2.jpg" style="cursor:hand" onclick="javascript:openwindow('#')"></li>
     <li><img alt="haha" src="img3.jpg" style="cursor:hand" onclick="javascript:openwindow('#')"></li>
     <li><img alt="haha" src="img4.jpg" style="cursor:hand" onclick="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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航