2025年8月24日大约 2 分钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='jquery-color.js'></script>
<style type="text/css">
*{margin:0px;padding:0px;}
#all{position:absolute;}
#uls{position:absolute;left:100px;top:50px;list-style:none;}
#uls li{width:1190px;height:410px;position:absolute;}
#dian{width:180px;height:40px;list-style:none;background:rgba(255,255,255,0.5);position:absolute;left:590px;top:400px;text-align:center;line-height:40px;border-radius:10px;}
#dian li{width:15px;height:15px;float:left;background:white;border-radius:50%;margin:15px 10px 10px 5px;cursor:pointer;}
#dian .cur{background-color:#db192a;}
</style>
</head>
<body>
<div>
<!-- 轮播图 -->
<ul id='uls'>
<li><img src="./lunbo/1.jpg" alt="" width='100%'></li>
<li><img src="./lunbo/2.jpg" alt="" width='100%'></li>
<li><img src="./lunbo/3.jpg" alt="" width='100%'></li>
<li><img src="./lunbo/4.jpg" alt="" width='100%'></li>
<li><img src="./lunbo/5.jpg" alt="" width='100%'></li>
<li><img src="./lunbo/6.jpg" alt="" width='100%'></li>
</ul>
<!-- 点控制器 -->
<ul id='dian'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script type="text/javascript">
//1让图片第一张显示出来 其他图片隐藏 后面还需要用到封装函数
//调用
show(0);
function show(i)
{
$('#uls li').eq(i).show();
$('#uls li').eq(i).siblings().hide();
//4让点改变颜色(因为显示哪张图,哪个对应的点就应该改变颜色)
$('#dian li').eq(i).addClass('cur');
$('#dian li').eq(i).siblings().removeClass('cur');
}
//2让图片动起来
var i=1;//因为已经调用过一次,所以这里设置为1
//7为了停止轮播在这里声明一个变量
var into=null;
//9封装轮播功能
function moves()
{
into = setInterval(function(){
//分析是让显示函数的i值增加即可
show(i++);
//防止越界 实现轮播
if(i>5)
{
i=0;
}
},2000);
}
//调用函数
moves();
//3给图片加点控制器 分析为了方便定位在最外层再套一层div
//5实现点控制器功能 也就是鼠标移入 移出事件
$('#dian li').hover(function(){
//6先停止 轮播
clearInterval(into);
//7分析要分辨出那个点,就是要获取那个点的下标
i=$(this).index();
//调用函数 这里需要填入i++ 先用后加,因为当鼠标移走后需要继续轮播
show(i++);
},function(){
//8因为移走后又需要轮播 所以封装轮播函数
moves();
});
</script>
</html>