Jquery 轮播图简易框架

2022-09-16 22:15:05

=====================基本结构=====================

<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）

有了轮播图的基本结构，还需要引入相应的样式和效果，这里提供两种基础的轮播图效果，滚动轮播和渐变轮播。

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

滚动轮播图：

Jquery 轮播图简易框架

    .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");

        }

    }

滚动轮播图效果

渐变轮播图：

Jquery 轮播图简易框架

    .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:;

        opacity:;

    }

    .carousel-imgs a {

        text-decoration: none;

    }

    .carousel-imgs img {

        width: 100%;

        height: 100%;

    }

    .carousel-btns {

        width: 100%;

        z-index:;

        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>

滚动轮播示例

Jquery 轮播图简易框架

<!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>

渐变轮播示例

Jquery 轮播图简易框架

上一篇：用 CSS 做轮播图


下一篇：44.Android之Shape设置虚线、圆角和渐变学习