Jquery 輪播圖簡易框架

本文轉載自查看原文 2016-10-22 07:24 1563 Demo/ revise/ JavaScript

=====================基本結構=====================

<div class="carousel" style="width: 800px;height: 378px;">
    <ul class="carousel-imgs">
        <li>
            <a href="#"><img src="picture.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#"><img src="picture.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#"><img src="picture.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#"><img src="picture.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#"><img src="picture.jpg" alt="" /></a>
        </li>
    </ul>
    <div class="carousel-btns">
        <button type="button" class="carousel-btn-left">&lt;</button>
        <button type="button" class="carousel-btn-right">&gt;</button>
    </div>
</div>

這是輪播圖的HTML基本結構，只需要做細微調整即可使用。1、替換carousel-imgs中的圖像地址 2、為圖像添加超鏈接 3、指定 DIV.carousel 的大小（默認寬800 高378）

有了輪播圖的基本結構，還需要引入相應的樣式和效果，這里提供兩種基礎的輪播圖效果，滾動輪播和漸變輪播。

=====================效果引入=====================

滾動輪播圖：

    .carousel {
        width: 800px;
        height: 378px;
        padding: 0px;
        margin: 0px auto;
        position: relative;
        overflow: hidden;
    }
    
    .carousel-imgs {
        width: 500%;
        height: 100%;
        padding: 0px;
        margin: 0px;
        list-style: none;
        position: absolute;
    }
    
    .carousel-imgs li {
        width: 20%;
        height: 100%;
        float: left;
    }
    
    .carousel-imgs a {
        text-decoration: none;
    }
    
    .carousel-imgs img {
        width: 100%;
        height: 100%;
    }
    
    .carousel-btns {
        width: 100%;
        position: absolute;
        top: 45%;
    }
    
    .carousel-btns button {
        border: 0px;
        outline: none;
        padding: 5px;
        background: rgba(0, 0, 0, 0.4);
        text-align: center;
        color: white;
        font-size: 34px;
        font-family: "microsoft yahei";
    }
    
    .carousel-btns button:hover {
        background: rgba(0, 0, 0, 0.5);
    }
    
    .carousel-btn-left {
        float: left;
    }
    
    .carousel-btn-right {
        float: right;
    }

滾動輪播圖樣式

    function carousel(left, top) {
        /* 獲取元素對象 */
        var $carousel = $(".carousel");
        var $imgs = $(".carousel-imgs li");
        var $btnL = $(".carousel-btn-left");
        var $btnR = $(".carousel-btn-right");
        /* 創建導航按鈕 */
        var $item_group = $("<ul></ul>");
        $item_group.attr("class", "carousel-items");
        $imgs.each(function() {
            $item_group.append("<li></li>");
        });
        $carousel.append($item_group);
        /* 樣式初始化 */
        $item_group.css({
            "padding": "0px",
            "margin": "0px",
            "list-style": "none",
            "width": "100px",
            "position": "absolute",
            "left": left,
            "top": top
        });
        $item_group.children().css({
            "width": "10px",
            "height": "10px",
            "padding": "0px",
            "margin": "5px",
            "background": "white",
            "opacity": "0.6",
            "border-radius": "5px",
            "box-shadow": "0 0 5px black",
            "cursor": "pointer",
            "float": "left"
        });
        var index = 0; // 初始展示位置
        var $items = $(".carousel-items li");
        $items.eq(index).css("background", "gray");
        /* 按鈕點擊動作 */
        $btnL.click(function() {
            imgAnimator(false);
        });

        $btnR.click(function() {
            imgAnimator(true);
        });

        $items.click(function() {
            imgAnimator(true, $items.index($(this)));
        });
        /* 圖像動畫 */
        function imgAnimator(toNext, select) {
            if(select != null) {
                index = select;
            } else if(toNext == true) {
                index = ($imgs.length + index + 1) % $imgs.length;
            } else if(toNext == false) {
                index = ($imgs.length + index - 1) % $imgs.length;
            }
            $items.css("background", "white");
            $items.eq(index).css("background", "grey");
            var position = index * -($imgs.outerWidth());
            $imgs.parent().animate({
                "left": position + "px"
            }, "fast");
        }
    }

滾動輪播圖效果

漸變輪播圖：

    .carousel {
        width: 800px;
        height: 378px;
        padding: 0px;
        margin: 0 auto;
        position: relative;
    }
    
    .carousel-imgs {
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
        list-style: none;
        background: white;
    }
    
    .carousel-imgs li {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
        opacity: 0;
    }
    
    .carousel-imgs a {
        text-decoration: none;
    }
    
    .carousel-imgs img {
        width: 100%;
        height: 100%;
    }
    
    .carousel-btns {
        width: 100%;
        z-index: 50;
        position: absolute;
        top: 45%;
    }
    
    .carousel-btns button {
        border: 0px;
        outline: none;
        padding: 5px;
        background: rgba(0, 0, 0, 0.4);
        text-align: center;
        color: white;
        font-size: 34px;
        font-family: "microsoft yahei";
    }
    
    .carousel-btns button:hover {
        background: rgba(0, 0, 0, 0.5);
    }
    
    .carousel-btn-left {
        float: left;
    }
    
    .carousel-btn-right {
        float: right;
    }

漸變輪播樣式

    function carousel(left, top) {
        /* 獲取元素對象 */
        var $carousel = $(".carousel");
        var $imgs = $(".carousel-imgs li");
        var $btnL = $(".carousel-btn-left");
        var $btnR = $(".carousel-btn-right");
        /* 創建導航按鈕 */
        var $item_group = $("<ul></ul>");
        $item_group.attr("class", "carousel-items");
        $imgs.each(function() {
            $item_group.append("<li></li>");
        });
        $carousel.append($item_group);
        /* 樣式初始化 */
        $item_group.css({
            "padding": "0px",
            "margin": "0px",
            "list-style": "none",
            "width": "100px",
            "z-index": "50",
            "position": "absolute",
            "left": left,
            "top": top
        });
        $item_group.children().css({
            "width": "10px",
            "height": "10px",
            "padding": "0px",
            "margin": "5px",
            "background": "white",
            "opacity": "0.6",
            "border-radius": "5px",
            "box-shadow": "0 0 5px black",
            "cursor": "pointer",
            "float": "left"
        });
        /* 初始展示位置 */
        var index = 0;
        var $items = $(".carousel-items li");
        $items.eq(index).css("background", "gray");
        $imgs.eq(index).css("opacity", "1");
        $imgs.eq(index).css("z-index", "20");
        /* 按鈕點擊動作 */
        $btnL.click(function() {
            imgAnimator(false);
        });

        $btnR.click(function() {
            imgAnimator(true);
        });

        $items.click(function() {
            imgAnimator(true, $items.index($(this)));
        });
        /* 圖像動畫 */
        function imgAnimator(toNext, select) {
            if(select != null) {
                index = select;
            } else if(toNext == true) {
                index = ($imgs.length + index + 1) % $imgs.length;
            } else if(toNext == false) {
                index = ($imgs.length + index - 1) % $imgs.length;
            }

            $items.css("background", "white");
            $items.eq(index).css("background", "grey");

            $imgs.eq(index).css("z-index", 20);
            $imgs.eq(index).animate({
                "opacity": "1"
            }, "slow", function() {
                $imgs.css("z-index", "0");
                $imgs.css("opacity", "0");
                $imgs.eq(index).css("z-index", 10);
                $imgs.eq(index).css("opacity", "1");
            });
        }
    }

漸變輪播效果

由於輪播圖的效果是依靠JQuery實現的，所以一定要在引入效果之前引入JQuery。

啟用效果需要手動初始化，在基本結構之后添加 <script>carousel("10%", "10%");</script> 注冊動畫效果。

carousel 接受兩個參數用於對切換控件進行定位，第一個參數為相對輪播圖左側距離，第二個參數為相對輪播圖頂部距離。

=====================輪播示例=====================

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>滾動輪播圖</title>
    <style type="text/css">
      .carousel {
        width: 800px;
        height: 378px;
        padding: 0px;
        margin: 0px auto;
        position: relative;
        overflow: hidden;
      }
      
      .carousel-imgs {
        width: 500%;
        height: 100%;
        padding: 0px;
        margin: 0px;
        list-style: none;
        position: absolute;
      }
      
      .carousel-imgs li {
        width: 20%;
        height: 100%;
        float: left;
      }
      
      .carousel-imgs a {
        text-decoration: none;
      }
      
      .carousel-imgs img {
        width: 100%;
        height: 100%;
      }
      
      .carousel-btns {
        width: 100%;
        position: absolute;
        top: 45%;
      }
      
      .carousel-btns button {
        border: 0px;
        outline: none;
        padding: 5px;
        background: rgba(0, 0, 0, 0.4);
        text-align: center;
        color: white;
        font-size: 34px;
        font-family: "microsoft yahei";
      }
      
      .carousel-btns button:hover {
        background: rgba(0, 0, 0, 0.5);
      }
      
      .carousel-btn-left {
        float: left;
      }
      
      .carousel-btn-right {
        float: right;
      }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
      function carousel(left, top) {
        /* 獲取元素對象 */
        var $carousel = $(".carousel");
        var $imgs = $(".carousel-imgs li");
        var $btnL = $(".carousel-btn-left");
        var $btnR = $(".carousel-btn-right");
        /* 創建導航按鈕 */
        var $item_group = $("<ul></ul>");
        $item_group.attr("class", "carousel-items");
        $imgs.each(function() {
          $item_group.append("<li></li>");
        });
        $carousel.append($item_group);
        /* 樣式初始化 */
        $item_group.css({
          "padding": "0px",
          "margin": "0px",
          "list-style": "none",
          "width": "100px",
          "position": "absolute",
          "left": left,
          "top": top
        });
        $item_group.children().css({
          "width": "10px",
          "height": "10px",
          "padding": "0px",
          "margin": "5px",
          "background": "white",
          "opacity": "0.6",
          "border-radius": "5px",
          "box-shadow": "0 0 5px black",
          "cursor": "pointer",
          "float": "left"
        });
        var index = 0; // 初始展示位置
        var $items = $(".carousel-items li");
        $items.eq(index).css("background", "gray");
        /* 按鈕點擊動作 */
        $btnL.click(function() {
          imgAnimator(false);
        });

        $btnR.click(function() {
          imgAnimator(true);
        });

        $items.click(function() {
          imgAnimator(true, $items.index($(this)));
        });
        /* 圖像動畫 */
        function imgAnimator(toNext, select) {
          if(select != null) {
            index = select;
          } else if(toNext == true) {
            index = ($imgs.length + index + 1) % $imgs.length;
          } else if(toNext == false) {
            index = ($imgs.length + index - 1) % $imgs.length;
          }
          $items.css("background", "white");
          $items.eq(index).css("background", "grey");
          var position = index * -($imgs.outerWidth());
          $imgs.parent().animate({
            "left": position + "px"
          }, "fast");
        }
      }
    </script>

  </head>

  <body style="background-color: #424242; padding-top: 100px;">
    <div class="carousel" style="width: 800px;height: 378px;">
      <ul class="carousel-imgs">
        <li>
          <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/mi5-shenruliaojie.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone-mimax/shenruliaojie.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/note3-shenruliaojie.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3s-shenruliaojie.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3x-shenruliaojie.jpg" alt="" /></a>
        </li>
      </ul>
      <div class="carousel-btns">
        <button type="button" class="carousel-btn-left">&lt;</button>
        <button type="button" class="carousel-btn-right">&gt;</button>
      </div>
    </div>
    <script>
      /* 啟用輪播圖效果 */
      carousel("43%", "71%");
    </script>
  </body>

</html>

滾動輪播示例

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>漸變輪播圖</title>
    <style type="text/css">
      .carousel {
        width: 800px;
        height: 378px;
        padding: 0px;
        margin: 0 auto;
        position: relative;
      }
      
      .carousel-imgs {
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
        list-style: none;
        background: white;
      }
      
      .carousel-imgs li {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
        opacity: 0;
      }
      
      .carousel-imgs a {
        text-decoration: none;
      }
      
      .carousel-imgs img {
        width: 100%;
        height: 100%;
      }
      
      .carousel-btns {
        width: 100%;
        z-index: 50;
        position: absolute;
        top: 45%;
      }
      
      .carousel-btns button {
        border: 0px;
        outline: none;
        padding: 5px;
        background: rgba(0, 0, 0, 0.4);
        text-align: center;
        color: white;
        font-size: 34px;
        font-family: "microsoft yahei";
      }
      
      .carousel-btns button:hover {
        background: rgba(0, 0, 0, 0.5);
      }
      
      .carousel-btn-left {
        float: left;
      }
      
      .carousel-btn-right {
        float: right;
      }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
      function carousel(left, top) {
        /* 獲取元素對象 */
        var $carousel = $(".carousel");
        var $imgs = $(".carousel-imgs li");
        var $btnL = $(".carousel-btn-left");
        var $btnR = $(".carousel-btn-right");
        /* 創建導航按鈕 */
        var $item_group = $("<ul></ul>");
        $item_group.attr("class", "carousel-items");
        $imgs.each(function() {
          $item_group.append("<li></li>");
        });
        $carousel.append($item_group);
        /* 樣式初始化 */
        $item_group.css({
          "padding": "0px",
          "margin": "0px",
          "list-style": "none",
          "width": "100px",
          "z-index": "50",
          "position": "absolute",
          "left": left,
          "top": top
        });
        $item_group.children().css({
          "width": "10px",
          "height": "10px",
          "padding": "0px",
          "margin": "5px",
          "background": "white",
          "opacity": "0.6",
          "border-radius": "5px",
          "box-shadow": "0 0 5px black",
          "cursor": "pointer",
          "float": "left"
        });
        /* 初始展示位置 */
        var index = 0;
        var $items = $(".carousel-items li");
        $items.eq(index).css("background", "gray");
        $imgs.eq(index).css("opacity", "1");
        $imgs.eq(index).css("z-index", "20");
        /* 按鈕點擊動作 */
        $btnL.click(function() {
          imgAnimator(false);
        });

        $btnR.click(function() {
          imgAnimator(true);
        });

        $items.click(function() {
          imgAnimator(true, $items.index($(this)));
        });
        /* 圖像動畫 */
        function imgAnimator(toNext, select) {
          if(select != null) {
            index = select;
          } else if(toNext == true) {
            index = ($imgs.length + index + 1) % $imgs.length;
          } else if(toNext == false) {
            index = ($imgs.length + index - 1) % $imgs.length;
          }

          $items.css("background", "white");
          $items.eq(index).css("background", "grey");

          $imgs.eq(index).css("z-index", 20);
          $imgs.eq(index).animate({
            "opacity": "1"
          }, "slow", function() {
            $imgs.css("z-index", "0");
            $imgs.css("opacity", "0");
            $imgs.eq(index).css("z-index", 10);
            $imgs.eq(index).css("opacity", "1");
          });
        }
      }
    </script>
  </head>

  <body style="background-color: #424242; padding-top: 100px;">
    <div class="carousel" style="width: 800px;height: 378px;">
      <ul class="carousel-imgs">
        <li>
          <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/mi5-shenruliaojie.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone-mimax/shenruliaojie.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/note3-shenruliaojie.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3s-shenruliaojie.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="http://c1.mifile.cn/f/i/15/item/buyphone/hongmi3x-shenruliaojie.jpg" alt="" /></a>
        </li>
      </ul>
      <div class="carousel-btns">
        <button type="button" class="carousel-btn-left">&lt;</button>
        <button type="button" class="carousel-btn-right">&gt;</button>
      </div>
    </div>
    <script>
      /* 啟用輪播圖效果 */
      carousel("43%", "71%");
    </script>
  </body>

</html>

漸變輪播示例

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 簡易輪播圖和無縫輪播圖的實現 React 實現簡易輪播圖層疊輪播圖的簡易制作 jquery 廣告輪播圖 Jquery輪播圖用jQuery寫的輪播圖基於Jquery實現的輪播圖 jQuery輪播圖（一）輪播實現並封裝用CSS代碼編寫簡易輪播圖 jquery weui輪播圖的使用