jq不滑动变化的轮播，定时替换内容222

最新推荐文章于 2020-07-15 11:41:57 发布

avoidaily

最新推荐文章于 2020-07-15 11:41:57 发布

阅读量90

点赞数

分类专栏：工作笔记

本文链接：https://blog.csdn.net/qq_43459224/article/details/102989160

版权

工作笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!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:0px;
            padding:0px;
            border:0px;
        }
        ul{
            list-style-type:none;
            position:relative;
            bottom:30px;
            left:50%;
            overflow:hidden;
            width:120px;
            margin-left:-60px;
        }
        li{
            float:left;
            width:20px;
            height:20px;
            margin:2px;
            background-color:#999;
            border-radius:10px;
        }
        #box{
            width:520px;
            height:500px;
        }
        .li{
            background-color:#F30;
            cursor:pointer;
        }
    </style>
</head>
<script src="../res/static/js/jquery-1.11.3.js"></script>
<body>
    <div id="box">
        <!-- <img src="http://www.jq22.com/img/cs/500x500-1.png" id="banner"> -->
        <img src="./img/1.png" id="banner">
        <!-- <ul>
            <li onmouseover="changeimg(0)" onmouseout="startTime()"></li>
            <li onmouseover="changeimg(1)" onmouseout="startTime()"></li>
            <li onmouseover="changeimg(2)" onmouseout="startTime()"></li>
            <li onmouseover="changeimg(3)" onmouseout="startTime()"></li>
            <li onmouseover="changeimg(4)" onmouseout="startTime()"></li>
        </ul> -->
    </div>
</body>

<script>
    var imgs = new Array(); // 图片数组
    imgs[0] = "./img/1.png";
    imgs[1] = "./img/2.png";
    imgs[2] = "./img/3.png";
    imgs[3] = "./img/4.png";
    imgs[4] = "./img/5.png";
    console.log(imgs.length)
    var nowSize = 0;
    var maxSize = 4;
    // var maxSize = imgs.length;

function changeimg(index) {
    //如果定时器执行函数的时候，则index是未定义，也就满足了isNaN
    if (isNaN(index)) {
        index = nowSize;
    } else {
        //如果鼠标靠近小图标的时候，则清除定时器，并且让当前显示的图片下标为鼠标靠近的小图标的下标
        clearInterval(time);
        nowSize = index;
    }
    // var li = document.getElementsByTagName("li");
    // console.log(li.length)

    var a=document.getElementById("banner").src = imgs[index];
    console.log(a)
    // for (var i = 0; i < imgs.length; i++) {
    //     if (index == i) {
    //         li[i].className = "li";
    //     } else {
    //         li[i].className = "";
    //     }
    // }
    if (nowSize <= maxSize) {
        nowSize++;
    }
    if (nowSize > maxSize) {
        nowSize = 0;
    }
}
var time = setInterval(changeimg, 1000);

// function startTime() {
//     time = setInterval(changeimg, 1000);
// }


</script>
</html>

avoidaily

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq不滑动变化的轮播，定时替换内容222

<!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-U...
复制链接

扫一扫