给html页面图片制造滚动效果（详细注释）

最新推荐文章于 2024-07-24 17:02:26 发布

氏族归来

最新推荐文章于 2024-07-24 17:02:26 发布

阅读量9.6k

点赞数 9

分类专栏：网站文章标签： html js

原文链接：https://blog.csdn.net/weixin_43751022/article/details/84330552

版权

网站专栏收录该内容

4 篇文章 0 订阅

订阅专栏

给html页面图片制造滚动效果

html部分源码
css部分源码
javascript部分源码

html部分源码

设置4个图片div

<body>
    <div class="nivoSlider" style="height: 200px;width: 780px; οnmοuseοver="stop()" οnmοuseοut="start()">
        <div class="slide">
            <img src="./static/xinjiang/banner.jpg" s>
        </div>
        <div class="slide">
            <img src="./static/xinjiang/carousel1.jpeg" s>
        </div>
        <div class="slide">
            <img src="./static/xinjiang/carousel2.jpeg" s>
        </div>
        <div class="slide">
            <img src="./static/xinjiang/carousel3.jpeg" s>
        </div>

    </div>
</body>

css部分源码

记得将高度和宽度调好

.nivoSlider {   /*轮换图片的大小*/
    position: relative;
    width: 780px;
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
}

.nivoSlider .slide{
    width: 780px;
    height: 200px;
    position: absolute;
}

javascript部分源码

<!-- 为整个页面添加onload加载完成事件，当浏览器打开并加载完并自动执行事件中的代码块 -->
<!-- 当页面加载完全，四个div（图片）应该并列在一起。 -->
<script type="text/javascript">
    onload = function () {
        var arr = document.getElementsByClassName("slide");
        for (var i = 0; i < arr.length; i++) {
            arr[i].style.left = i * 780 + "px";
        }
    }

    function LeftMove() {
        var arr = document.getElementsByClassName("slide");//获取三个子div
        console.log('进来了');
        for (var i = 0; i < arr.length; i++) {
            var left = parseFloat(arr[i].style.left);
            left -= 2;     //让图片左移2个px
            console.log("left减后：%s", left);
            var width = 780;//图片的宽度
            if (left <= -width) {
                left = (arr.length - 1) * width;//当图片完全走出显示框，拼接到末尾，因为拼接起来总长度就是(arr.length) * width 但还有一张在显示，所以就减一
                clearInterval(moveId); //然后停止循环
            }
            arr[i].style.left = left + "px";
        }

    }

    moveId = setInterval(LeftMove, 10);//设置一个10毫秒定时器，并给自己取名, 此时已经能移动


    function divInterval() {
        moveId = setInterval(LeftMove, 10);//设置一个10毫秒定时器
    }

    timeId = setInterval(divInterval, 5000);//设置一个5秒的定时器。也就是5秒重启一次图片的轮换.要算好之前滑动消耗的时间.

    function stop() {
        clearInterval(timeId);//鼠标停留关闭B定时器
        clearInterval(moveId);
    }
    function start() {
        moveId = setInterval(LeftMove, 10);//设置一个10毫秒定时器
        clearInterval(timeId);//重新打开一个定时前，先关闭之前定时器。
        timeId = setInterval(divInterval, 5000);//重启一个定时器
    }
    // 当浏览器窗口切出或页面切换到其他页面一段时间再回来时，
    // 轮播效果会有短暂加速（随切出时间加长而加长）。
    // 主要是因为虽然窗口切出去了，定时器依然在执行，但页面却没有将效果显示，
    // 所以切回来后会将之前的效果显示出来而加速轮播图。所以添加页面焦点事件：
    //页面失去焦点定时器停止
    onblur = function () {
        stop();
    }
    //页面获取焦点时重启定时器
    onfocus = function () {
        start();
    }

</script>

</script>

氏族归来

关注

9
点赞
踩
97

收藏

觉得还不错? 一键收藏
0
评论
给html页面图片制造滚动效果（详细注释）

给html页面图片制造滚动效果html部分源码css部分源码javascript部分源码html部分源码设置4个图片div<body> <div class="nivoSlider" style="height: 200px;width: 780px;"> <div class="slide"> <img src="./static/xinjiang/banner.jpg" s> </
复制链接

扫一扫

专栏目录