JQUERY轮播图
1.建文件夹
HTML CSS JS 和图片
2.引入CSS JS(自己的JS和外部)
3.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="demo.css" type="text/css">
<script type="text/javascript" src="../jquery-3.6.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<!-- <button type="button" id="btn">滑动</button>
<br />
<img id="myimg" src="images/suho.jpg" width="500px"/> -->
<div class="viewBox">
<ul>
<li>
<img src="images/suho.jpg"/>
</li>
<li>
<img src="images/suho2.jpg"/>
</li>
<li>
<img src="images/suho3.jpg"/>
</li>
<li>
<img src="images/suho4.jpg"/>
</li>
</ul>
<div class="bots">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- 左右箭头 -->
<div class="leftArr"><</div>
<div class="rightArr">></div>
</div>
</body>
</html>
4.css源代码
*{
margin: 0;
padding: 0;
}
.viewBox{
width: 400px;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 300px;
}
.viewBox>ul{
list-style: none;
width: 400%;
position: relative;
}
.viewBox>ul>li{
float: left;
}
.viewBox>ul>li>img{
width: 400px;
height: 300px;
}
.viewBox>.bots{
position: absolute;
bottom: 10px;
left: 45%;
}
.viewBox>.bots>span{
width: 15px;
height: 15px;
background: rgba(255,255,255,.6);
display: inline-block;
border-radius: 50%;
}
.viewBox>.bots>span.active{
background:rgba(255,0,0,.8);
}
.viewBox>.leftArr,.viewBox>.rightArr{
color: gainsboro;
position: absolute;
top: 30%;
font-size: 96px;
font-weight: bold;
}
.viewBox>.rightArr{
right: 0;
}
5.JS源代码
$(function(){
//控制点被激活
var num=0;
var timer=setInterval(function() {
//attr()获取和设置属性
//removeAttr()移除属性
//eq()
$(".bots>span").removeAttr("class").eq(num).attr("class","active");
$(".viewBox>ul").animate({
"left":"-"+num*400+"px",
},1000)
num++;
if(num>3){
num=0
}
}, 2000)
})