兼容IE7以上的无缝滚动,带箭头、停顿

<!DOCTYPE HTML>
<html>

<head>
        <meta charset="utf-8" />
        <title>无缝滚动</title>
        <link href="">
    </head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        a{
            cursor: pointer;
        }
        #div1 {
            width: 800px;
            height: 130px;
            margin:50px auto;
            position: relative;
            background: red;
            overflow: hidden;
        }
        ul {
            position: absolute;
            left: 0;
            top: 0;
        }
        li {
            float: left;
            list-style: none;
        }
        li img {
            width: 200px;
            height: 130px;
        }
    </style>

<script>
         //        setInterval(function() {
         //                var oDiv=document.getElementById("div1");
         //                oDiv.style.left=oDiv.offsetLeft+10+‘px‘;
         //        },30);
        window.onload = function() {
            var oDiv = document.getElementById(‘div1‘);
            var oUl = oDiv.getElementsByTagName(‘ul‘)[0];
            var aLi = oUl.getElementsByTagName(‘li‘);
            var speed=2;
            
            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
            oUl.style.width = aLi[0].offsetWidth * aLi.length + ‘px‘;
            function move() {
                if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
                    oUl.style.left = ‘0‘;
                }
                //向左滚
                //        oUl.style.left=oUl.offsetLeft-2+‘px‘;
                //向右滚
                if (oUl.offsetLeft >0) {
                    oUl.style.left =-oUl.offsetWidth /2+‘px‘;
                }
                oUl.style.left = oUl.offsetLeft + speed + ‘px‘;
            }
            var timer=setInterval(move, 30);
            oDiv.onmouseover=function(){
                clearInterval(timer);
            };
            oDiv.onmouseout=function(){
                timer=setInterval(move, 30);
            };
            document.getElementsByTagName(‘a‘)[0].onclick=function(){
                speed=-2;
            };
            document.getElementsByTagName(‘a‘)[1].onclick=function(){
                speed=2;
            }
        }
    </script>

<body>
    <a>向左走</a>
    <a>向右走</a>
        <div id="div1">
            <ul>
                <li><img src="images/1.jpg" /></li>
                <li><img src="images/2.jpg" /></li>
                <li><img src="images/1.jpg" /></li>
                <li><img src="images/2.jpg" /></li>
            </ul>
        </div>
    </body>

</html>

时间: 2024-10-13 07:30:33

兼容IE7以上的无缝滚动,带箭头、停顿的相关文章

图片列表带箭头上下无缝滚动展示特效

<!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"> <head> <meta http-equiv="Content-

带无缝滚动的轮播图(含JS运动框架)

今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框架的代码如下: 1 //获取样式 2 function getStyle(obj,attr){ 3 if(obj.currentStyle){ 4 return obj.currentStyle[attr]; 5 }else{ 6 return getComputedStyle(obj,false)

兼容各种浏览器的文字循环无缝滚动效果

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>中国站长天空-网页特效-文

向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

<!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"> <head> <meta http-equiv="Content-

轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器

项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换图片,无缝滚动和非无缝滚动两种效果) 页面源代码:index.html(以下注释自行切换,为了项目清晰,所以用了四个js文件,分别实现不同的效果) <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

带箭头阴影的提示框,CSS代码,IE不兼容

<html><head><title>带箭头阴影的提示框</title><style> .wrap{position:relative;}.bd{background:#BDCEEF;width:301px;height:101px;margin:10px;position:relative;z-index:2;box-shadow: 5px 8px 11px rgba(0,0,0,0.4);-webkit-box-shadow: 5px 8px

javascript无缝滚动

无缝滚动好像是互联网广告最大的一个载体,可以用“无处不在”来形容它.不过它比起早期的闪光字体,浮动广告算进步了.由于需求巨大,做前台迟早会遇到它.我先给出结构层部分,再慢慢讲解其实现原理. <dl id="marquee">   <dt>     <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="无缝滚动&quo

JS-特效 ~ 01. 事件对象、offset偏移/检测、无缝滚动、自动循环轮播图

Math.round ( ) :正书四舍五入,负数五舍六入 用定时器,先清除定时器 事件对象 event event:事件被触动时,鼠标和键盘的状态,通过属性控制 Offset:偏移,检测 1. 获取元素尺寸 2. 检测盒子的宽高     事件源.offsetLeft. /. ele.offsetWidth /返回的数值没有单位,是number类型 /包括内边距.边框,不包括外边距 3. 获取定位的元素的left和top值  offsetLeft / offsetTop 如果被获取的元素没有定位

JavaScript学习笔记5 之 计时器 &amp; scroll、offset、client系列属性 &amp; 图片无缝滚动

一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行一次相应的函数(不重复) 清除计时器: clearInterval( ); clearTimeout( ); 当计时器调用执行完毕时,它将返回一个timer ID, 如果将该ID传递给clearInterval,便可以终止代码的执行. 实例: 页面布局: <div id="wrap"