jQuery点击图片淡入淡出

博主： literature
发布时间：2023 年 08 月 27 日
233 次浏览
关闭评论
2452字数
分类：主机教程




    
    无标题文档

最后修改：2023 年 08 月 27 日

如果觉得我的文章对你有用，请随意赞赏

此处评论已关闭

jQuery点击图片淡入淡出

literature • 2023 年 08 月 27 日

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        .aa {
            width: 990px;
            height: 360px;
            border: 3px #F00 solid;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        
        .aa .pic li {
            width: 990px;
            height: 360px;
            list-style: none;
            float: left
        }
        
        .aa .pic li img {
            width: 990px;
            height: 360px;
        }
        
        .aa .list {
            width: 200px;
            height: 40px;
            position: absolute;
            right: 100px;
            bottom: 20px
        }
        
        .aa .list li {
            width: 25px;
            height: 25px;
            list-style: none;
            float: left;
            text-align: center;
            line-height: 25px;
            background: #FCB400;
            border-radius: 50%;
            margin: 5px;
            cursor: pointer
        }
        
        .aa .list li.on {
            background: #C50A0E;
            color: #FFF
        }
    </style>
    <script src="https://www.xxhzm.cn/jq.js"></script>
    <script>
        $(function() {
            let w = $('.aa .pic li').width()
            let n = $('.aa .pic li').length
            $('.aa .pic ul').width(n * w)

let btn = '<ul>'
            for (let i = 0; i < n; i++) {
                btn = btn + '<li>' + (i + 1) + '</li>'
            }
            btn = btn + '</ul>'
            $(btn).appendTo($('.list')).find('li').first().addClass('on')

function move() {
                let i = $('.aa .list li').index($('.aa .list li.on'))
                if (i == n - 1) {
                    i = 0
                } else {
                    i = i + 1 //下一个
                }

$('.aa .list li').eq(i).addClass('on').siblings().removeClass('on')
                $('.aa .pic li').hide().eq(i).fadeIn(500)
            }

timer = setInterval(move, 2000)

$('.aa .list li').click(function() {
                let i = $('.aa .list li').index(this)
                $('.aa .pic li').hide().eq(i).fadeIn(500)
                $(this).addClass('on').siblings('li').removeClass('on')
            })

$('.aa').mouseenter(function() {
                clearInterval(timer)
            })

$('.aa').mouseleave(function() {
                timer = setInterval(move, 2000)
            })
        })
    </script>
</head>

</html>

</code></pre>

jQuery点击图片淡入淡出

live/msn等微软绝版邮箱详细的注册教程

欢迎使用 Typecho

一个功能强大又好用的RSS订阅器：FreshRSS安装教程

使用Aria2下载BT磁力的时候，速度慢或者没速度的解决方法

VPS使用BaiduPCS-Go高速下载百度网盘的文件，支持上传/离线下载等操作

飞机跟随鼠标动画404页面模板源码

救援服务器的记录

Speedpan：百度网盘满速下载工具，无需登录，也可直接下载BT种子

简易物联网插线板

多功能VestaCP全家桶套件一键安装脚本，文件管理器已破解

jQuery点击图片淡入淡出