jQuery万能图片切换插件powerSwitch应用（支持同一页面多次调用）
来源：互联网 发布：切糕王子 知乎 编辑：程序博客网 时间：2024/05/19 03:43
<script type="text/javascript" src="script/jquery.min.js"></script><script type="text/javascript" src="script/jquery-powerSwitch.js"></script><script type="text/javascript">$(function(){ $("#caroTriggerOut1 a").powerSwitch({ container: $("#caroBox1") }); $("#caroTriggerOut2 a").powerSwitch({ container: $("#caroBox2") }); $("#caroTriggerOut3 a").powerSwitch({ container: $("#caroBox3") }); $("#caroTriggerOut4 a").powerSwitch({ container: $("#caroBox4") });});</script><style type="text/css">/* examples_body */.examples_body { width: 820px; margin:0 auto; padding:30px 0 20px 0; position: relative; overflow:hidden;}.caro_trigger { position: relative; width: margin:0 auto;}.caro_trigger a.disabled { text-decoration: none; pointer-events: none; cursor: default;}.caro_box{ width: 620px; height: 430px; margin:0 auto; text-align: center; overflow: hidden; position: relative;}.caro_container { width: 2000px; height: 100%; position: absolute; left: 0; top: 0; }.caro_container li { width: 620px; height: 420px; float: left; position:relative; overflow:hidden;}.caro_container img { vertical-align: middle; }.caro_container li span{ height:100%; width:0; overflow:hidden; display:inline-block; vertical-align:middle; } .caro_prev,.caro_next { width:45px; height:138px; background:url(../images/k.gif) no-repeat; position: absolute; top: 140px; text-indent:-100em; overflow:hidden; }.caro_prev { left: 0; background-position:-45px 0;}.caro_next { right: 0; background-position:-90px 0;}.caro_prev:hover{ background-position:0 0;}.caro_next:hover{ background-position:-135px 0;}.exa_txt{ width:620px; text-align:center; margin:0 auto; padding-top:12px;}.examples_box{ width:880px; height:552px; border-bottom:solid 1px #d9d9d9; margin:0 auto; overflow:hidden; }.box_title{ width:820px; padding-bottom:20px; text-align:center; font-size:14px;}.no_last{ position:absolute; left:60px; top:160px; width:500px; height:100px; z-index:999; }.last_bg{ width:500px; height:100px;filter:alpha(opacity=60); /* IE */-moz-opacity:0.6; /* Moz + FF */opacity: 0.6;background:#000;position:relative;}.no_txt{ color:#fff; width:500px; height:100px; text-align:center; line-height:100px; position:absolute; left:0; top:0;}.points_title2 .more{ padding:10px 20px 0 0;}#caroBox1 div.no_last{ position:absolute; left:50px; top:125px; width:200px; height:50px; z-index:999; }#caroBox1 div.last_bg{ width:200px; height:50px;filter:alpha(opacity=60); /* IE */-moz-opacity:0.6; /* Moz + FF */opacity: 0.6;background:#000;position:relative;}#caroBox1 div.no_txt{ color:#fff; width:200px; height:50px; text-align:center; line-height:50px; position:absolute; left:0; top:0;}#caroBox1,#caroBox1 li{ width:300px; height:300px;}#caroTriggerOut1 a.caro_prev,#caroTriggerOut1 a.caro_next{top: 75px;}</style><div class="examples_body"> <div class="box_title">水晶</div> <div id="caroTriggerOut1" class="caro_trigger"> <a href="javascript:" class="caro_prev" data-rel="caroSwitch1">«上一张</a> <a href="javascript:" class="caro_next" data-rel="caroSwitch1">下一张»</a> </div> <div id="caroBox1" class="caro_box"> <ul class="caro_container"> <li class="caroSwitch1"><img src="images/xz.jpg"/><span></span></li> <li class="caroSwitch1"><img src="images/xz.jpg"/><span></span></li> <li class="caroSwitch1"><img src="images/xz.jpg"/><span></span> <div class="no_last"> <div class="last_bg"> </div> <div class="no_txt">已经是最后一张了。</div> </div> </li> </ul> </div> <div class="exa_txt">1 / 5</div> </div><div class="examples_body"> <div class="box_title quotation">三亚情缘·玫瑰海岸</div> <div id="caroTriggerOut2" class="caro_trigger"> <a href="javascript:" class="caro_prev" data-rel="caroSwitch2">«上一张</a> <a href="javascript:" class="caro_next" data-rel="caroSwitch2">下一张»</a> </div> <div id="caroBox2" class="caro_box"> <ul class="caro_container"> <li class="caroSwitch2"><img src="images/xz.jpg"/><span></span></li> <li class="caroSwitch2"><img src="images/two.jpg"/><span></span></li> <li class="caroSwitch2"><img src="images/three.jpg"/><span></span></li> </ul> </div> <div class="exa_txt" style="width:200px; padding-left:80px;"> <div class="goon">1 / 5</div> <div class="goon"><a href="#" class="hover">喜欢(67)</a></div> </div> </div><div class="examples_body"> <div class="box_title quotation">深圳风情·大梅沙</div> <div id="caroTriggerOut3" class="caro_trigger"> <a href="javascript:" class="caro_prev" data-rel="caroSwitch3">«上一张</a> <a href="javascript:" class="caro_next" data-rel="caroSwitch3">下一张»</a> </div> <div id="caroBox3" class="caro_box"> <ul class="caro_container"> <li class="caroSwitch3"><img src="images/one.jpg"/><span></span></li> <li class="caroSwitch3"><img src="images/two.jpg"/><span></span></li> <li class="caroSwitch3"><img src="images/three.jpg"/><span></span></li> </ul> </div> <div class="exa_txt" style="width:200px; padding-left:80px;"> <div class="goon">1 / 5</div> <div class="goon"><a href="#" class="">喜欢(67)</a></div> </div> </div><div class="examples_body"> <div class="box_title quotation">深圳风情·梦幻乐园</div> <div id="caroTriggerOut4" class="caro_trigger"> <a href="javascript:" class="caro_prev" data-rel="caroSwitch4">«上一张</a> <a href="javascript:" class="caro_next" data-rel="caroSwitch4">下一张»</a> </div> <div id="caroBox4" class="caro_box"> <ul class="caro_container"> <li class="caroSwitch4"><img src="images/one.jpg"/><span></span></li> <li class="caroSwitch4"><img src="images/two.jpg"/><span></span></li> <li class="caroSwitch4"><img src="images/one.jpg"/><span></span> <div class="no_last"> <div class="last_bg"> </div> <div class="no_txt">已经是最后一张了。</div> </div> </li> </ul> </div> <div class="exa_txt" style="width:200px; padding-left:80px;"> <div class="goon">1 / 5</div> <div class="goon"><a href="#" class="hover numal">喜欢(6667)</a></div> </div> </div>转载地址：http://rawgit.com/zhangxinxu/powerSwitch/master/index.html
0 0
- jQuery万能图片切换插件powerSwitch应用（支持同一页面多次调用）
- jQuery powerSwitch万能slide(切换)插件
- jQuery powerSwitch万能slide(切换)插件
- js最简单幻灯片切换支持同一页面多次调用
- 同一页面多次调用百度编辑器
- 支持同一页面多次使用 jq.contentShown插件全新升级，带来最全的演示，最完整的介绍。
- 如何让jquery datepicker 在同一页面使用多次
- 在同一页面显示/调用多个js幻灯图片切换
- 同一个页面多次调用KindEditor上传插件
- jquery 图片随机切换插件
- jquery简单的table切换，在页面可以多次使用。
- JS动态切换图片(一个页面中可多次使用)
- jQuery slides jquery图片切换插件
- jQuery图片切换插件jquery.cycle.js
- Jquery全屏图片自动切换插件,支持窗口变化图片大小等比例变化
- 使用jquery插件lazyload.js延迟加载图片，页面上存在切换的情况，切换后图片不显示问题
- JS图片切换，支持自定义，基于JQuery
- 一个简单的图片切换 jQuery 插件
- 辞职你会做什么选择
- LDA的使用
- WPF DataGrid获取选择行的数据
- 通过IP或域名访问工程，不带工程名和端口
- 黑马视频学习笔记-内存管理-循环引用
- jQuery万能图片切换插件powerSwitch应用（支持同一页面多次调用）
- 服务器公共组件实现2
- 开源第六周 ethernet shield数据传输+yeelink
- 批处理for语句
- 对话框
- ibatis学习笔记-模糊查询实体对象
- linux函数之atoi
- IP地址相关知识
- HTML中获取本地时间
