自適應式輪播圖

要引用jquery,TouchSlide.1.1.js

html:

<div id="slideBox" class="slideBox">
            <div class="lb">
                <ul >
                    <li>
                        <a class="pic" href="#">
                            <img src="../../images/act-all/jiayu-new/lb01.jpg">
                        </a>
                    </li>
                    <li>
                        <a class="pic" href="#">
                            <img src="../../images/act-all/jiayu-new/lb02.jpg">
                        </a>
                    </li>
                </ul>
            </div>
            <div class="myhd">
                <div class="positon-re">
                    <ul style="height: 50px;" class="lbul"></ul>
                    <span class="alllb">/9</span>
                </div>
            </div>
        </div>

css:

  /* 焦點圖 */  
    .slideBox{ position:relative; overflow:hidden; margin:0 auto;  max-width:560px;/* 設置焦點圖最大寬度 */}  
    .slideBox .myhd{ position:absolute; height:40px;width:40px; line-height:40px; top:10px; right:8px; z-index:1;background-color: rgba(0, 0, 0, 0.5);border-radius: 6px;}  
    .slideBox .myhd li{display: none; width:20px; height:40px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; color:#fff; overflow:hidden; }  
    /*點*/
    .lbul{height: 28px;width:16px;text-align:center;display:inline-block;overflow: hidden;z-index: 10000;}
    .slideBox .myhd li.on{  display: inline-block;  }  
    .slideBox .lb{ position:relative; z-index:0; }  
    .slideBox .lb li{ position:relative; text-align:center;color:#fff;  }  
    .slideBox .lb li img{ vertical-align:top; width:100%;min-height:100px;max-height:320px;/* 圖片寬度100%，達到自適應效果 */}  
    .slideBox .lb li a{ -webkit-tap-highlight-color:rgba(0,0,0,0); text-decoration: none; }  /* 去掉鏈接觸摸高亮 */  
    .slideBox .lb li .tit{ display:block; width:100%;  position:absolute; bottom:0; text-indent:10px; height:28px; line-height:28px;color:#fff;  text-align:left;}  
    .positon-re{position:relative;}
    .alllb{color:#fff;position:absolute;}

javascript:
TouchSlide({
slideCell: “#slideBox”,
titCell: “.myhd ul”, //開啓自動分頁 autoPage:true ，此時設置 titCell 爲導航元素包裹層
mainCell: “.lb ul”,
effect: “leftLoop”,
autoPage: true, //自動分頁
autoPlay: true, //自動播放
});