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

<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">&laquo;上一张</a>
            <a href="javascript:" class="caro_next" data-rel="caroSwitch1">下一张&raquo;</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&nbsp;/&nbsp;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">&laquo;上一张</a>
            <a href="javascript:" class="caro_next" data-rel="caroSwitch2">下一张&raquo;</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&nbsp;/&nbsp;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">&laquo;上一张</a>
            <a href="javascript:" class="caro_next" data-rel="caroSwitch3">下一张&raquo;</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&nbsp;/&nbsp;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">&laquo;上一张</a>
            <a href="javascript:" class="caro_next" data-rel="caroSwitch4">下一张&raquo;</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&nbsp;/&nbsp;5</div>
             <div class="goon"><a href="#" class="hover numal">喜欢(6667)</a></div>
         </div>
         </div>

转载地址：http://rawgit.com/zhangxinxu/powerSwitch/master/index.html