1.普通轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 560px;
height: 300px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.content{
font-size: 0;
width: 3000px;
height: 300px;
display: inline-block;
position: absolute;
}
.btns{
position: absolute;
bottom: 30px;
width: 560px;
text-align: center;
}
.btns span{
padding: 6px;
border-radius: 50%;
background-color: white;
font-size: 0px;
margin: 0 8px;
}
.btns .choose{
background-color: red;
}
.pre,
.next{
position: absolute;
top: 50%;
color: white;
font-size: 30px;
right: 0px;
height: 50px;
width: 30px;
text-align: center;
line-height: 50px;
background-color: rgba(0,0,0,0.6);
}
.pre{
left: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<img src="img/0.jpg" alt="">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
</div>
<div class="btns">
<span class="choose"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="pre"><</div>
<div class="next">></div>
</div>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
var $img = $('.content');
var $btns = $('.btns span');
var $pre = $('.pre');
var $next = $('.next');
var index =0;
var timebar;
function startInterval(){
timebar = setInterval(function(){
if(index >=4){
index = 0;
}else{
index++;
}
change();
},2000);
}
function change(fn){
$img.stop(true).animate({left: -560*index},800);
$btns.eq(index).addClass('choose');
$btns.eq(index).siblings().removeClass('choose');
fn && fn();
}
startInterval();
$pre.click(function(){
clearInterval(timebar);
if(index <= 0){
index = 4;
}else{
index--;
}
change(startInterval);
})
$next.click(function(){
clearInterval(timebar);
if(index >= 4){
index = 0;
}else{
index++;
}
change(startInterval);
})
$btns.click(function(){
clearInterval(timebar);
index = $(this).index();
change(startInterval);
})
</script>
</body>
</html>
2.猫腻轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 560px;
height: 300px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.content{
font-size: 0;
width: 5000px;
height: 300px;
display: inline-block;
position: absolute;
}
.btns{
position: absolute;
bottom: 30px;
width: 560px;
text-align: center;
}
.btns span{
padding: 6px;
border-radius: 50%;
background-color: white;
font-size: 0px;
margin: 0 8px;
}
.btns .choose{
background-color: red;
}
.pre,
.next{
position: absolute;
top: 50%;
color: white;
font-size: 30px;
right: 0px;
height: 50px;
width: 30px;
text-align: center;
line-height: 50px;
background-color: rgba(0,0,0,0.6);
}
.pre{
left: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<img src="img/4.jpg" alt="">
<img src="img/0.jpg" alt="">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/0.jpg" alt="">
</div>
<div class="btns">
<span class="choose"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="pre"><</div>
<div class="next">></div>
</div>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
var $img = $('.content');
var $btns = $('.btns span');
var $pre = $('.pre');
var $next = $('.next');
var index = 1;
var timebar;
function startInterval(){
timebar = setInterval(function(){
index ++;
if(index >= 7){
index = 0;
}
change();
},2000);
}
function change(fn){
$img.stop(true).animate({left: -560*index},500,function(){
if(index === 6){
index = 1;
$img.css('left',-560*index);
}else if(index ===0){
index = 5;
$img.css('left',-560*index)
}
$btns.eq(index-1).addClass('choose');
$btns.eq(index-1).siblings().removeClass('choose');
fn && fn();
});
}
$img.css('left',-560*index);
startInterval();
$pre.click(function(){
clearInterval(timebar);
index--;
if(index < 0){
index = 4;
}
change(startInterval);
})
$next.click(function(){
clearInterval(timebar);
index++;
if (index >= 7) {
index = 0;
}
change(startInterval);
})
$btns.click(function(){
clearInterval(timebar);
index = $(this).index()+1;
change(startInterval);
})
</script>
</body>
</html>
3.最后一张设置猫腻图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 560px;
height: 300px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.content{
font-size: 0;
width: 5000px;
height: 300px;
display: inline-block;
position: absolute;
}
.btns{
position: absolute;
bottom: 30px;
width: 560px;
text-align: center;
}
.btns span{
padding: 6px;
border-radius: 50%;
background-color: white;
font-size: 0px;
margin: 0 8px;
}
.btns .choose{
background-color: red;
}
.pre,
.next{
position: absolute;
top: 50%;
color: white;
font-size: 30px;
right: 0px;
height: 50px;
width: 30px;
text-align: center;
line-height: 50px;
background-color: rgba(0,0,0,0.6);
}
.pre{
left: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<img src="img/0.jpg" alt="">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/0.jpg" alt="">
</div>
<div class="btns">
<span class="choose"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="pre"><</div>
<div class="next">></div>
</div>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
var $img = $('.content');
var $btns = $('.btns span');
var $pre = $('.pre');
var $next = $('.next');
var index = 0;
var timebar;
function startInterval(){
timebar = setInterval(function(){
index ++;
if(index >= 6){
index = 0;
}
change();
},2000);
}
function change(fn){
$img.stop(true).animate({left: -560*index},500,function(){
if(index === 5){
index = 0;
$img.css('left',-560*index);
}
$btns.eq(index).addClass('choose');
$btns.eq(index).siblings().removeClass('choose');
fn && fn();
});
}
$img.css('left',-560*index);
startInterval();
$pre.click(function(){
clearInterval(timebar);
index--;
if(index < 0){
index = 4;
$img.css('left',-560*5)
}
change(startInterval);
})
$next.click(function(){
clearInterval(timebar);
index++;
if (index >= 6) {
index = 0;
}
change(startInterval);
})
$btns.click(function(){
clearInterval(timebar);
index = $(this).index();
change(startInterval);
})
</script>
</body>
</html>
4.三点轮播图