JQ轮播图

最新推荐文章于 2025-12-15 14:43:56 发布

原创最新推荐文章于 2025-12-15 14:43:56 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

本文介绍了如何使用CSS进行基本布局，配合jQuery实现轮播图的滑动效果，并结合鼠标交互和点击按钮控制图片切换。通过简单的样式设置和事件处理，实现了图片轮播与点选导航功能。

本文通过css简单设置样式，效果由JQ实现

================================================

css样式

通过css样式设置点击按钮的位置与图片的静态方位

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 600px;
            height: 400px;
            overflow: hidden;
            margin: 0 auto;
            position: relative;
        }
        .list{
            width: 2400px;
            height: 400px;
            position: absolute;
        }
        .list::after{
            content: "";
            display: block;
            clear: both;
        }
        .list img{
            width: 600px;
            height: 400px;
            float: left;
        }

        .pointer{
            width: 100px;
            position: absolute;
            bottom: 20px;
            left: 250px;
        }
        .pointer span{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border-radius: 1px solid #fff;
            display: inline-block;
            background-color: #fff;
            cursor: pointer;
        }
        .pointer .on{
            background-color: #008c8c;
        }

        .right{
            width: 40px;
            height: 40px;
            position: absolute;
            top: 180px;
            right: 0;
            display: none;
            cursor: pointer;
        }
        .left{
            width: 40px;
            height: 40px;
            position: absolute;
            top: 180px;
            left: 0;
            display: none;
            cursor: pointer;
        }
        .container:hover .left{
            display: block;
        }
        .container:hover .right{
            display: block;
        }
    </style>

==============================================

轮播图div布局

<div class="container">
        <div class="list">
            <img src="./img/1.webp" alt="">
            <img src="./img/2.webp" alt="">
            <img src="./img/3.webp" alt="">
            <img src="./img/4.webp" alt=""> 
        </div>

        <div class="pointer">
            <span index = "1" class="on"></span>
            <span index = "2" ></span>
            <span index = "3" ></span>
            <span index = "4" ></span>
        </div>

        <div class="all">
            <div class="left"><img src="./img/left.png" alt=""></div>
            <div class="right"><img src="./img/right.png" alt=""></div>
        </div>
    </div>

============================================

JQ部分

1.将向右运动功能封装为一个函数

var imgW=$('.container .list img:first').innerWidth()
var n=0;
function play() {
         $(".list").animate({left: -imgW},function () {
             $(this).css("left",0).find("img:first").appendTo(this);
         })
         n++;
         if(n>3){
             n = 0;
         }
         $(".container .pointer span").eq(n).addClass("on").siblings().removeClass("on");
     }

2.轮播图定时自动向右

var timer = setInterval(function(){
            play();
        },2000)

3.鼠标移入/出时暂停/继续

$('.container').mouseenter(function(){
     clearInterval(timer);
})

$('.container').mouseleave(function(){
     timer = setInterval(function(){
        play();
     },2000)
})

4.点击左右切换按钮

 $('.right').click(function(){
     play();
 })


 $('.left').click(function(){
     $(".list").css("left",-imgW).find("img:last").prependTo(".list");
     $(".list").animate({left:0})
     n--;
     if(n<0){
         n = 3;
     }
     $(".container .pointer span").eq(n).addClass("on").siblings().removeClass("on");
})

5.点击圆点实现任意图片切换

 $(".pointer span").each(function (index) {
        $(this).click(function () {
            if(n < index){
                for(var i = n;i<index;i++){
                    $(".list").animate({left: -imgW},100,function () {
                        $(this).css("left",0).find("img:first").appendTo(this);
                    })
                }
            }else if(n>index){
                for(var i = n;i>index;i--){
                    $(".list").css("left",-imgW).find("img:last").prependTo(".list");
                    $(".list").animate({left:0},100);
                }
            }
            n = index;
            $(".pointer span").eq(n).addClass("on").siblings().removeClass("on");
        })

    })

==============================================

总体代码

<!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>
    <script src="./jquery-1.12.4.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 600px;
            height: 400px;
            overflow: hidden;
            margin: 0 auto;
            position: relative;
        }
        .list{
            width: 2400px;
            height: 400px;
            position: absolute;
        }
        .list::after{
            content: "";
            display: block;
            clear: both;
        }
        .list img{
            width: 600px;
            height: 400px;
            float: left;
        }

        .pointer{
            width: 100px;
            position: absolute;
            bottom: 20px;
            left: 250px;
        }
        .pointer span{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border-radius: 1px solid #fff;
            display: inline-block;
            background-color: #fff;
            cursor: pointer;
        }
        .pointer .on{
            background-color: #008c8c;
        }

        .right{
            width: 40px;
            height: 40px;
            position: absolute;
            top: 180px;
            right: 0;
            display: none;
            cursor: pointer;
        }
        .left{
            width: 40px;
            height: 40px;
            position: absolute;
            top: 180px;
            left: 0;
            display: none;
            cursor: pointer;
        }
        .container:hover .left{
            display: block;
        }
        .container:hover .right{
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="list">
            <img src="./img/1.webp" alt="">
            <img src="./img/2.webp" alt="">
            <img src="./img/3.webp" alt="">
            <img src="./img/4.webp" alt=""> 
        </div>

        <div class="pointer">
            <span index = "1" class="on"></span>
            <span index = "2" ></span>
            <span index = "3" ></span>
            <span index = "4" ></span>
        </div>

        <div class="all">
            <div class="left"><img src="./img/left.png" alt=""></div>
            <div class="right"><img src="./img/right.png" alt=""></div>
        </div>
    </div>

    <script>
        var imgW=$('.container .list img:first').innerWidth()
        var n=0;
        var timer = setInterval(function(){
            play();
        },2000)
        $('.container').mouseenter(function(){
            clearInterval(timer);
        })
        $('.container').mouseleave(function(){
            timer = setInterval(function(){
                play();
            },2000)
        })
        $('.right').click(function(){
            play();
        })
        $('.left').click(function(){
            $(".list").css("left",-imgW).find("img:last").prependTo(".list");
            $(".list").animate({left:0})
            n--;
            if(n<0){
                n = 3;/*n = $(".list li").length-1*/
            }
            $(".container .pointer span").eq(n).addClass("on").siblings().removeClass("on");
        })
        // 小圆点的功能 事件委托
        $(".pointer span").each(function (index) {
        $(this).click(function () {
            if(n < index){
                for(var i = n;i<index;i++){
                    $(".list").animate({left: -imgW},100,function () {
                        $(this).css("left",0).find("img:first").appendTo(this);
                    })
                }
            }else if(n>index){
                for(var i = n;i>index;i--){
                    $(".list").css("left",-imgW).find("img:last").prependTo(".list");
                    $(".list").animate({left:0},100);
                }
            }
            n = index;
            $(".pointer span").eq(n).addClass("on").siblings().removeClass("on");
        })

    })
        
        function play() {
            $(".list").animate({left: -imgW},function () {
                $(this).css("left",0).find("img:first").appendTo(this);
            })
            n++;
            if(n>3)/*if(n>$(".list img").length)-1*/{/*$(".list img").length)表示img的个数*/
                n = 0;
            }
            $(".container .pointer span").eq(n).addClass("on").siblings().removeClass("on");
        }
    </script>
</body>
</html>