今天教大家写一个轮播图，可以左右平移切换，很炫酷喔

最新推荐文章于 2024-01-27 11:25:33 发布

nihaishilaile

最新推荐文章于 2024-01-27 11:25:33 发布

阅读量1.2k

点赞数 1

分类专栏： jQuery 文章标签：轮播图 jQuery 好用推荐教学

本文链接：https://blog.csdn.net/nihaishilaile/article/details/103037649

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.首先，介绍这个过程用了什么方法以及技术。

	*主要是利用jQuery来编写这个轮播图，以后我会给带来跟多技术喔。*

2.布局，里面使用了几种比较常用的布局方式，包括弹性布局，定位布局。**

	还其他一些方法，例如溢出隐藏等小技巧。还有jQuery的each遍历，其中还包括点击事件、绑定事件等，同时还是是用了transform和translate的方法。最后还是用了定时器，对其进行自动轮播，以及轮播效果的清除。

3.话不多说，上代码

如果小伙伴们有什么疑问可以私信我一起交流喔

//<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .swiper {
            width: 800px;
            height: 600px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        
        .imgList {
            width: 800px;
            height: 600px;
            transform: translate(0, 0);
            transition: all 0.8s;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .imgList .imgItem {
            width: 800px;
            height: 600px;
            background-size: 100% 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .btn {
            width: 60px;
            height: 40px;
            line-height: 35px;
            text-align: center;
            font-size: 40px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.2);
            position: absolute;
            top: calc(50% - 20px);
        }
        
        .btn.pre {
            left: 0;
        }
        
        .btn.next {
            right: 0;
        }
        
        .circleList {
            width: 200px;
            height: 40px;
            position: absolute;
            right: 50px;
            bottom: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .circleList .circleItem {
            width: 7px;
            height: 7px;
            border-radius: 4px;
            border: 1px solid #ccc;
            background-color: #666666;
            margin: 0 2px;
        }
    </style>
</head>

<body>
    <div class="swiper">
        <div class="imgList">
            <div class="imgItem" style="background-image: url(img/1.jpg);"></div>
            <div class="imgItem" style="background-image: url(img/2.jpeg);"></div>
            <div class="imgItem" style="background-image: url(img/snsd.jpg);"></div>
            <div class="imgItem" style="background-image: url(img/shaonvshidai.jpg);"></div>
        </div>
        <div class="circleList">
            <div class="circleItem"></div>
            <div class="circleItem"></div>
            <div class="circleItem"></div>
            <div class="circleItem"></div>
        </div>
        <div class="btns">
            <div class="btn pre">
                <</div>
                    <div class="btn next">></div>
                    <script src="js/jquery-1.11.js"></script>
                    <script>
                        $(".imgItem").each(function(i, item) {
                            $(item).css("transform", "translate(" + i * 800 + "px,0)")
                        })

                        var page = 0;
                        $(".pre").on("click", function(e) {
                            page++
                            if (page >= $(".imgItem").length) {
                                page = 0
                            }
                            // 此处的-号并不是代表移动的方向，指的是具体的位置，list要移到具体的位置
                            $(".imgList").css("transform", "translate(-" + 800 * page + "px,0)")
                        })
                        $(".next").on("click", function(e) {
                                page--
                                if (page < 0) {
                                    page = $(".imgItem").length - 1
                                }
                                //此处的-号并不是代表移动的方向，指的是具体的位置，list要移到具体的位置
                                $(".imgList").css("transform", "translate(-" + 800 * page + "px,0)")
                            })
                            //设置一个定时器
                        var intervalId = setInterval(function() {
                            page++
                            if (page >= $(".imgItem").length) {
                                page = 0
                            }
                            // 此处的-号并不是代表移动的方向，指的是具体的位置，list要移到具体的位置
                            $(".imgList").css("transform", "translate(-" + 800 * page + "px,0)")
                        }, 3000)
                        $(".imgList").mouseover(function(e) {
                            clearInterval(intervalId)
                            console.log(123)
                        })
                        $(".imgList").mouseleave(function() {
                            //intervalId不能是一个局部变量，要是全局变量上面的mouseleave才能访问
                            intervalId = setInterval(function() {
                                page++
                                if (page >= $(".imgItem").length) {
                                    page = 0
                                }
                                // 此处的-号并不是代表移动的方向，指的是具体的位置，list要移到具体的位置
                                $(".imgList").css("transform", "translate(-" + 800 * page + "px,0)")
                            }, 3000)

                        })
                        $(".circleItem").on("click", function(e) {
                            var index = $(this).index()
                            $(".imgList").css("transform", "translate(-" + 800 * index + "px,0)")
                        })
                    </script>
</body>

</html>//

nihaishilaile

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
今天教大家写一个轮播图，可以左右平移切换，很炫酷喔

1.首先，介绍这个过程用了什么方法以及技术。 *主要是利用jQuery来编写这个轮播图，以后我会给带来跟多技术喔。*2.布局，里面使用了几种比较常用的布局方式，包括弹性布局，定位布局。** 还其他一些方法，例如溢出隐藏等小技巧。还有jQuery的each遍历，其中还包括点击事件、绑定事件等，同时还是是用了transform和translate的方法。最后还是用了定时器，对其进行自动轮播，以...
复制链接

扫一扫

专栏目录