这是一个纯js写的轮播测试版，代码有待改进
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/function.js"></script>
<style type="text/css">
.ndiv{
width: 2060px;
position: relative;
}
.wdiv{
width: 497px;
overflow: hidden;
height: 177px;
position: relative;
}
img{
margin-left: -4px;
}
ul{
margin-top: -50px;
}
li{
list-style: none;
width: 20px;
height: 20px;
float: left;
background-color: blue;
text-align: center;
line-height: 20px;
border-radius: 50%;
color: white;
margin-right: 10px;
}
.nu{
position: relative;
width: 180px;
margin:0 auto;
z-index: 999;
}
.wdiv:hover .ltr{
width: 40px;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: rgba(255,0,255,0.6);
}
.wdiv:hover .rtl{
width: 40px;
height: 100%;
position: absolute;
top: 0px;
right: 0px;
background-color: rgba(255,0,255,0.6);
}
</style>
</head>
<body>
<div class="wdiv">
<div class="ndiv">
<img src="img/s_banner1.jpg" width="500" >
<img src="img/s_banner2.jpg" width="500" >
<img src="img/s_banner3.jpg" width="500" >
<img src="img/s_banner1.jpg" width="500" >
</div>//轮播的3张图片，最后一张图伪装成第一张图，达到“好像回到开头”的感觉
<div class="nu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>//li标签里是切换的按钮（功能未实装）
<div class="ltr"></div>
<div class="rtl"></div>
</div>
<script type="text/javascript">
var clo=setTimeout(function(){clo2=setInterval(ds, 1)},2000);
i=i+2;
var time=0;
getTag(‘div‘)[1].style.marginLeft="0px";
var i=0;
test();
getTag("li")[0].style.background="white";
getTag("li")[0].style.color="black";
function ds(){
if (i<=500) {
i=i+1;
time=time-1;
test();
getTag("li")[1].style.background="white";
getTag("li")[1].style.color="black";
getTag(‘div‘)[1].style.marginLeft=time+"px";
}else if(i>=501&&i<=502){
clearTimeout(clo);
clearInterval(clo2);
setTimeout(function(){clo2=setInterval(ds, 1)},2000);
i=i+1;
}else if(i>=501&&i<=1000){
i=i+1;
time=time-1;
test();
getTag("li")[2].style.background="white";
getTag("li")[2].style.color="black";
getTag(‘div‘)[1].style.marginLeft=time+"px";
}else if (i>=1001&&i<=1002) {
clearTimeout(clo);
clearInterval(clo2);
setTimeout(function(){clo2=setInterval(ds, 1)},2000);
i=i+1;
}else if (i>=1002&&i<=1500){
i=i+1;
time=time-1;
test();
getTag("li")[0].style.background="white";
getTag("li")[0].style.color="black";
getTag(‘div‘)[1].style.marginLeft=time+"px";}
else if (i>=1501&&i<=1502) {
i=i+1;
clearTimeout(clo);
clearInterval(clo2);
setTimeout(function(){clo2=setInterval(ds, 1)});
}else if (i>=1502&&i<=1503){
clearTimeout(clo);
clearInterval(clo2);
getTag("li")[0].style.background="white";
getTag("li")[0].style.color="black";
setTimeout(function(){clo2=setInterval(ds, 1)},2000);
i=0;
time=0;
}
}
function test(){
for (var i = 0; i < 3; i++) {
getTag("li")[i].style.background="blue";
getTag("li")[i].style.color="white";
}
}//在js中操控定时器来达到滚动的效果，用延时定时器达到停止一会//test函数配合数字初始化背景颜色和字体颜色
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/LastFire/p/8352923.html
时间： 2024-08-04 13:13:15