代码实现轮播图的方法（一）
程序员文章站
2023-03-26 22:05:57
代码实现轮播图的方法（一）
代码实现轮播图的方法（一）
<!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;
overflow: hidden;
}
.banner-img-ul {
list-style-type: none;
width:1800px;
}
.banner-img-li {
float:left;
}
img {
width:450px;
height:300px;
}
#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"><img src="2.jpg"></li>
<li class="banner-img-li"><img src="3.jpg"></li>
<li class="banner-img-li"><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 timer=null;
//鼠标移入。
$(".banner-img-ul").on("mouseover",function(){
window.clearinterval(timer);
})
//鼠标移出。
$(".banner-img-ul").on("mouseout",function(){
timer=setinterval(function(){
var l = $(".banner-img-ul").offset().left;
if(l <= -815 ){
$(".banner-img-ul").offset({left:535});
circlerun();
}else{
$(".banner-img-ul").offset({left:l-450});
circlerun();
}
},1000)
})
//轮播。
$(".banner-img-ul").mouseout();
//右滑动。
$(".btn2").on("click",function(){
window.clearinterval(timer);
var l = $(".banner-img-ul").offset().left;
if(l < 535 ){
$(".banner-img-ul").offset({left:l+450});
circlerun();
}else{
$(".banner-img-ul").offset({left:-815});
circlerun();
}
$(".banner-img-ul").mouseout();
})
//左滑动。
$(".btn1").on("click",function(){
window.clearinterval(timer);
var l = $(".banner-img-ul").offset().left;
if(l <= -815 ){
$(".banner-img-ul").offset({left:535});
circlerun();
}else{
$(".banner-img-ul").offset({left:l-450});
circlerun();
}
$(".banner-img-ul").mouseout();
})
//小圆点运动起来。
function circlerun(){
var l = $(".banner-img-ul").offset().left
if(l==535){
$(".circle").eq(0).addclass("color");
$(".circle").eq(1).removeclass("color");
$(".circle").eq(2).removeclass("color");
$(".circle").eq(3).removeclass("color");
}
if(l==85){
$(".circle").eq(1).addclass("color");
$(".circle").eq(0).removeclass("color");
$(".circle").eq(2).removeclass("color");
$(".circle").eq(3).removeclass("color");
}
if(l== -365){
$(".circle").eq(2).addclass("color");
$(".circle").eq(0).removeclass("color");
$(".circle").eq(1).removeclass("color");
$(".circle").eq(3).removeclass("color");
}
if(l== -815){
$(".circle").eq(3).addclass("color");
$(".circle").eq(0).removeclass("color");
$(".circle").eq(1).removeclass("color");
$(".circle").eq(2).removeclass("color");
}
}
// 点击小圆点，对应相对的图。
$(".circle").on("click",function(){
window.clearinterval(timer);
qs();
$(this).addclass("color");
for(var j = 0;j < $(".circle").length;j++){
if($(".circle").eq(j).hasclass("color")){
$(".banner-img-ul").offset({left:535-450*j});
}
}
$(".banner-img-ul").mouseout();
})
//小圆点全变会灰。
function qs(){
$(".circle").eq(0).removeclass("color")
$(".circle").eq(1).removeclass("color")
$(".circle").eq(2).removeclass("color")
$(".circle").eq(3).removeclass("color")
}
</script>
</body>
</html>