HTML + jQuery 实现轮播图

简介: HTML + jQuery 实现轮播图

轮播图案例

思路整理:

一:HTML页面部分

1、首先创建可视窗口添加6张图片,添加CSS样式

2、添加左右切换按钮,设置样式

3、添加图片导航器,设置样式,添加悬停样式

示例代码如下:

    <style>
        .container {
            width: 1226px;
            height: 460px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }
        .img-list {
            width: 7356px;
            height: 460px;
            position: absolute;
            /* 相对于父级移动 */
        }
        .img-list img {
            width: 1226px;
            height: 460px;
            display: block;
            float: left;
        }
        .img-controls {
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            overflow: hidden;
        }
        .img-controls #left,
        #right {
            width: 41px;
            height: 69px;
            display: block;
        }
        .img-controls #left {
            background-image: url("../imgs/icon-slides.png");
            background-repeat: no-repeat;
            background-position: -84px 50%;
        }
        .img-controls #left:hover {
            background-image: url("../imgs/icon-slides.png");
            background-repeat: no-repeat;
            background-position: 0 50%;
        }
        .img-controls #right {
            background-image: url("../imgs/icon-slides.png");
            background-repeat: no-repeat;
            background-position: -125px 50%;
            position: absolute;
            right: 0px;
            top: 0%;
        }
        .img-controls #right:hover {
            background-image: url("../imgs/icon-slides.png");
            background-repeat: no-repeat;
            background-position: -42px 50%;
        }
        .img-direction {
            list-style: none;
            padding: 0;
            margin: 0;
            overflow: hidden;
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
        .img-direction li {
            width: 8px;
            height: 8px;
            background-color: rgba(0, 0, 0, 0.4);
            border: 2px solid #fff;
            border-color: rgba(255, 255, 255, 0.3);
            border-radius: 6px;
            margin: 0 5px;
            float: left;
        }
        /* .img-direction li:hover {
            background-color: #f5f5f5;
            border-color: rgba(0, 0, 0, 0.4);
            cursor: pointer;
            /* 设置鼠标样式 
        } */
        #img-direction .active {
            background-color: #f5f5f5;
            border-color: rgba(0, 0, 0, 0.4);
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 可视窗口 -->
    <div class="container">
        <div class="img-list">
            <img src="../imgs/1.jpg">
            <img src="../imgs/2.jpg">
            <img src="../imgs/3.jpg">
            <img src="../imgs/4.jpg">
            <img src="../imgs/5.jpg">
            <img src="../imgs/2.jpg">
        </div>
        <!--    左右切换按钮-->
        <div class="img-controls">
            <a href="#" id="left"></a>
            <a href="#" id="right"></a>
        </div>
        <!--    图片导航器-->
        <ul id="img-direction" class="img-direction">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

HTML部分静态效果图:

二、javascript部分

1、实现点击按钮达到左右切换图片的效果。

2、实现图片导航器的切换效果,并绑定上对应的图片。

3、添加切换图片实现淡入淡出效果。

4、实现自动轮播效果。

javascript部分代码如下:

<script>
    var $imgList = $('.img-list'); //获取图片容器元素
    var listLeft = parseInt($imgList.css('left')); //获取图片容器当前的left的属性值
    var $imgs = $('.img-list>img') //获取所有图片
    var imgSum = $imgs.length; //获取所有图片的数量
    const WIDTH = parseInt($('.container').css('width')); //获取可视窗口的宽度
    var $imgDir = $('.img-direction>li'); //获取图片当行器中所有<li>元素
    var index = 0; //表示当前切换图片的索引值
    // 向右切换按钮的逻辑 - 所有图片的容器向左移动
    $('#right').click(function (event) {
        // 为当前动画添加动画
        $($imgs[index]).animate({
            opacity: 0
        }, 200, function () {
            if (index < (imgSum - 1)) {
                // 1、将图片的索引值进行更新
                index++;
                //2、将图片容器当前的left属性值减少1226px
                listLeft -= WIDTH;
            } else {
                // 1、将图片的索引值进行更新为第一章图片
                index = 0;
                // 2、将图片容器当前的left属性值更新为0
                listLeft = 0;
            }
            // 3、将更新后的left属性值重新为图片容器进行设置
            $imgList.css('left', listLeft);
            // 4、根据当前图片的索引值,查找对应的图片导航器
            $($imgDir[index]).addClass('active').siblings('li').removeClass();
        })
        event.preventDefault(); //阻止默认行为
    });
    // 向左切换按钮的逻辑 - 所有图片的容器向右移动
    $('#left').click(function (event) {
        // 为当前图片添加动画
        $($imgs[index]).animate({
            opacity: 0
        }, 200, function () {
            if (index > 0) {
                // 1、将图片的索引值进行更新
                index--;
                //2、将图片容器当前的left属性值增加1226px
                listLeft += WIDTH;
            } else if (index == 0) {
                // 1、将图片的索引值进行更新为第一张图片
                index = imgSum - 1;
                // 2、将图片容器当前的left属性值更新
                listLeft = -index * WIDTH;
            }
            // 3、将更新后的left属性值重新为图片容器进行设置
            $imgList.css('left', listLeft);
            // 4、根据当前图片的索引值,查找对应的图片导航器
            $($imgDir[index]).addClass('active').siblings('li').removeClass();
        })
        event.preventDefault(); //阻止默认行为
    });
    // 图片导航器
    var $imgDir = $('.img-direction>li');
    $imgDir.mouseover(function () {
        // 1、实现图片导航器的切换效果
        $(this).addClass('active').siblings('li').removeClass();
        /* 2、根据当前图片导航器的切换效果
            $.inArray(value,arr)
            * value - 表示在指定数组或集合中查找的数据
            * arr - 表示数组或集合
        */
        index = $.inArray(this, $imgDir);
        listLeft = -index * WIDTH;
        $imgList.css('left', listLeft);
    });
    // 自动轮播效果
    setInterval(function () {
        if (index < (imgSum - 1)) {
            // 1、将图片的索引值进行更新
            index++;
            //2、将图片容器当前的left属性值减少1226px
            listLeft -= WIDTH;
        } else {
            // 1、将图片的索引值进行更新为第一章图片
            index = 0;
            // 2、将图片容器当前的left属性值更新为0
            listLeft = 0;
        }
        // 3、将更新后的left属性值重新为图片容器进行设置
        $imgList.css('left', listLeft);
        // 4、根据当前图片的索引值,查找对应的图片导航器
        $($imgDir[index]).addClass('active').siblings('li').removeClass();
    }, 800);
    /* 
    模拟事件实现自动轮播,但实现效果轮播速度太快
    function mytrigger(){
        $('#right').trigger('click');
        mytrigger();
    }
    mytrigger(); */
</script>

综合效果如下所示:

三:遇到的问题

1、setInterval()方法:可按照指定的周期(以毫秒计)来调用函数或计算表达式。


setInterval()方法会不停地调用函数,直到 clearInterval()被调用或窗口被关闭。


2、自动轮播效果与淡入淡出效果有冲突,自动轮播后会改变opacity的值为0。使用时需要注意。


附上一张左右切换按键图:

使用jQuery需要在HTML页面引入此链接,文件才可以运行:

<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.0.0/jquery.min.js"></script>


目录
相关文章
|
2月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
83 0
|
28天前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js
|
1月前
|
JavaScript 前端开发 索引
jQuery如何实现一个轮播图左右翻页的功能
jQuery如何实现一个轮播图左右翻页的功能
17 0
|
1月前
切方块游戏 HTML5+jQuery【附源码】
切方块游戏 HTML5+jQuery【附源码】
16 0
|
1月前
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
31 0
|
2月前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
|
2月前
|
JavaScript
jquery给轮播图的第一张设置class样式
jquery给轮播图的第一张设置class样式
|
2月前
|
JavaScript 前端开发 CDN
jQuery文件下载方法及引入HTML语法
去jQuery网站下载文件包,点击主页的“Download”之后,进入下载页面,可以选择production版本的进行下载,但是点击进去之后,浏览器并不会直接下载相关的文件,而是跳转到一个“密密麻麻”都是jQuery代码的页面,仔细查看浏览器地址栏中的url便可知,该页面其实就是jQuery的min版的文件,可以使用下面这种方法,下载jQuery文件
88 5
|
2月前
|
Java 数据库 Maven
基于springboot颐养中心商城前台系统(springboot+mybatis+maven+html+jquery+css)
基于springboot颐养中心商城前台系统(springboot+mybatis+maven+html+jquery+css)
|
8月前
|
存储 JavaScript 前端开发
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
83 1