js实现图片切换-整理

 

　　以前用jQuery的hide() show() toggle() fadeIn() fadeOut() fadeTo() 这几个函数实现切换图片时的图片消失和显现过程。

　　比如说：

　　$("#play_list a").filter(":visible").fadeOut(1000).parent().children().eq(i).fadeIn(1000);

　　网上资料链接：http://blog.sina.com.cn/s/blog_4ab014680100jzax.html

 

　　今天有人向我问到怎么让图片类似旋转的模式转换，于是翻出了以前的代码继续研究。

　　效果类似如图：

　　首先：我求助了度娘。找出了三个函数  jQuery 滑动函数 - slideDown, slideUp, slideToggle

　　测试后我发现我失望了，图片的消失于现实只能是垂直的，并且也不是旋转的效果。

　　

　　以前也曾在html中使用过一段代码实现图片旋转切换，有一个缺点就是此代码实现的效果会有一段真空区。

　　<marquee direction=up><div align="center"> <img src="图片地址"> </div></marquee>

　　如果觉得看的熟悉的话，其实可以百度搜索： html文字移动代码

　　链接：http://wenku.baidu.com/view/32ea00030740be1e650e9ae9.html

　　以前试过在IE上除了会出现真空区以外未发现其他bug。但是由于上次我连续使用两段次代码，在火狐上显示有位置和移动效果错误。

 

　　由于个人在js上学习时间与经历有限，个人觉得最好最快的出路还是站在前人的肩膀上学习研究。

　　http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html 

　　按这位前辈的话说，程序原理是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果（以前做过用鼠标拖动图片的效果，感觉移动原理相似）。具体请看链接内详细介绍。

　　如果细心的朋友，你会发现这位前辈的动态效果完成一个来回后重新轮到第一个元素是旋转方向和之前相反。这之间就有个很明显的转折，如果有测试人员的话个人感觉可能被提bug。

 

　　http://www.zcool.com.cn/gfx/ZMTAxMTg4.html

　　此链接内下载的代码进行研究后发现，jQuery代码接口十分的方便（和jQuery.js一样）。

　　只需在html中引用jQuery.cycle.js文件并写上一段代码：

<script type="text/javascript">  

$(function(){   

$('#banner').cycle({     fx:'scrollLeft',     pager:'#btn'   });  }) //fx  旋转方向    pager  图片码显示的位置

</script>

　　

　　于是，网罗图片切换浏览插件：

　　1.simplegallery    http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm
　　2.jquery.cycle   http://www.malsup.com/jquery/cycle/
　　3.simpleFadeSlideShow   http://plugins.jquery.com/node/18463/release   http://fadeslideshow.pascal-bajorat.com/index.html
　　4.jQuery.Switchable   http://ilikejquery.com/switchable/
　　5.AD Gallery – a jQuery gallery plugin   http://coffeescripter.com/code/ad-gallery/ 

 

　　基于Jquery的图片切换插件-TLSlider

　　http://apps.hi.baidu.com/share/detail/32097134

　　

　　最后再分享个图片效果：

　　http://www.veryhuo.com/a/view/40799.html

　　

转载于:https://www.cnblogs.com/I-believe/archive/2011/11/29/2267670.html