零基礎建站培訓教程介紹

當前位置:

jquery圖片自動切換輪播圖

這是一款jquery圖片輪播圖,適合新手學做網站學員使用,只要按照以下的方法操作,就可以將一款好看的jquery圖片輪播圖放到自己做的網站上了。

先看下這款jquery圖片輪播圖的效果圖:jquery-img

下面介紹一下這款jquery圖片自動切換輪播圖的制作方法。

方法/步驟

  1. 下載jquery圖片自動切換輪播圖文件壓縮包。下載地址:?https://pan.baidu.com/s/1boAFv0V 密碼: bgpc
  2. 將下載下來的文件壓縮包解壓,并將里面的CSS、JS、images三個文件夾全部上傳到網站空間里;1
  3. 將以下的JS代碼放到自己網頁的</body>標簽上面;(如果不懂HTML,可以先學習一下html入門教程
    <script src="js/jquery.min.js"></script>
    <script src="js/velocity.js"></script>
    <script src="js/shutter.js"></script>
    <script>
    $(function () {
    $('.shutter').shutter({
    shutterW: 1000, // 容器寬度
    shutterH: 358, // 容器高度
    isAutoPlay: true, // 是否自動播放
    playInterval: 3000, // 自動播放時間
    curDisplay: 3, // 當前顯示頁
    fullPage: false // 是否全屏展示
    });
    });
    </script>
  4. 在自己網站上需要顯示輪播圖的位置,放上下面的HTML代碼,用于顯示輪播圖。
    <div class="shutter">
    <div class="shutter-img">
    <a href="#" data-shutter-title="Iron Man"><img src="images/shutter_1.jpg" alt="#"></a>
    <a href="#" data-shutter-title="Super Man"><img src="images/shutter_2.jpg" alt="#"></a>
    <a href="#" data-shutter-title="The Hulk"><img src="images/shutter_3.jpg" alt="#"></a>
    <a href="#" data-shutter-title="The your"><img src="images/shutter_4.jpg" alt="#"></a>
    </div>
    <ul class="shutter-btn">
    <li class="prev"></li>
    <li class="next"></li>
    </ul>
    <div class="shutter-desc">
    <p>Iron Man</p>
    </div>
    </div>
  5. 再將下面的CSS代碼放在</head>標簽上面,用于引入css文件。
    <link rel="stylesheet" href="css/shutter.css">
  6. 這樣就可以在自己網站上制作jquery圖片輪播圖。

以上這個jquery圖片自動切換輪播圖的尺寸,可以通過修改CSS來達到自己網站的需求。

3條回應:“jquery圖片自動切換輪播圖”

  1. 學習建網站學員 JongSUK說道:

    想請教一下我想獲取網站首頁各欄目下所有鏈接內容里的圖片,將它們顯示在首頁并輪播,然后點擊圖片時又進入相應的網頁。應該怎么做?思路也可以

  2. 學習建網站學員 code說道:

    最多支持多少張圖片輪播,示例10張就不能播放了

發表評論

電子郵件地址不會被公開。 必填項已用*標注

相關教程

學做網站論壇零基礎學建網站課程
新疆25选7基本走势图