1、首先,先制作一个div图框,用来显示轮播图图片
<div>
<img>
</div>
2、给图片添加左右按钮,开始轮播按钮,轮播图示
<div>
<img>
<input type="button" class="btnleft" value="左翻">
<input type="button" class="btnright" value="右翻">
<input class="btn1" type="button" value="开始轮播" alt="1">
<ul>
<li style="color: red;">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
3、给div设置框架,设置按钮的位置
<style>
*{
margin: 0%;
}
div{
margin-left: 40%;
margin-top: 80px;
height: 400px;
width: 400px;
padding:0%;
border: 1px solid rgba(0,0,200,0.7);
position: relative;//设置div定位布局
}
img{
/* clip-path: circle(); */
width: 100%;
height: 100%;
margin: auto;
}
.btn1{
margin-left: 45%;
margin-top: 10%;
background-color: rgb(232, 216, 216);
}
.btnleft{
background-color: aqua;
position: absolute;
height: 20px;
width: 40px;
left: 0%;
top: 50%;
}
.btnright{
background-color: aqua;
position: absolute;//左右按钮实现绝对布局
height: 20px;
width: 40px;
top: 50%;
right: 0%;
float: right;
}
ul{
float: left;
position: absolute;
left: 30%;
bottom: 0%;
}
li{
color: rgb(0, 0, 0);
font-size: 2px;
text-align: center;
border: 1px solid black;
border-radius: 100%;
list-style-type: none; //去除无序列表的点
float: left; // 制作为横向
width: 12px;
height: 12px;
margin: 3px;
padding: 3px;
}
</style>
4、写出轮播响应函数
$(document).ready(function(){
var imgarray=["https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F13632235-fcd8-4c08-bedf-68e8234200ca%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696427693&t=69f3fc2f4b705e7dd10fed6960beffaf",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fb2b1fa13-a8a3-4dcc-86ae-492807ca044a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696427693&t=e81089031b85502e726b74305c2339e2",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F5cb752f3-e3a5-4ac8-8760-9775718674f7%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696427693&t=6d4a60e398baf9d0b22bfa65fd3caa1b"];
var imgIndex = 0; // 记录当前图片的索引
var lunbo //定义时间函数变量
$("img").attr("src", imgarray[imgIndex]);
function m(){ //定义轮播图函数
if(imgIndex<imgarray.length-1){
imgIndex++;
$("img").attr("src", imgarray[imgIndex]);
$("li").css("color","black");
$(`li:eq(${imgIndex})`).css("color","red");
} // 切换到下一张图片
else if (imgIndex == imgarray.length-1) {
// clearInterval(lunbo);
imgIndex = 0; // 重置索引值,
$("li").css("color","black");//重置所有圆点颜色
$(`li:eq(${imgIndex})`).css("color","red");//设置下面圆点随图片的变化而变化
$("img").attr("src", imgarray[imgIndex]);//设置图片
}
}
5、给按钮添加响应事件
$("input:button[alt=1]").click(function(){ //点击开始轮播
lunbo=setInterval(m,2000);
});
$("input:button:eq(0)").click(function(){ //左翻图片
clearInterval(lunbo);
if(imgIndex==0){
imgIndex=imgarray.length-1;
$("li").css("color","black");
$(`li:eq(${imgIndex})`).css("color","red");
$("img").attr("src", imgarray[imgIndex]);
}else{
imgIndex--;
$("li").css("color","black");
$(`li:eq(${imgIndex})`).css("color","red");
$("img").attr("src", imgarray[imgIndex]);
}
lunbo=setInterval(m,2000);
})
$("input:button:eq(1)").click(function(){ //右翻图片
clearInterval(lunbo);
if(imgIndex==imgarray.length-1){
console.log("........");
imgIndex=0;
$("li").css("color","black");
$(`li:eq(${imgIndex})`).css("color","red");
$("img").attr("src", imgarray[imgIndex]); //给图片设置src属性值
}else{
imgIndex++;
$("li").css("color","black");
$(`li:eq(${imgIndex})`).css("color","red");
$("img").attr("src", imgarray[imgIndex]);
}
lunbo=setInterval(m,2000);
});
6、全局代码(注:其中轮播图图片来源于百度,)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery轮播图</title>
<style>
*{
margin: 0%;
}
div{
margin-left: 40%;
margin-top: 80px;
height: 400px;
width: 400px;
padding:0%;
border: 1px solid rgba(0,0,200,0.7);
position: relative;
}
img{
/* clip-path: circle(); */
width: 100%;
height: 100%;
margin: auto;
}
.btn1{
margin-left: 45%;
margin-top: 10%;
background-color: rgb(232, 216, 216);
}
.btnleft{
background-color: aquamarine;
position: absolute;
height: 20px;
width: 40px;
left: 0%;
top: 50%;
}
.btnright{
background-color: aqua;
position: absolute;
height: 20px;
width: 40px;
top: 50%;
right: 0%;
float: right;
}
ul{
float: left;
position: absolute;
left: 30%;
bottom: 0%;
}
li{
color: rgb(0, 0, 0);
font-size: 2px;
text-align: center;
border: 1px solid black;
border-radius: 100%;
list-style-type: none;
float: left;
width: 12px;
height: 12px;
margin: 3px;
padding: 3px;
}
</style>
</head>
<body>
<h1 style="text-align: center;">jQuery轮播图</h1>
<div>
<img>
<input type="button" class="btnleft" value="左翻">
<input type="button" class="btnright" value="右翻">
<input class="btn1" type="button" value="开始轮播" alt="1">
<ul>
<li style="color: red;">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script src="..\jquery.min.js"></script>
<script>
$(document).ready(function(){
var imgarray=["https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F13632235-fcd8-4c08-bedf-68e8234200ca%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696427693&t=69f3fc2f4b705e7dd10fed6960beffaf",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fb2b1fa13-a8a3-4dcc-86ae-492807ca044a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696427693&t=e81089031b85502e726b74305c2339e2",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F5cb752f3-e3a5-4ac8-8760-9775718674f7%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1696427693&t=6d4a60e398baf9d0b22bfa65fd3caa1b"];
var imgIndex = 0; // 记录当前图片的索引
var lunbo //定义时间函数变量
$("img").attr("src", imgarray[imgIndex]);
function m(){ //定义轮播图函数
if(imgIndex<imgarray.length-1){
imgIndex++;
$("img").attr("src", imgarray[imgIndex]);
$("li").css("color","black");
$(`li:eq(${imgIndex})`).css("color","red");
} // 切换到下一张图片
else if (imgIndex == imgarray.length-1) {
// clearInterval(lunbo);
imgIndex = 0; // 重置索引值,
$("li").css("color","black");//重置所有圆点颜色
$(`li:eq(${imgIndex})`).css("color","red");//设置下面圆点随图片的变化而变化
$("img").attr("src", imgarray[imgIndex]);//设置图片
}
}
$("input:button[alt=1]").click(function(){ //点击开始轮播
lunbo=setInterval(m,2000);
});
$("input:button:eq(0)").click(function(){ //左翻图片
clearInterval(lunbo);
if(imgIndex==0){
imgIndex=imgarray.length-1;
$("li").css("color","black");
$(`li:eq(${imgIndex})`).css("color","red");
$("img").attr("src", imgarray[imgIndex]);
}else{
imgIndex--;
$("li").css("color","black");
$(`li:eq(${imgIndex})`).css("color","red");
$("img").attr("src", imgarray[imgIndex]);
}
lunbo=setInterval(m,2000);
})
$("input:button:eq(1)").click(function(){ //右翻图片
clearInterval(lunbo);
if(imgIndex==imgarray.length-1){
console.log("........");
imgIndex=0;
$("li").css("color","black");
$(`li:eq(${imgIndex})`).css("color","red");
$("img").attr("src", imgarray[imgIndex]); //给图片设置src属性值
}else{
imgIndex++;
$("li").css("color","black");
$(`li:eq(${imgIndex})`).css("color","red");
$("img").attr("src", imgarray[imgIndex]);
}
lunbo=setInterval(m,2000);
});
});
</script>
</body>
</html>