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"><button>
        <button type="button" class="carousel-btn-right">>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 = $("
");
        $item_group.attr("class", "carousel-items");
        $imgs.each(function() {
            $item_group.append("
");
        });
        $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 = $("
");
        $item_group.attr("class", "carousel-items");
        $imgs.each(function() {
            $item_group.append("
");
        });
        $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。

启用效果需要手动初始化，在基本结构之后添加 注册动画效果。

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 = $("
");
        $item_group.attr("class", "carousel-items");
        $imgs.each(function() {
          $item_group.append("
");
        });
        $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"><button>
        <button type="button" class="carousel-btn-right">>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 = $("
");
        $item_group.attr("class", "carousel-items");
        $imgs.each(function() {
          $item_group.append("
");
        });
        $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"><button>
        <button type="button" class="carousel-btn-right">>button>
      div>
    div>
    <script>
      /* 启用轮播图效果 */
      carousel("43%", "71%");
    script>
  body>

html>

渐变轮播示例

 

转载于:https://www.cnblogs.com/woider/p/5986644.html