轮播图案例是一个比较综合的案例，通过以上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相关内容，这里就不详细说明了，核心逻辑就是循环到货点击到的那个元素显示，其余的隐藏。
|
窥视卡
雷达卡
发表于 2023-2-1 16:46:47
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-18 18:26:38
