页面轮播图片

最新推荐文章于 2024-08-30 16:48:59 发布

ღ小通

最新推荐文章于 2024-08-30 16:48:59 发布

阅读量126

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_56006962/article/details/120843135

版权

jQuery 图片轮播 DOM操作定时器事件监听

关键词由CSDN通过智能技术生成

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、提前工作

先引入jquery-2.2.4.js：

导入图片

2、源码：

先引入jquery-2.2.4.js：

链接: https://pan.baidu.com/s/1nEe0WrUokaPk5oqIk_15Lw 提取码: na29 复制这段内容后打开百度网盘手机App，操作更方便哦

导入图片

2、源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-2.2.4.js"></script>
    <style>

        ul, li {
            list-style: none;
        }
        img {
            border: none;
        }
        .clear {
            clear: both;
            zoom: 1;
        }
        .clear:after {
            content: '';
            height: 0;
            display: visibility;
            clear: both;
            overflow: hidden;
        }
        #box {
            top:120px;
            margin-right: auto;
            margin-left: auto;
            width:1040px;
            height: 300px;
            /*margin: 10px auto;*/
            position: relative;
        }
        #img {
            height: 100%;
        }
        #img img {
            width: 100%;
            height: 100%;
            display: none;
            border-radius: 3px;
        }
        #num li {
            float: left;
            background-color: gray;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            color: #fff;
            font-weight: bold;
            margin-left: 5px;
            cursor: pointer;
        }
        #num {
            position: absolute;
            bottom: 5px;
            right: 5px;
        }
        #num li:hover {
            background-color: #f80;
        }
        #num li.active {
            background-color: #f80;
        }
    </style>
    <script>

        $(function() {
            init();
            changImg(); //解决第一次第一张到第二张的时间间隔
            start();
            //document.getElementById('num').innerHTML ="hello";

        });
        //初始化
        function init() {
            var len = $('#img img').length; //获取图片有多少张
            var html = '';
            //拼html
            for (var i = 0; i < len; i++) {
                html += '<li onmouseover="changImg(' + i +
                        ')" onmouseout="reStart(' + i + ')">' + (i + 1) + '</li>';
            }
            //写进ul
            $('#num').html(html);
            //显示第一张图片
            $('#img img').first().css('display', 'block');
            //第一个数字背景颜色
            $('#num li').eq(0).addClass('active');
        }
        //图片轮播
        function changImg(num) {
            if (num == 'auto') { //定时器自动调用
                num = index;
            } else { //鼠标放上的时候 清楚定时器
                clearInterval(timer);
            }
            //链式写法
            $('#img img').eq(num).css('display', 'block').siblings().css('display',
                    'none');
            $('#num li').eq(num).addClass('active').siblings()
                    .removeClass('active');
            index++;
            if (index == $('#img img').length) { //最后一张
                index = 0; //第一张
            }
        }
        var index = 0;
        var timer; //定时器
        //定时器 播放
        function start() {
            timer = setInterval('changImg("auto")', 2000);
        }
        //鼠标离开之后 又要自动播放
        function reStart(num) {
            index = num;
            changImg(num);
            start();
        }
    </script>
</head>
<body>
    <div id="box">
        <div id="img">
            <img alt="" src="images/500x500-1.png" style="display: block;"> <img alt="" src="images/500x500-2.png" style="display: none;">
            <img alt="" src="images/500x500-3.png" style="display: none;"><img alt="" src="images/500x500-4.png" style="display: none;">
            <img alt="" src="images/500x500-5.png" style="display: none;"><img alt="" src="images/500x500-6.png" style="display: none;">
            <img alt="" src="images/500x500-7.png" style="display: none;"><img alt="" src="images/500x500-2.png" style="display: none;">
        </div>
        <ul id="num"><li onmouseover="changImg(0)" onmouseout="reStart(0)" class="active">1</li><li onmouseover="changImg(1)" onmouseout="reStart(1)" class="">2</li><li onmouseover="changImg(2)" onmouseout="reStart(2)" class="">3</li><li onmouseover="changImg(3)" onmouseout="reStart(3)" class="">4</li>
            <li onmouseover="changImg(4)" onmouseout="reStart(4)" class="">5</li><li onmouseover="changImg(5)" onmouseout="reStart(5)" class="">6</li><li onmouseover="changImg(6)" onmouseout="reStart(6)" class="">7</li><li onmouseover="changImg(7)" onmouseout="reStart(7)" class="">8</li>
        </ul>
    </div>

</body>
</html>

ღ小通

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面轮播图片

1、提前工作目录1、提前工作先引入jquery-2.2.4.js：导入图片2、源码：先引入jquery-2.2.4.js：链接: https://pan.baidu.com/s/1nEe0WrUokaPk5oqIk_15Lw 提取码: na29 复制这段内容后打开百度网盘手机App，操作更方便哦导入图片2、源码：<!DOCTYPE html><html lang="en"><head> <meta chars..
复制链接

扫一扫

专栏目录