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

yuanlanjun

浏览: 1184277 次

最近访客更多访客>>

iptcp

u012363178

libihan

yych007

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1560)

社区版块

存档分类

2012-08 ( 30)
2012-07 ( 442)
2012-06 ( 101)
更多存档...

应客户的要求实现一个滚动图片的效果，使用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

分享到：

Log4j简单使用 | 我的分层

2011-11-17 13:33
浏览 761
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论