jQuery万能图片切换插件powerSwitch应用（支持同一页面多次调用）

小灰灰 2022-08-11 05:29 119阅读 0赞

<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][http_rawgit.com_zhangxinxu_powerSwitch_master_index.html]

[http_rawgit.com_zhangxinxu_powerSwitch_master_index.html]: http://rawgit.com/zhangxinxu/powerSwitch/master/index.html

发表评论取消回复

表情：

评论列表（有 0 条评论，119人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery圆点图片轮播切换插件

[下载地址][Link 1]效果很普通的网站banner图片切换插件，但又是一款很实用的jQuery轮播图插件，可以点击圆点控制图片索引。 ![1631495188.png]

Myth丶恋晨/ 2022年09月11日 06:17/ 0 赞/ 6 阅读

相关 jQuery万能图片切换插件powerSwitch应用（支持同一页面多次调用）

<script type="text/javascript" src="script/jquery.min.js"></script> <script type

小灰灰/ 2022年08月11日 05:29/ 0 赞/ 120 阅读

相关分享一款页面视差滚动切换jquery.localscroll插件

今天给大家分享一款页面视差滚动切换jquery.localscroll插件。滚动鼠标液动条看下页面的切换效果。该插件适用浏览器：IE8、360、FireFox、Chrome、

妖狐艹你老母/ 2022年08月05日 16:20/ 0 赞/ 161 阅读

相关 js最简单幻灯片切换支持同一页面多次调用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

约定不等于承诺〃/ 2022年08月05日 07:42/ 0 赞/ 114 阅读

相关 jQuery 插件autocomplete 应用

[jQuery 插件autocomplete 应用][jQuery _autocomplete] 　　项目中有时会用到自动补全查询，就像Google搜索框、淘宝商品搜索功

超、凢脫俗/ 2022年07月14日 09:15/ 0 赞/ 224 阅读

相关 Swipebox灯箱插件：支持移动端图片切换

插件描述：Swipebox是一款支持桌面、移动触摸手机和平板电脑的jquery Lightbox插件。该lightbox插件支持手机的触摸手势，支持桌面电脑的键盘导航，并且支持

╰半夏微凉°/ 2022年04月12日 09:57/ 0 赞/ 235 阅读

相关 jQuery动画、图片切换 KinSlideshow jQuery 多样式图片幻灯片插件

$(function(){ $("KinSlideshow").KinSlideshow({ moveS

忘是亡心i/ 2022年04月06日 15:10/ 0 赞/ 300 阅读

相关 KinSlideshow幻灯片插件 Jquery幻灯片图片切换

$(function(){ $("KinSlideshow").KinSlideshow({ moveS

àì夳堔傛蜴生んèń/ 2022年03月20日 04:50/ 0 赞/ 339 阅读

相关支持Lazy loading的图片画廊jQuery插件 - Least.js

日期：2013-6-3 来源：[GBin1.com][] ![支持Lazy loading的图片画廊jQuery插件 - Least.js][Lazy loading_jQ

àì夳堔傛蜴生んèń/ 2022年02月02日 08:53/ 0 赞/ 328 阅读

相关用键盘方向键控制页面切换的 jQuery 插件

[http://www.alessandroferrini.it/lab/jQueryPlugins/ferroSlider/docs/][http_www.alessandr

女爷i/ 2022年01月06日 13:25/ 0 赞/ 182 阅读