juqey 实现轮播图

秋叶霜海

已于 2023-09-06 13:51:43 修改

阅读量54

点赞数 1

文章标签：前端 javascript html5 css jquery

于 2023-09-06 13:44:59 首次发布

本文链接：https://blog.csdn.net/qq_65940308/article/details/132713189

版权

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>