「javascript」圖片輪播

在有些時候 我們需要在網頁上放置圖片輪播

今天就介紹一個簡單不複雜的小工具 CYCLE2

官方有很多說明 像是輪播 淡出 按鈕 反轉...等

 

可以先看看簡單的效果 DEMO

首先先加入 js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//malsup.github.com/jquery.cycle2.js"></script>



再來 增加 style

<style type="text/css">
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ .cycle-slideshow { width: 200px; }
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ .cycle-slideshow img { width: 100%; height: auto }
</style>

接下來 在 body 加入圖片的資料

<h4>預設模式</h4>
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <div class="cycle-slideshow ">
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <img src="//malsup.github.io/images/p1.jpg">
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <img src="//malsup.github.io/images/p2.jpg">
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <img src="//malsup.github.io/images/p3.jpg">
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <img src="//malsup.github.io/images/p4.jpg">
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ </div>

 

當然也有很多其他的模式 像是滑動

<h4>滑動模式</h4>
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <div class="cycle-slideshow "
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ data-cycle-fx="scrollHorz"
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ data-cycle-pause-on-hover="true"
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ data-cycle-speed="200" >
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <img src="//malsup.github.io/images/p1.jpg">
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <img src="//malsup.github.io/images/p2.jpg">
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <img src="//malsup.github.io/images/p3.jpg">
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <img src="//malsup.github.io/images/p4.jpg">
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ </div>

 

當然你也可以增加 自定左右按鈕

<h4>按鈕模式</h4>
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <div class="cycle-slideshow"
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ data-cycle-fx="scrollHorz"
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ data-cycle-timeout="0"
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ data-cycle-prev="#btn_prev"
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ data-cycle-next="#btn_next"
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ >
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <img src="//malsup.github.io/images/p1.jpg">
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <img src="//malsup.github.io/images/p2.jpg">
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <img src="//malsup.github.io/images/p3.jpg">
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <img src="//malsup.github.io/images/p4.jpg">
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ </div>

‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <div class="center">
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <a href=# id="btn_prev">Prev</a>
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ <a href=# id="btn_next">Next</a>
‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌  ‌‌‌‌‌‌‌‌ </div>

 

 

 

已有 2 條評論
  1. 君

    不好意思 請問一下 照片是隨便插入我網頁中的圖片嗎?
    那JS 和STYLE的程式碼是貼在哪?BODY裡嗎?
    我都貼了可是網頁打開就四張圖一起出現不動 並沒有特效什麼的?
    請問是我哪裡用錯了嗎?

    1. jeffchen jeffchen

      可以貼再 裡面,
      我把測試的code放在jsfiddle 給你參考: https://jsfiddle.net/cake/xc579v98/

添加新評論