easyChange 插件

插件很简单，使用也很简单，但是这个插件行为和结构以及表现都是分离的，也就是说如果你不会写结构那你用不了，因为分离所以显示上完全由你自己做主，这样自由度就大了很多，此插件适用于焦点图和tab切换，但是目前还没有添加是否自动切换的功能，默认是自动切换。由于自己js水平有限所以插件会有许多需要改进的地方，所以请大家多多包涵。
下面给个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.xh-css.cn</title> <style type="text/css"> * { padding:0; margin:0; } body { font-size:14px; } .xh-tabwrap { width:416px; height:275px; margin:20px auto; position:relative; } .xh-tab { position:absolute; right:10px; bottom:8px; z-index:10; } .xh-tab span { cursor:pointer; display:inline-block; padding:2px 6px; background:#eee; border-radius:10px; } .xh-tab span.curr { background:#ccc; } .xh-tabcontent { height:255px; line-height:1.6; border:2px solid #ccc; padding:8px 6px; overflow:hidden; } .xh-tabcontent p { height:255px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="http://www.xh-css.cn/jquery/js/easyChange.js"></script> <script type="text/javascript"> $(function(){ $(".xh-tabwrap .xh-tabcontent p").easyChange({ thumbObj:".xh-tab span" }); }); </script> </head> <body> <div class="xh-tabwrap"> <div class="xh-tab"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> <div class="xh-tabcontent"> <p><img src="http://www.xh-css.cn/wp-content/uploads/2011/11/image1_1.jpg" alt="" title="image1_18" width="400" height="255" class="alignnone size-full wp-image-686" /></p> <p><img src="http://www.xh-css.cn/wp-content/uploads/2011/11/image1_2.jpg" alt="" title="image1_18" width="400" height="255" class="alignnone size-full wp-image-686" /></p> <p><img src="http://www.xh-css.cn/wp-content/uploads/2011/11/image1_3.jpg" alt="" title="image1_18" width="400" height="255" class="alignnone size-full wp-image-686" /></p> <p><img src="http://www.xh-css.cn/wp-content/uploads/2011/11/image1_4.jpg" alt="" title="image1_18" width="400" height="255" class="alignnone size-full wp-image-686" /></p> <p><img src="http://www.xh-css.cn/wp-content/uploads/2011/11/image1_5.jpg" alt="" title="image1_18" width="400" height="255" class="alignnone size-full wp-image-686" /></p> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

easyChange alpha2

最近有新添加了些特性，比如可以设置是否自动切换,以及导航切换事件的方式可以是hover也可以设置成click，还有就是把原来默认的切换时间改成了4s

	 thumbObj:null, //导航对象，默认为空
	 speed:4000, //对象自动切换时间，默认为4000ms，即4秒
	 auto:true, //是否自动切换，默认为true
	 changeEvent:true,//鼠标经过thumbObj时是否切换对象，默认为true，为false时，只有 鼠标点击thumbObj才切换对象

文件下载

0 comments 0 people listening

Comment help
Get Livefyre

Sort: Newest | Oldest

easyChange 插件

easyChange alpha2

站内搜索

热门文章

页面

最新评论

好站推荐

工具

常逛

标签

存档

功能