标签归档：jquery 图片左右滚动

jQuery带缩略图左右滚动效果

发表于 2011/05/10 由 前端开发-武方博  5,029 views

这个效果比较常用,在很多商品展示页面会用到，例如淘宝店铺的图片展示和京东商城的商品展示页，其实这段代码很简单，直接看下效果好了！   演示地址：http://www.wufangbo.com/demo/jquery/12/index.html 下载地址：http://www.wufangbo.com/demo/jquery/12/12.rar HTML代码   <div class="pic_scroll">         <div class="pic_small">          <a href="#0"><img class="current" src="images/01.jpg" /></a>              <a href="#1"><img src="images/02.jpg" /></a>              <a href="#2"><img src="images/03.jpg" /></a>    &n......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , | 留下评论

jquery图片横向左右滚动效果（带按钮控制）

发表于 2011/05/07 由 前端开发-武方博  6,440 views

这个效果实例是我在去年买的一本书里面读到的，想必大家也知道那本书，就不提名字了，直接上下源代码 代码里面的注释很清楚，方便大家学习。 演示地址：http://www.wufangbo.com/demo/jquery/11/index.html 下载地址：http://www.wufangbo.com/demo/jquery/11/11.rar html代码   <div class="v_show"> <div class="v_caption"> <h2 class="cartoon" title="卡通动漫">卡通动漫</h2> <div class="highlight_tip"> <span class="current">1</span><span>2</span><span>3</span><span>4</span> </div> <div class="change_btn"> <span class="prev" >上一页</span> <span class="next">下一页</span> </div> <em><a href......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 2 条评论

Jquery图片无缝左右滚动插件

发表于 2011/05/01 由 前端开发-武方博  3,192 views

  zhw.scroll-1.0.js /* 功能：Jquery无缝滚动插件zhw.scroll-1.0.js 作者：leo 注意：暂只支持div下ul li的滚动 交流：xandchd_kane@163.com */ jQuery.extend({     Scroll: function(settings) {         //初始化参数         var config = $.extend({             stepWidth: 100,         // 滚动步长             waitTime: 4000,         // 间歇时间           &......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 留下评论

jQuery图片左右滚动和jquery图片左右连续滚动

发表于 2011/04/27 由 前端开发-武方博  4,089 views

  公司网站要用到jQuery横向滚动图片特效，当时我为了速度，直接找了一段jQuery代码放上去了。缺点有两个：一、主管不满意，他需要的是连续不断的滚动，就是无缝滚动，而不是滚动一张图片，等一下再滚动一张图片；二、代码有个地方浏览器报错，我不知道为什么，但是删了也不行，必须要。 花了好长一段时间，找代码、改代码，终于搞定了上面提到的两个效果：滚动停一下、无缝滚动。感谢群里点拨我的朋友，感谢Google提供信息，感谢网上不知名的朋友提供代码。 jQuery滚动图片（非连续滚动） 演示地址：http://www.wufangbo.com/demo/jquery/06/index.html 下载地址：http://www.wufangbo.com/demo/jquery/06/06.rar 这段代码思路很简单，把ul里的li都浮动左，变成一横排。然后ul往左边animate移动一个图片的宽度，把第一张图片追加到最后。用setInterval实现不断调用这个方法即可。最后加上鼠标移上去停止调用方法，移开继续调用方法就OK了。 代码我就补......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 4 条评论

Jquery 仿手机左右拖动滑屏效果

发表于 2011/04/21 由 前端开发-武方博  2,363 views

  前不久公司有个项目是在触摸屏上做产品展示，大家都觉得Iphone或者Android上的滑屏效果不错，我今天也顺便做了一个DEMO，滑屏效果的，预览图如下 　　 演示地址：http://www.wufangbo.com/demo/jquery/04/index.html 下载地址：http://www.wufangbo.com/demo/jquery/04/04.rar   查看更多>>

发表在 jquery | 标签为 , , , , , , , , , , , , , , , , , , , , , | 留下评论

jQuery旋转木马

发表于 2011/04/20 由 前端开发-武方博  1,476 views

所有复杂的特效，我都习惯用firebug去查看它的DOM结构，来查看DOM结构的变化情况。 我观察到的DOM结构和实际的DOM结构有点差别，这就意味着有些初始化的脚本在运作。最主要的差别在< ul >标签内的头部< li >标签和底部 li >标签，主要有两种类型，clone和empty。 第二条线索可以看出底部的克隆元素和可见区域的元素是一样的。 我尝试画了以下图形，你会发现初始化只展示了3项，但总共有5项，所以头部包括了两个克隆元素和一个空元素，底部有三个克隆元素。 实现原理 创建克隆元素的目的是，当我们在滚动最后几项的时候，让人感觉在循环滚动。 标记 为了实现这样一个效果，我们需要给容器添加overflow：hidden这样的代码 <div class="infiniteCarousel"> <div class="wrapper"> <ul> <li>...</li> <li>...</li> <li>...</li> ......查看更多>>

发表在 jquery | 标签为 , , , , , , , , , , , , | 一条评论