CSS核心（四十四）综合案例--使用JS+CSS实现轮播的完整原理
轮播图案例是一个比较综合的案例，通过以上CSS语法的讲解，大家如果一直动手练习，应该是可以排版出来的，只不过是需要时间长短的问题。先放上效果图，大家可以照着图片自己先做一下，实在不行再看下面的代码。
其中的js代码部分，大家如果不会的话可以不写，只要能够排版出如下样子即可。
想学JS的话可以去JS教程专区学习：https://www.teamczyx.com/forum-131-1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js+css轮播图完整实现原理</title>
</head>
<style>
.box{
width:590px;
height:470px;
/* border:10px solid #0f0; */
overflow:hidden;
position:relative;
}
ul,ol{
list-style:none;
padding:0;
margin:0;
}
input{
width:50px;
height:50px;
background:#f00;
color:#fff;
text-align:center;
line-hegiht:50px;
font-size:30px;
font-weight:bold;
position:absolute;
top:50%;
margin-top:-25px;
border:none;
}
.left{
left:0;
}
.right{
right:0;
}
ol{
position:absolute;
bottom:20px;
width:60px;
left:50%;
margin-left:-30px;
}
ol li{
width:10px;
height:10px;
border-radius:50%;
background:#fff;
float:left;
margin:0 5px;
}
ol li.on{
background:#f00;
}
</style>
<body>
<div class="box">
<ul>
<li><a href="#"><img src="img/banner_1.jpg"></a></li>
<li><a href="#"><img src="img/banner_2.jpg"></a></li>
<li><a href="#"><img src="img/banner_3.jpg"></a></li>
</ul>
<ol>
<li class="on"></li>
<li></li>
<li></li>
</ol>
<input type="button" class="left" value="<">
<input type="button" value=">" class="right">
</div>
</body>
<script src="jquery.js"></script>
<script>
var i = 0;
function move(){
i++;
if(i>2){
i=0;
}
$("ul li").eq(i).show().siblings("li").hide();
$("ol li").eq(i).css("background","#f00").siblings("li").css("background","#fff")
}
var timer;
timer = setInterval(move,2000);
$(".box").hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(move,2000);
});
$(".left").click(move);
function r(){
i--;
if(i<0){
i=2;
}
$("ul li").eq(i).show().siblings("li").hide();
$("ol li").eq(i).css("background","#f00").siblings("li").css("background","#fff")
}
$(".right").click(r);
$("ol li").click(function(){
i=$(this).index()
$("ul li").eq(i).show().siblings("li").hide();
$("ol li").eq(i).css("background","#f00").siblings("li").css("background","#fff");
});
</script>
</html>
显示结果为：
解释一下：
该案例分为两个部分，一个是CSS样式部分，一个是使用JS代码让图片产生动态效果的部分。
先说一下如何使用CSS布局出来一个轮播图样式
1、编写HTML结构，在一个div中包含一个无序列表，用来放img标签，一个有序列表，用来设置下面的小圆点，一个左箭头，一个右箭头，箭头可以使用字体图标，案例中为了节省时间使用了<>。
2、将父盒子的尺寸设置为图片的尺寸，然后使用overflow:hidden;将移除部分隐藏，此时，在div中就只可以看到一张图片。
3、去除无序列表和有序列表的默认样式。
4、定位左右箭头，需要在父盒子div上使用相对定位，然后分别在左右箭头上设置绝对定位，使用偏移将左箭头放左边，右箭头放右边，并添加一些其它样式让它好看一点。
5、编写小白点的样式代码，主要使用border-radius:50%;设置为圆形，其余就是颜色、浮动和和间距之类的设置。
6、最后给有序列表的第一个小白点添加一个背景的样式，方便使用js操作类名的方法来动态改变小白点的样式。
第二部分是JS的编写，为了简单，我们使用了jquery
1、定义一个用来显示隐藏图片的函数。
2、将该函数放到始终里面去循环执行。
3、给左右箭头绑定事件，分别实现点左箭头显示前一张和点右箭头实现下一张的效果。
具体实现方法是js相关内容，这里就不详细说明了，核心逻辑就是循环到货点击到的那个元素显示，其余的隐藏。
看你的文章,真的挺受益啊~~~我以后一定要努力! 学习的道路上永远都没有终点！！！ 看到这些还真是有点兴奋啊。。我想快点学。。可是不知道哪有得教啊 fgafe 好!很好!非常的好! 是观念的原因。考研，考级。过多的看到钱就会掉到钱眼里。看不到会有好的程序。钱可以成就一个人，也可以毁掉一个人 成功/对我来说，，成功就是一个新的起点，，什么叫成功，我才刚上路咧引用发哥的话，。无论什么时候，我们都要想的是一个新的起点，这样我们才不会满足现状，目标也会更清晰现在的我自信心越来越膨胀，我感觉有种云里雾里的感觉可能得来太容易了，我发现我太狂了，言不由衷。 真的这个故事对我来说太重要了，谢谢你朋友，虽然我现在还是学生，但是我明白了基础的重要，我从现在就要开始认真对待这个问题了！ 俺和你们说哟，我还没毕业出来的，。其实计算机这方面我很菜，我自己都这样认为，但是尽管这样我还是能在苏州这边的IT里面工作，我感情很幸福，有时候幸福降临的时候挡也挡不住，真的我很喜欢现在这样，因为我比老哥幸运的多了，。111