码迷，mamicode.com
首页 > Web开发 > 详细

Jquery 轮播图简易框架

时间：2016-10-22 09:42:04      阅读：390      评论：0      收藏：0      [点我收藏+]

标签：white   open   and   slow   length   html   按钮   控件   动作   

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

<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>
渐变轮播示例

技术分享

 

Jquery 轮播图简易框架

标签：white   open   and   slow   length   html   按钮   控件   动作   

原文地址：http://www.cnblogs.com/woider/p/5986644.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！