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

jQuery带缩略图左右滚动效果

这个效果比较常用,在很多商品展示页面会用到,例如淘宝店铺的图片展示和京东商城的商品展示页,其实这段代码很简单,直接看下效果好了!   演示地址: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图片横向左右滚动效果(带按钮控制)

这个效果实例是我在去年买的一本书里面读到的,想必大家也知道那本书,就不提名字了,直接上下源代码 代码里面的注释很清楚,方便大家学习。 演示地址: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图片无缝左右滚动插件

  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图片左右连续滚动

  公司网站要用到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 仿手机左右拖动滑屏效果

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

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

jQuery旋转木马

所有复杂的特效,我都习惯用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 | 标签为 , , , , , , , , , , , , | 一条评论