前端经典案例之轮播图

大部分网站或APP的首页差不多都运用到了轮播图，下边就探讨一下关于轮播图的集中解决方法，相关插件可自行去网站下载。

效果图：

方法一：

1.css样式代码：

<style>
  div {
    width: 344px;
    height: 199px;
    overflow: hidden;
  }
  ul {
    width: 1042px;
  }
  li {
    display: inline-block;
  }
</style>

2.html代码：

<div class="wrapper">
  <ul>
    <li><img src="07.gif" /></li>
    <li><img src="08.gif" /></li>
    <li><img src="09.gif" /></li>
  </ul>
</div>

3.js代码：

<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script>
  var imgWidth = $(".wrapper").width(); //ul移动一次的距离
  var imgLength = $("ul li").length; //判断索引为最后一个时，重新置为0
  var index = 0; //索引

  function changeImg(direction) {
    if (direction == "left") {
      index++;
    } else {
      index--;
    }
    if (index == imgLength) {
      index = 0;
    } else if (index == -1) {
      index = imgLength - 1;
    }
    $("ul")
      .stop()
      .animate(
        {
          marginLeft: -index * imgWidth + "px"
        },
        600
      );
  }

  function autoMove() {
    setInterval(function () {
      changeImg("left");
    }, 2000);
  }
  autoMove();
</script>

方法二：

效果图：

注释：该方法实现的轮播图是可循环的。

1.css代码：

.wrapper {
	width: 100%;
	height: 200px;
	overflow: hidden;
	position: absolute;
}

.wrapper ul {
	width: 400%;
	height: 200px;
	font-size: 0;
	position: relative;
}

.wrapper ul li {
	display: inline-block;
}

.wrapper img {
	width: 100%;
	height: 200px;
}

.wrapper .dots {
	position: absolute;
	right: 5px;
	top: 180px;
}

.wrapper .dots span {
	width: 16px;
	height: 16px;
	display: inline-block;
	background: #FFF;
	opacity: .5;
	border-radius: 50%;
}

2.HTML代码：

<div class="wrapper">
  <ul>
    <li><img src="img/4-1.jpg" /></li>
    <li><img src="img/4-2.jpg" /></li>
    <li><img src="img/4-3.jpg" /></li>
    <li><img src="img/4-4.jpg" /></li>
  </ul>
  <div class="dots">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

3.js代码：

<script src="js/zepto.js"></script>
<script>
  var index = 1;
  var liLnegth = $("li").length;
  $(".dots span").eq(0).css("opacity", "1");
  setInterval(function () {
    $("ul").css("left", "0%");
    $("ul").animate(
      {
        left: -100 + "%"
      },
      1000
    );
    $(".dots span")
      .eq(index - 1)
      .css("opacity", ".5");
    $(".dots span").eq(index).css("opacity", "1");
    $("ul li").eq(0).remove().clone(true).appendTo($("ul"));
    index++;
    if (index == liLnegth) {
      index = 0;
    }
  }, 2000);
</script>

方法三：

借助touchSlide插件 注释：该方法在移动端可以手动左右滑动，但是不可循环

1.css代码：

.focus {
	width: 100%;
	height: 140px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

.focus .hd {
	width: 100%;
	height: 11px;
	position: absolute;
	z-index: 1;
	bottom: 5px;
	text-align: center;
}

.focus .hd ul {
	display: inline-block;
	height: 5px;
	padding: 3px 5px;
	background-color: rgba(255, 255, 255, 0.7);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-size: 0;
	vertical-align: top;
}

.focus .hd ul li {
	display: inline-block;
	width: 5px;
	height: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #8C8C8C;
	margin: 0 5px;
	vertical-align: top;
	overflow: hidden;
}

.focus .hd ul .on {
	background: #FE6C9C;
}

.focus .bd {
	position: relative;
	z-index: 0;
}

.focus .bd li img {
	width: 100%;
	height: 140px;
}

/* 修改   */
.focus .hd {
	text-align: right;
	bottom: 10px;
}

.focus .hd ul {
	background-color: transparent;
}

.focus .hd ul li {
	width: 10px;
	height: 10px;
	-webkit-border-radius: 10px;
	opacity: 0.6;
}

.focus .hd ul .on {
	background: #fff;
	opacity: 1;
}

注释：css代码部分有所修改

2.html代码：

<div id="banner" class="focus">
  <div class="hd">
    <ul></ul>
  </div>
  <div class="bd">
    <ul>
      <li>
        <a href="#"><img _src="img/商城banner.jpg" /></a>
      </li>
      <li>
        <a href="#"><img _src="img/商城banner.jpg" /></a>
      </li>
      <li>
        <a href="#"><img _src="img/商城banner.jpg" /></a>
      </li>
    </ul>
  </div>
</div>

3.js代码：

<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/TouchSlide.1.1.js"></script>
<script type="text/javascript">
  TouchSlide({
    slideCell: "#banner",
    titCell: ".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
    mainCell: ".bd ul",
    effect: "left",
    autoPlay: true, //自动播放
    autoPage: true, //自动分页
    switchLoad: "_src" //切换加载，真实图片路径为"_src"
  });
</script>

方法四：

借助swipe插件

注释：和touchsilde插件的效果一样

1.css代码：

<style type="text/css">
  .swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
  }
  .swipe-wrap {
    overflow: hidden;
    position: relative;
  }
  .swipe-wrap > div {
    float: left;
    width: 100%;
    position: relative;
  }
  .swipe-wrap > div img {
    width: 100%;
    height: 220px;
  }
</style>

2.HTML代码：

<div id="slider" class="swipe">
  <div class="swipe-wrap">
    <div class="wrap">
      <img src="img/3-1.jpg" />
    </div>
    <div class="wrap">
      <img src="img/3-2.jpg" />
    </div>
    <div class="wrap">
      <img src="img/3-3.jpg" />
    </div>
  </div>
</div>

3.js代码：

<script src="js/zepto.js"></script>
<script src="js/swipe.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  window.mySwipe = Swipe(document.getElementById("slider"), {
    startSlide: 2,
    speed: 400,
    auto: 3000,
    continuous: true,
    disableScroll: false,
    stopPropagation: false,
    callback: function (index, elem) {},
    transitionEnd: function (index, elem) {}
  });
</script>

方法五：借助swipe插件 注释：该方法可以自动循环播放

1.swipe.css代码：

/*轮播*/
.carousel {
	height: 250px;
	position: relative;
}

.carousel .swipe {
	overflow: hidden;
	visibility: hidden;
	position: relative;
	height: 100%;
}

.carousel .swipe .swipe-wrap {
	overflow: hidden;
	position: relative;
}

.carousel .swipe .swipe-wrap > figure {
	float: left;
	width: 100%;
	position: relative;
}

#slider {
	max-width: 650px;
  /* 设置最大的宽度 */
	margin: 0px auto;
  /* 居中对齐 */
}

figure {
	margin: 0;
  /* 对齐，四周宽度都为0，在轮播的时候，以整张图片进行移动 */
}

.face {
	height: 250px;
/*设置图片高度*/
}

/*底边小点的设置*/
.carousel nav #position {
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 5px;
}

.carousel nav #position li {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: #141414;
	box-shadow: inset 0 1px 3px black, 0 0 1px 1px #202020;
	margin: 0 2px;
	cursor: pointer
}

.carousel nav #position li.on {
	box-shadow: inset 0 1px 3px -1px #28b4ea, 0 1px 2px rgba(0, 0, 0, .5);
	background-color: #1293dc;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1293dc), color-stop(100%, #0f6297));
	background-image: -webkit-linear-gradient(top, #1293dc, #0f6297);
	background-image: -moz-linear-gradient(top, #1293dc, #0f6297);
	background-image: -ms-linear-gradient(top, #1293dc, #0f6297);
	background-image: -o-linear-gradient(top, #1293dc, #0f6297);
	background-image: linear-gradient(top, #1293dc, #0f6297)
}

2.html代码：

<div class="carousel">
  <div id="slider" class="swipe" style="visibility: visible">
    <div class="swipe-wrap">
      <figure>
        <div class="face faceInner">
          <img src="img/4-1.jpg" width="100%" height="100%" />
        </div>
      </figure>
      <figure>
        <div class="face faceInner">
          <img src="img/4-2.jpg" width="100%" height="100%" />
        </div>
      </figure>
      <figure>
        <div class="face faceInner">
          <img src="img/4-3.jpg" width="100%" height="100%" />
        </div>
      </figure>
      <figure>
        <div class="face faceInner">
          <img src="img/4-4.jpg" width="100%" height="100%" />
        </div>
      </figure>
    </div>
  </div>
  <nav>
    <ul id="position">
      <li class="on"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>
</div>

3.js代码：

<script src="js/swipe.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  var slider = Swipe(document.getElementById("slider"), {
    auto: 3000, //轮播时间
    continuous: true, //是否连续播放
    disableScroll: false,
    callback: function (pos) {
      var i = bullets.length;
      while (i--) {
        bullets[i].className = " ";
      }
      bullets[pos].className = "on";
    }
  });
  var bullets = document.getElementById("position").getElementsByTagName("li");
</script>