Web 开发已经离不开轮播图，目前轮播的样式五花八门，如：淡入淡出型、上下滑动型、左右滑动型、左右滑动无缝型，对比用户体验的话，无缝轮播方式是最好的，因为在播放多张图片的情况下不会出现间断感，该课程用最简单易懂的方式，让你学会独立制作与开发。
本场 Chat 将会带领大家，深入浅出。从轮播图开始，利用浅显易懂的方式，学习 HTML+CSS 以及 jQuery 的知识：
- 了解轮播图的基本原理，概念；
- HTML 标签的用法；
- CSS 作为样式表是怎么渲染页面；
- jQ 是怎么实现图随手动的；
- 详解 jQ 计时器的作用。
前言
网站上经常见到焦点图动画，焦点图的动画有多种，如：淡入淡出型、上下滑动型、左右滑动型、左右滑动无缝型，对比用户体验的话，无缝轮播方式是最好的，因为在播放多张图片的情况下不会出现间断感，该课程用最简单易懂的方式，让你学会独立制作与开发。
第一章、无缝轮播概念以及准备工作
1.无缝轮播介绍
普通的轮播图，最后一张 img切换到第一张时会产生晃眼的效果，这种体验是非常不好的。
而无缝轮播是将左右方向的切换或上下方向的切换进行无间断的连续播放，在最后一张切换到第一张 img 时，会采用平滑的方式渡过。这种观赏方式不会出现短点，观赏性强。
在淘宝官网、好 123、csdn 等网站焦点图都采用这种方式。
2、概念
轮播是采用将 img 横排排列，用 overflow:hidden；进行溢出控制，并且利用 jQ 进行滑动以及时间控制，而无缝轮播是在普通普通轮播的基础上增加一个 img，从而达到无缝滑动的效果。
在下图中，你可以看到第一张和最后一张是重复的，这就是无缝的实现原理
第二章、框架搭建
实际效果图
- 为了达到 li 标签随照片变化的目的，num 采用的无须列表，但是需要用 jQ 进行控制，并且实现。
<div class="banner"> <ul class="img"> <li> <a href="#"><img src="images/1.jpg" /></a> </li> <li> <a href="#"><img src="images/2.jpg" /></a> </li> <li> <a href="#"><img src="images/3.jpg" /></a> </li> <li> <a href="#"><img src="images/4.jpg" /></a> </li> <li> <a href="#"><img src="images/5.jpg" /></a> </li> </ul> <ul class="num"> <!--li用JS实现--> </ul> <div class="btn btn_l"><</div><!--上一页--> <div class="btn btn_r">></div><!--下一页--> </div>第三章 css 样式引用
.banner { margin: 150px auto; width: 650px; height: 433px; position: relative; cursor: pointer; overflow: hidden;}<!--采用定位，并且使用overflow：hidden控制内容溢出。将img重叠--> .img { width: 5000px; position: absolute; left: 0; top: 0; display: block; } .img li { float: left; } .num { position: absolute; width: 100%; bottom: 10px; left: 0; text-align: center; font-size: 0px; } .num li { width: 10px; height: 10px; background: aquamarine; border-radius: 20px; display: inline-block; margin: 0 3px; } .num li.on { background: #000000; } <!--此处虽然没有在html中添加li标签，但是我们是通过jQ来实现，所以li实际是存在的，给他添加样式--> .btn { width: 30px; height: 50px; background: rgba(0,0,0,0.5); position: absolute; top: 50%; margin-top: -25px; text-align: center; line-height: 50px; color: white; font-size: 40px; font-family: "宋体"; display: none; } .banner:hover .btn { display: block; } .btn_l { left: 0; } .btn_r { right: 0; } jQ代码为原生未优化的，在下面还会进行优化，从而使用起来更方便，减少冗余 <script> $(function() { var i = 0; var clone = $(".img li").first().clone(); $(".img").append(clone); var size = $(".img li").size(); /*.num li 的js*/ for(var j=0;j<size-1;j++){ $(".num").append("<li></li>"); } $(".num li").first().addClass("on"); /*鼠标滑入圆点*/ $(".num li").hover(function() { var index = $(this).index(); i = index; $(".img").stop().animate({ left: -index * 650 }, 500) $(this).addClass("on").siblings().removeClass("on") }) /*自动轮播*/ var t = setInterval(moveL,2000) /*对banner定时器的操作*/ $(".banner").hover(function(){ clearInterval(t); },function(){ t = setInterval(moveL,2000) }) /*向左按钮*/ $(".btn_l").click(function() { moveL(); }) /*向右按钮*/ $(".btn_r").click(function() { moveR(); }) function moveL(){ i++ if(i == size) { $(".img").css({ left: 0 }) i = 1; } $(".img").stop().animate({left: -i * 650}, 500) if(i==size-1){ $(".num li").eq(0).addClass("on").siblings().removeClass("on") }else{ $(".num li").eq(i).addClass("on").siblings().removeClass("on") } } function moveR(){ i-- if(i == -1) { $(".img").css({ left: -(size - 1) * 650 }) i = size - 2; } $(".img").stop().animate({ left: -i * 650 }, 500) $(".num li").eq(i).addClass("on").siblings().removeClass("on") } }) </script>优化后的 jQ，将计时器以及按钮合并
$(function() { var i = 0; var clone = $(".img li").first().clone(); $(".img").append(clone); var size = $(".img li").size(); /*.num li 的js*/ for(var j = 0; j < size - 1; j++) { $(".num").append("<li></li>"); } $(".num li").first().addClass("on"); /*鼠标滑入圆点*/ $(".num li").hover(function() { var index = $(this).index(); i = index; $(".img").stop().animate({ left: -index * 650 }, 500) $(this).addClass("on").siblings().removeClass("on") }) /*自动轮播*/ var t = setInterval(function(){ i++; move() }, 2000) /*对banner定时器的操作*/ $(".banner").hover(function() { clearInterval(t); }, function() { t = setInterval(function(){ i++; move() },2000) }) /*向左按钮*/ $(".btn_l").click(function() { i++ move(); }) /*向右按钮*/ $(".btn_r").click(function() { i-- move(); }) function move() { if(i == size) { $(".img").css({ left: 0 }) i = 1; } if(i == -1) { $(".img").css({ left: -(size - 1) * 650 }) i = size - 2; } $(".img").stop().animate({ left: -i * 650 }, 500) if(i == size - 1) { $(".num li").eq(0).addClass("on").siblings().removeClass("on") } else { $(".num li").eq(i).addClass("on").siblings().removeClass("on") } } })----------本文首发于GitChat，未经授权不得转载，转载需与GitChat联系。本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
