js轮播图

最新推荐文章于 2025-05-31 16:02:29 发布

斜刘海遮住右眼的眼屎

最新推荐文章于 2025-05-31 16:02:29 发布

阅读量78

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_65450526/article/details/124180545

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
ul li{
list-style: none; /*去除圆点*/
}
.kj{
width:100%;
height: 100%;
}
.rp{
width: 500px;
height: 300px;
position: relative;
margin: 50px auto;
}
.box_tp {
/*opacity: 0;*//*透明*/
position: absolute;
}
/*.tp:nth-child(1){/*选择器nth-child
opacity: 1;
}*/
#sc{
position: absolute;
top: 77px;
right: -30px;
}
#sc ul li{
width: 20px;
height: 20px;
border-radius:50%;
margin: 10px 0px;
text-align: center;
}
#sc ul li:hover{
cursor: pointer;
}
.zb,.yb{
width: 30px;
height: 60px;
position: absolute;
font-size: 20px;
top: 120px;
line-height: 60px;
text-align: center;
}
.zb{
left: 0px;
}
.yb{
right: 0px;
}
.zb:hover,.yb:hover{
cursor: pointer;
color: #FBFBFB;
background: #00000050;
}
</style>
</head>
<body>
<div class="kj">
<div class="rp">
< img src="img/微信图片_1.jpg" width="500px" height="300px" id="dd"/>
<div id="sc">
<ul>
<li id="scr1" οnmοuseοver="stop(1)" οnmοuseοut="change()" style="background:red;">1</li>
<li id="scr2" οnmοuseοver="stop(2)" οnmοuseοut="change()">2</li>
<li id="scr3" οnmοuseοver="stop(3)" οnmοuseοut="change()">3</li>
<li id="scr4" οnmοuseοver="stop(4)" οnmοuseοut="change()">4</li>
<li id="scr5" οnmοuseοver="stop(5)" οnmοuseοut="change()">5</li>
</ul>
</div>
<div class="zb"><</div>
<div class="yb">></div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload =function(){
change();
}
let times;
function change(){
times=setInterval(ba,1000);
}
let i=1;
let dd_scroll;
function ba(){
if (i>=6) {
i=1;
}
dd_scroll=document.getElementById("dd");
dd_scroll.src="img/微信图片_"+i+".jpg";
bg();
i++;
}
function bg(){
let sc=document.getElementById("sc");
console.log(sc);
let lis = sc.getElementsByTagName("li");
let len=lis.length;
for (let i=0;i<len;i++) {
lis[i].style.background ="";
}
let lsd1=document.getElementById("scr"+i);
lsd1.style.background ="red";
}
function stop(num){
clearInterval(times);
i = num;
dd.src = "img/微信图片_"+num+".jpg";
bg();
ba();
}
</script>
</html> watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pac5YiY5rW36YGu5L2P5Y-z55y855qE55y85bGO,size_20,color_FFFFFF,t_70,g_se,x_16