呼吸轮播图制作

最新推荐文章于 2024-07-13 09:19:02 发布

冲呀web

最新推荐文章于 2024-07-13 09:19:02 发布

阅读量167

点赞数

分类专栏： jquery 文章标签： html javascript jquery

本文链接：https://blog.csdn.net/weixin_44698566/article/details/106861895

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一，技术分析：
1.html,
2.javascript
3.jquery
二，思路分析
html将界面写好,设置好左右按钮，以及图片对应的下标圆点，设置好信号量，信号量的改变来控制图片的进出和下标圆点的改变。
三，代码如下：


<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .carousel {
            width: 900px;
            height: 560px;
            border: 1px solid red;
            position: relative;
            margin: 50px auto;
        }
        li {
            list-style: none;
        } 
        .carousel ul li {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: none;    
        }
        .carousel ul li img {
            width: 100%;
            height: 100%;
        }
        .carousel ul li.cur {
            display: block;
        }
        .carousel .btns  a {
            position: absolute;
            top: 50%;
            width: 30px;
            height: 60px;
            margin-top: -30px;
            text-align: center;
            color: white;
            background-color: rgba(0, 0, 0, .5);
            font-size: 30px;
            text-decoration: none;
            line-height: 60px;
        }
        .carousel .btns  a:nth-child(1) {
            left: 30px;
        }
        .carousel .btns  a:nth-child(2) {
            right: 30px;
        }
        .carousel .circles {
            position: absolute;
            left: 50%;
            width: 210px;
            margin-left: -100px;
            /* background-color: red; */
            bottom: 50px;
            height: 20px;
        }
        .carousel .circles li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: orange;
            margin-right: 10px;
            float: left;
            text-align: center;
            line-height: 20px;
        }
        .carousel .circles li.active {
            background-color: white;
        }
    </style>
</head>
<body>
    <div id="carousel" class="carousel">
        <ul id="imgs">
            <li class="cur"><img src="images/aoyun/0.jpg" alt=""></li>
            <li><img src="images/aoyun/1.jpg" alt=""></li>
            <li><img src="images/aoyun/2.jpg" alt=""></li>
            <li><img src="images/aoyun/3.jpg" alt=""></li>
            <li><img src="images/aoyun/4.jpg" alt=""></li>
            <li><img src="images/aoyun/5.jpg" alt=""></li>
            <li><img src="images/aoyun/6.jpg" alt=""></li>
        </ul>
        <ol class="circles" id="circles">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ol>
        <div class="btns">
            <a href="javascript:void(0);">&lt;</a>
            <a href="javascript:void(0);">&gt;</a>
        </div>
    </div>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script>
    // 获得元素对象
    // 获得carousel容器
    var $carousel = $('#carousel'); 
    // 图片
    var $imgs = $('#imgs li');
    // 小圆点
    var $circles = $('#circles li');
    // 左键
    var $leftBtn = $('.btns a').eq(0);
    // 右键
    var $rightBtn = $('.btns a').eq(1);
    // 获取所有图片的长度
    var length = $imgs.length;
    // 信号量
    var idx = 0;

    // 绑定右键点击事件
    $rightBtn.click(function() {
        // 防流氓
        if ($imgs.is(':animated')) {
            return;
        }
        // 当前图片淡出
        $imgs.eq(idx).fadeOut(400);
        // 改变信号量
        idx++;
        // 判断边界
        if (idx > length - 1) {
            // 重置信号量
            idx = 0;
        }
        // 下一张图片淡入
        $imgs.eq(idx).fadeIn(400);
        // 对应的小圆点变白
        changeWhite(idx);
        

    });

    // 绑定左键点击事件
    $leftBtn.click(function() {
        // 防流氓
        if ($imgs.is(':animated')) {
            return;
        }
        // 当前图片淡出
        $imgs.eq(idx).fadeOut(400);
        // 改变信号量
        idx--;
        // 判断边界
        if (idx < 0) {
            // 重置信号量
            idx = length - 1;
        }
        // 下一张图片淡入
        $imgs.eq(idx).fadeIn(400);
        // 对应的小圆点变白
        changeWhite(idx);
        

    });

    // 小圆点事件
    $circles.mouseenter(function() {
        // 防流氓---停止所有的动画
        $imgs.stop(true,true);
        // 当前图片淡出
        $imgs.eq(idx).fadeOut(400);

        // 对应小圆点的图片淡入
        // 获得当前小圆点的索引
        var index = $(this).index();
        // 更改信号量
        idx = index;
        // 去对应的集合中找到对应的元素
        $imgs.eq(idx).fadeIn(400);
        // 小圆点变白
        changeWhite(idx);
    });


    // 封装一个函数，小圆点变白
    function changeWhite(index) {
        // 当前index索引对应的小圆点变白，其他的小圆点编程橙色
        $circles.eq(index).addClass('active').siblings().removeClass('active');
    }

    // 给carousel绑定鼠标移入事件和移出事件
    // 移入
    $carousel.mouseenter(function() {
        console.log(111);
        clearInterval(timer);
    });

    // 移出
    $carousel.mouseleave(function() {
        timer = setInterval(function() {
         // 防流氓
         if ($imgs.is(':animated')) {
            return;
        }
        // 当前图片淡出
        $imgs.eq(idx).fadeOut(400);
        // 改变信号量
        idx++;
        // 判断边界
        if (idx > length - 1) {
            // 重置信号量
            idx = 0;
        }
        // 下一张图片淡入
        $imgs.eq(idx).fadeIn(400);
        // 对应的小圆点变白
        changeWhite(idx);
    }, 2000);
    });

    // 定时器
    var timer = setInterval(function() {
         // 防流氓
         if ($imgs.is(':animated')) {
            return;
        }
        // 当前图片淡出
        $imgs.eq(idx).fadeOut(400);
        // 改变信号量
        idx++;
        // 判断边界
        if (idx > length - 1) {
            // 重置信号量
            idx = 0;
        }
        // 下一张图片淡入
        $imgs.eq(idx).fadeIn(400);
        // 对应的小圆点变白
        changeWhite(idx);
    }, 2000);
    </script>
</body>
</html>

冲呀web

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
呼吸轮播图制作

一，技术分析：1.html,2.javascript3.jquery二，思路分析html将界面写好,设置好左右按钮，以及图片对应的下标圆点，设置好信号量，信号量的改变来控制图片的进出和下标圆点的改变。三，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device
复制链接

扫一扫