脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → offsetLeft实现图片滚动效果

JS小功能(offsetLeft实现图片滚动效果)实例代码

 更新时间：2013年11月28日 15:02:47   作者：  
这篇文章主要介绍了offsetLeft实现图片滚动效果实例代码，有需要的朋友可以参考一下

效果：

代码：

复制代码 代码如下:

<head runat="server">
    <title></title>
    <style type="text/css">
        #div1
        {
            width: 245px;
            height: 150px;
            background: red;
            margin: 250px;
            margin-left: 500px;
            position: absolute;
            overflow: hidden;
        }
        #div1 ul li
        {
            float: left;
            width: 44px;
            height: 66px;
            margin-top: 20px;
            margin-right: 5px;
            list-style: none;
        }
        #div1 ul
        {
            width: 250px;
            position: absolute;
            padding: 0;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var oul = document.getElementsByTagName('ul')[0];
            var odiv = document.getElementById('div1');
            var ali = document.getElementsByTagName('li');
            oul.innerHTML = oul.innerHTML + oul.innerHTML;
            oul.style.width = (ali[0].offsetWidth + 5) * ali.length + 'px';
            function roll() {
                if (oul.offsetLeft <= -oul.offsetWidth / 2) {
                    oul.style.left = '0';
                }
                oul.style.left = oul.offsetLeft - 2 + 'px';
            }
            var timer = null;
            timer = setInterval(roll, 30);
            odiv.onmouseover = function () {
                clearInterval(timer);
            }
            odiv.onmouseout = function () {
                timer = setInterval(roll, 30);
            }
        };
    </script>
</head>
<body>
    <div id="div1">
        <ul>
            <li>
                <img src="../Images/Number1/0.jpg" /></li>
            <li>
                <img src="../Images/Number1/1.jpg" /></li>
            <li>
                <img src="../Images/Number1/2.jpg" /></li>
            <li>
                <img src="../Images/Number1/3.jpg" /></li>
            <li>
                <img src="../Images/Number1/4.jpg" /></li>
        </ul>
    </div>
</body>

您可能感兴趣的文章:

相关文章

  • JavaScript中常见的数据类型判断方法小结

    JavaScript中常见的数据类型判断方法小结

    在 JS 编程中,正确判断数据类型是必备技能,也是面试常问的内，本文将探讨四种常用的数据类型判断方法，通过了解它们的特点和适用范围,能够更好地处理不同数据类型的情况,避免出现错误和提升代码质量,需要的朋友可以参考下
    2023-06-06
  • javascript addLoadEvent函数说明

    javascript addLoadEvent函数说明

    网页加载完整后会触发一个onload事件，默认地一个事件只能和一个函数绑定。
    2010-01-01
  • JavaScript eval() 函数介绍及应用示例

    JavaScript eval() 函数介绍及应用示例

    eval(String) 函数可计算某个字符串，并执行其中的的 JavaScript 代码，该方法只接受原始字符串作为参数
    2014-07-07
  • 微信小程序裁剪头像插件使用方法详解

    微信小程序裁剪头像插件使用方法详解

    这篇文章主要为大家详细介绍了微信小程序裁剪头像插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • js动态设置select下拉菜单的默认选中项实例

    js动态设置select下拉菜单的默认选中项实例

    今天小编就为大家分享一篇js动态设置select下拉菜单的默认选中项实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 轻松实现JavaScript图片切换

    轻松实现JavaScript图片切换

    这篇文章主要帮助大家轻松实现JavaScript图片切换，内容很精简，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JS+DIV+CSS排版布局实现美观的选项卡效果

    JS+DIV+CSS排版布局实现美观的选项卡效果

    这篇文章主要介绍了JS+DIV+CSS排版布局实现美观的选项卡效果,通过简单的div+css布局结合JavaScript切换页面样式实现美观的选项卡效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • uniapp中vuex的应用使用步骤

    uniapp中vuex的应用使用步骤

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于uniapp中vuex的应用使用,需要的朋友可以参考下
    2022-08-08
  • Exif.js图片旋转修正的方法

    Exif.js图片旋转修正的方法

    这篇文章主要为大家详细介绍了Exif.js图片旋转修正的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • javascript实现yield的方法

    javascript实现yield的方法

    这篇文章介绍了javascript实现yield的方法，有需要的朋友可以参考一下
    2013-11-11

最新评论