想要和园友分享一下学习jquery的经验、总结,更希望园友提出点建议。

第一次写,有不好的地方请多多见谅!

文笔有限,很多时候不知道怎么来描述,唉、硬伤啊!!那只好多做了,贴代码。。。

ok,废话少说,先上Demo,里面有5个Demo,从简单的jquery到重构为jquery小插件。

包含两个效果,手风琴效果和点击图片放大。

上菜:Demo

无缝连接原理:

1、定义显示区域,比如你有十张图片每次只显示5张。假如一张图片宽150px,那么可以用一个750px的div来包含一个1500px的ul/div。

css:.myul {width: 1500px;overflow: hidden;position: absolute;}.myul li {width: 150px;height: 150px;float: left;overflow: hidden;position: relative;}.slidediv {float: left;width: 750px;height: 150px;overflow: hidden;position: relative;}HTML:<div class="slidediv"><ul class="myul"><li><a class="img_b"><img  alt="" width="150" height="150" src="data:images/1_s.jpg"/></a></li><li><a class="img_b" href="#"><img alt="" width="150" height="150" src="data:images/2_s.jpg"/></a></li></ul>
</div>

View Code

2、让整个ul移动一个li单位的距离,然后把移出显示区的li放到后面,再把ul的位置复原。不断地重复这种方式。

    <script type="text/javascript">$(function () {var $Ul = $(".myul");var fn = setInterval(autoScroll2, 2000);$Ul.mouseover(function () {clearInterval(fn);}).mouseout(function () {fn = setInterval(autoScroll2, 2000);});function autoScroll2() {$Ul.stop().animate({ left: -150 }, 500, function () {$(this).css({ left: 0 }).find("li:first").appendTo(this);//ul向左移动150,把移出的li放到最后,ul复原。
                });}});</script>

View Code

重构成小插件

整个jquery 无缝切换原理很简单,可以通过重构把它变成小插件,这样就可以在多处使用了。

我重构的不好,很多功能没有加上去,不过我觉得懂得原理了,变成小插件就看自己DIY了,整个过程核心不变功能一点点加上去就会慢慢完善了。

看看我重构好的小插件,在Demo 里的js也有(ImgSlide.js)。具体效果看Demo2,我是偷懒,要在html定义li的高宽,这个完全可以在js插件里设置。

(function ($) {$.fn.ImgSlide = function (options) {var defaults = {showImages: 3,//默认显示图片数量speed: 400,//移动速度leftBtn: ".leftBtn", //默认左按钮rightBtn: ".rightBtn", //默认右按钮autoSlide: true,//默认自动移动为trueRightSlid: false, //默认向右移动为falseautoSpeed: 2000,//自动移动的时间moreSlide: "setOne" //多处图片移动,设置不同的class
        };var options = $.extend(defaults, options);var $this = $(this),li = $this.find('li'),myFn;var li_width = li.outerWidth(true);var liwidth =  li.width();$this.css({width: 5500,left:- li_width,overflow: "hidden",position: "absolute"});li.css({float: 'left',overflow: "hidden",position: "relative"});init();$(options.leftBtn).click(function () {MoveLeft();});//点击按钮向右移动;$(options.rightBtn).click(function () {MoveRight();});function init() {var showWidth = li_width * options.showImages ;$this.wrap("<div class='slidediv'></div>");$('.slidediv').css({height:liwidth,width: showWidth,overflow: "hidden",position: "relative",float: "left"});$this.animate({ left: 0 },0, function () {$(this).css({ left: -li_width }).find("li:last").prependTo(this);});if (options.autoSlide) {if (options.RightSlid) {myFn = setInterval(MoveRight, options.autoSpeed);autoSlides(MoveRight);}else {myFn = setInterval(MoveLeft, options.autoSpeed);autoSlides(MoveLeft);}}}function MoveLeft() {$this.stop().animate({ left: 0 }, options.speed, function () {$(this).css({ left: -li_width }).find("li:last").prependTo(this);});}function MoveRight() {$this.stop().animate({ left: -li_width*2 }, options.speed, function () {$(this).css({ left: -li_width }).find("li:first").appendTo(this);});}function autoSlides(fn) {$this.mouseover(function () {clearInterval(myFn);}).mouseout(function () {myFn = setInterval(fn, options.autoSpeed);});$(options.leftBtn).mouseover(function () {clearInterval(myFn);}).mouseout(function () {myFn = setInterval(fn, options.autoSpeed);});$(options.rightBtn).mouseover(function () {clearInterval(myFn);}).mouseout(function () {myFn = setInterval(fn, options.autoSpeed);});}}
})(jQuery);

View Code

在html引用,很方便吧!!!

    <script type="text/javascript">$(function () {$('.myul').ImgSlide({showImages: 6});});</script>

View Code

手风琴效果和图片放大效果在Demo里也有。可以看一下,欢迎和我讨论。

我是新手,有很多不妥的地方希望园友能提出,非常感谢。一起学习交流。。

手风琴效果

图片放大

版权所有,转载请注明出处,谢谢!

转载于:https://www.cnblogs.com/WinKi/p/3369592.html

jquery 图片无缝切换相关推荐

  1. Android开发自定义View实现数字与图片无缝切换的2048

    本博客地址:http://blog.csdn.net/talentclass_ctt/article/details/51952378 最近在学自定义View,无意中看到鸿洋大神以前写过的2048(附 ...

  2. jquery图片播放切换插件

    点击这里查看效果 可自定义数字样式和左右点击按钮 这个更好: 移入按钮切换版本 更多图片轮播 以下是HTML文件代码: 1 <!DOCTYPE html PUBLIC "-//W3C/ ...

  3. 化妆品护肤DiY的广告界面 简单的jquery 图片无缝滚动

    /* ww  图片宽度 id   table ID */ 代码应用实例 化妆品护肤DiY的广告界面 function moveleft(id,ww) {var stopKey = true;if(ww ...

  4. 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三

    网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片.相信大家都知道jQuery是最优秀的Javascript框架之一.以其语法简单灵活而大受We ...

  5. Jquery 图片浏览插件

    原文来源:http://www.techolics.com 在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片.相信大家都知道jQuery是最 ...

  6. 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二

    <40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一> <40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三> <40个有创意的jQuery图片和内容 ...

  7. JQuery控制图片无缝滚动

    经常有人问怎么在HTML上制作图片的无缝滚动,我自己在一些项目中也会经常用到的,今天花了些时间,上网搜索了一下,下了些源码回来看了一下,发现都是只能在IE下能够滚动的,而且都是光<html> ...

  8. html5内容切换特效,html5+jQuery图片和文字内容同时左右切换特效

    html5+jQuery图片和文字内容同时左右切换特效,点击图片或者点击左右按钮进行切换,图片转动以及文字内容动画效果切换. 查看演示 下载资源: 22 次 下载资源 下载积分: 20 积分 js代码 ...

  9. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

最新文章

  1. 调整JVM堆内存解决OutOfMemoryError
  2. 安全之美(英文影印版)
  3. python跳出双层for循环的解决方法
  4. 单片机上使用TEA加密通信(转)
  5. Android短信拦截2019,关于征集2019年度信息科学领域重大项目立项建议的通告
  6. 【Python】Python中str()和repr()函数的区别
  7. 菜鸟教程-HTML 教程学习笔记
  8. Rails之格式化价格方法
  9. linux变量赋值取值,linuxshell编程对变量的赋值
  10. delphi xe http 收不到反馈消息_好消息!浦东这个小区3幢多层住宅都要加装电梯啦→...
  11. 适用所有服务器的全站301重定向跳转教程
  12. 苹果市值突破2万亿美元;华为推出PC版HMS“擎云生态”;Android11将强制应用使用内置相机| 极客头条...
  13. 将vue项目打包部署到云服务器(傻瓜式宝塔面板)
  14. 如何使用Movavi Video Editor编辑婚礼影片?
  15. 扫雷游戏代码html,分享一个用h5制作的网页版扫雷游戏实例代码
  16. Python代码整洁之道勘误
  17. JavaSE和JavaEE、JavaME的关系
  18. devexpress,dotnetbar控件
  19. 解决缓存和数据库双写数据一致性问题
  20. Python 实现Mac 屏幕截图

热门文章

  1. 米家扫地机器人重置网络_谁家扫地机器人悄声打扫更干净,科沃斯DEEBOT N3对比米家1S...
  2. activiti 文档_Activiti快速入门 kft-activiti-demo
  3. 人脸检测(十八)--TinyFace(S3FD,SSH,HR,RSA,Face R-CNN,PyramidBox)
  4. 【数据库原理实验(openGauss)】交互式SQL语句
  5. 【C++入门】C++ deque类
  6. kafka 心跳参数
  7. kafka查看消费位置
  8. java LineRecordReader类解析
  9. bzoj 3674 可持久化并查集加强版——可持久化并查集
  10. 企业数字化转型以“活力”先行