代码实现轮播图的方法（二）
程序员文章站
2022-05-28 21:26:33
代码实现轮播图的方法（二）
代码实现轮播图的方法（二）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>o</title>
<link rel="stylesheet" type="text/css" href="my.css">
<style>
* {
margin:0;
padding:0
}
#container {
width:450px;
height:300px;
margin-left:535px;
position:relative;
}
.banner-img-ul {
list-style-type: none;
}
.banner-img-li {
position:absolute;
}
img {
width:450px;
height:300px;
}
.hidden {
display: none;
}
#yuan {
width:160px;
height:20px;
background-color:rgb(99,3,18);
border-radius: 10px;
text-align: center;
position:relative;
left:680px;
top:-20px;
opacity:0.4;
}
.circle {
width:16px;
height:16px;
background-color:grey;
border-radius: 8px;
display:inline-block;
position: relative;
top:1px;
}
.color {
background-color: white;
}
.btn {
border:0px;
width:30px;
height:30px;
border-radius:15px;
color:white;
font-size:20px;
}
.btn1 {
position:relative;
left:550px;
top:-190px;
opacity:0.6;
}
.btn2 {
position:relative;
left:900px;
top:-190px;
opacity:0.6;
}
</style>
</head>
<body>
<p id="container">
<ul class="banner-img-ul">
<li class="banner-img-li"><img src="1.jpg"></li>
<li class="banner-img-li hidden" ><img src="2.jpg"></li>
<li class="banner-img-li hidden"><img src="3.jpg"></li>
<li class="banner-img-li hidden"><img src="4.jpg"></li>
</ul>
</p>
<p id="yuan">
<p class="circle color"></p>
<p class="circle"></p>
<p class="circle"></p>
<p class="circle"></p>
</p>
<input type="button" value=">" class="btn btn1">
<input type="button" value="<" class="btn btn2">
<script src="tools/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
var i = 0;
var timer=null;
//鼠标移入。
$(".banner-img-ul").on("mouseover",function(){
window.clearinterval(timer);
})
//鼠标移出。
$(".banner-img-ul").on("mouseout",function(){
timer=setinterval(function() {
for(var j = 0; j < $(".banner-img-li").length; j++) {
if(i == j) {
$(".banner-img-li").eq(j).removeclass("hidden");
$(".circle").eq(j).addclass("color");
} else {
$(".banner-img-li").eq(j).addclass("hidden");
$(".circle").eq(j).removeclass("color");
}
}
if(i >= 3) {
i = 0;
} else {
i++;
}
}, 2000)
})
//左滑动。
$(".btn1").on("click",function(){
window.clearinterval(timer);
if(i>0&&i<3){
console.log(i);
$(".banner-img-li").eq(i).removeclass("hidden");
$(".circle").eq(i).addclass("color")
$(".banner-img-li").eq(i-1).addclass("hidden");
$(".circle").eq(i-1).removeclass("color");
i++;
}else{
if(i==3){
$(".banner-img-li").eq(i).removeclass("hidden");
$(".circle").eq(i).addclass("color")
$(".banner-img-li").eq(i-1).addclass("hidden");
$(".circle").eq(i-1).removeclass("color");
i=0;
}else{
$(".banner-img-li").eq(i).removeclass("hidden");
$(".circle").eq(i).addclass("color")
$(".banner-img-li").eq(3).addclass("hidden");
$(".circle").eq(3).removeclass("color");
i++;
}
}
$(".banner-img-ul").mouseout();
})
//右滑动。
$(".btn2").on("click",function(){
window.clearinterval(timer);
if(i>1&&i<4){
console.log(i);
$(".banner-img-li").eq(i-2).removeclass("hidden");
$(".circle").eq(i-2).addclass("color")
$(".banner-img-li").eq(i-1).addclass("hidden");
$(".circle").eq(i-1).removeclass("color");
i--;
}else{
if(i==1){
$(".banner-img-li").eq(3).removeclass("hidden");
$(".circle").eq(3).addclass("color")
$(".banner-img-li").eq(i-1).addclass("hidden");
$(".circle").eq(i-1).removeclass("color");
i=0;
}else{
$(".banner-img-li").eq(2).removeclass("hidden");
$(".circle").eq(2).addclass("color")
$(".banner-img-li").eq(3).addclass("hidden");
$(".circle").eq(3).removeclass("color");
i=3;
}
}
$(".banner-img-ul").mouseout();
})
//轮播。
$(".banner-img-ul").mouseout();
// 点击小圆点，对应相对的图。
$(".circle").on("click",function(){
window.clearinterval(timer);
console.log(i);
if(i>0){
$(".circle").eq(i-1).removeclass("color");
$(".banner-img-li").eq(i-1).addclass("hidden");
}else{
$(".circle").eq(3).removeclass("color");
$(".banner-img-li").eq(3).addclass("hidden");
}
$(this).addclass("color");
for(var j = 0;j < $(".circle").length;j++){
if($(".circle").eq(j).hasclass("color")){
$(".banner-img-li").eq(j).removeclass("hidden");
i=j+1;
if(i==4){
i=0;
}
}
}
$(".banner-img-ul").mouseout();
})
</script>
</body>
</html>00 上一篇： Angular6新版功能介绍之service的共享实例
下一篇： 移动端出现1px问题的解决办法