Jquery 轮播图简易框架

Posted 2020-08-15 woider

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery 轮播图简易框架相关的知识，希望对你有一定的参考价值。

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

<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",
          "超简易的轮播图（JavaScript）
 怎么用jquery做轮播图效果
 主界面绘制加载轮播图减少apk体积（ 简易音乐 五）
 前端框架之jQuery----轮播图,放大镜
 新增轮播图跳转web页面轮播推荐歌单数据存储（ 简易音乐 七）
 使用js和css-transition属性57行代码实现简易无缝轮播图