javascript无限循环滚动

最新推荐文章于 2024-07-16 17:26:59 发布

原创最新推荐文章于 2024-07-16 17:26:59 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #border #function #scroll #timer #xhtml

JAVASCRIPT 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了如何使用HTML、CSS和JavaScript实现网页上的动态图片轮播效果，包括样式设计、脚本编写及交互优化。

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html

        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

    <title></title>

    <style type="text/css">

        * { padding:0; margin:0;}

        body { text-align:center;}

        

        #photo-list {

             /* 3张图片的宽度（包含宽度、padding、border、图片间的留白）

                 计算：3*(100+2*2+1*2+9) - 9

                 之所以减去9是第三张图片的右边留白

             */

            width:336px;

            /* 图片的宽度（包含高度、padding、border）

                计算：100+2*2+1*2

            */

            height:106px;

            margin:50px auto; overflow:hidden;

            border:1px dashed #ccc;

        }

        #photo-list ul { list-style:none;}

        #photo-list li { float:left; padding-right:9px;}

        #photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}

    </style>

</head>

<body>

<div id="photo-list">

    <ul id="scroll">

        <li><a href="aaaaaaaaaa"><img src="aaaaaa/logo.jpg" width="100px" height="100px" alt=""/></a></li>
    </ul>

</div>

<script type="text/javascript">

    var id = function(el) {

            return document.getElementById(el);

        },

        c = id('photo-list');

    if(c) {

        var	ul = id('scroll'),

            lis = ul.getElementsByTagName('li'),

            itemCount = lis.length,

            width = lis[0].offsetWidth, //获得每个img容器的宽度

            marquee = function() {

                c.scrollLeft += 2;

                if(c.scrollLeft % width <= 1){  //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面

                    ul.appendChild(ul.getElementsByTagName('li')[0]);

                    c.scrollLeft = 0;

                };

            },

            speed = 50; //数值越大越慢



        ul.style.width = width*itemCount + 'px'; //加载完后设置容器长度

        

        var timer = setInterval(marquee, speed);

        c.onmouseover = function() {

            clearInterval(timer);

        };

        c.onmouseout = function() {

            timer = setInterval(marquee, speed);

        };

    };

</script>

</body>

</html>