======================================

創新互聯主營烏蘭網站建設的網絡公司,主營網站建設方案,重慶APP開發公司,烏蘭h5成都小程序開發搭建,烏蘭網站營銷推廣歡迎烏蘭等地區企業咨詢

html部分

======================================

<div id="picslide">
   <ul id="picslidelist">
    <li class="picfirst"><a href="#" target="_blank"><img width="800" height="300" alt="" src="#"></a>
       <div class="picslidedetail">
         <h3>標題一</h3>
         <p>描述文本</p>
       </div>
     </li>
    <li class="picfirst"><a href="#" target="_blank"><img width="800" height="300" alt="" src="#"></a>
       <div class="picslidedetail">
         <h3>標題二</h3>
         <p>描述文本</p>
       </div>
     </li>

     <li class="picfirst"><a href="#" target="_blank"><img width="800" height="300" alt="" src="#"></a>
       <div class="picslidedetail">
         <h3>標題三</h3>
         <p>描述文本</p>
       </div>
     </li>

    <li class="picfirst"><a href="#" target="_blank"><img width="800" height="300" alt="" src="#"></a>
       <div class="picslidedetail">
         <h3>標題四</h3>
         <p>描述文本</p>
       </div>
     </li>
   </ul>
   <div id="picslideNav">
     <ul class="clearfix">
       <li class="picslideprev">上一個</li>
             <li class="trigger"><a href="javascript:void(0)"><img width="58" height="58" src="#"></a></li>
               <li class="trigger"><a href="javascript:void(0)"><img width="58" height="58" src="#"></a></li>

<li class="trigger"><a href="javascript:void(0)"><img width="58" height="58" src="#"></a></li>

<li class="trigger"><a href="javascript:void(0)"><img width="58" height="58" src="#"></a></li>
               <li class="picslidenext">下一個</li>
     </ul>
   </div>
   <div id="picslidebg"></div>
 </div>

======================================

js部分

======================================

<script type="text/javascript">
//首頁焦點圖
$(function(){
   (function(){
      var curr = 0;
      $("#picslideNav .trigger").each(function(i){
         $(this).click(function(){
            curr = i;
            $("#picslidelist li").eq(i).fadeIn("slow").siblings("li").hide();
            $(this).siblings(".trigger").removeClass("imgSelected").end().addClass("imgSelected");
            return false;
         });
      });

      var pg = function(flag){
         //flag:true表示前翻， false表示后翻
         if (flag) {
            if (curr == 0) {
               todo = 4;
            } else {
               todo = (curr - 1) % 5;
            }
         } else {
            todo = (curr + 1) % 5;
         }
         $("#picslideNav .trigger").eq(todo).click();
      };

      //前翻
      $(".picslideprev").click(function(){
         pg(true);
         return false;
      });

      //后翻
      $(".picslidenext").click(function(){
         pg(false);
         return false;
      });

      //自動翻
      var timer = setInterval(function(){
         todo = (curr + 1) % 5;
         $("#picslideNav .trigger").eq(todo).click();
      },5000);

      //鼠標懸停在觸發器上時停止自動翻
      $("#picslide").hover(function(){
            clearInterval(timer);
         },
         function(){
            timer = setInterval(function(){
               todo = (curr + 1) % 5;
               $("#picslideNav .trigger").eq(todo).click();
            },5000);
         }
      );
   })();
});
</script>

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章標題：可左右控制帶縮略圖自動滾動焦點圖-創新互聯
分享URL：http://vcdvsql.cn/article20/ppjjo.html

成都網站建設公司_創新互聯，為您提供網站改版、云服務器、小程序開發、外貿網站建設、域名注冊、網站維護

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯