简单的无缝滚动

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .slide{            width: 800px;            height: 200px;            border:1px solid red;            margin: 100px auto;        }        ul{            padding:0;margin:0;            list-style: none;            width: 200%;            height: inherit;            border:3px solid blue;        }        .slide li{            width: 200px;            float: left;            border:1px solid springgreen;            box-sizing:border-box;            height: inherit;        }    </style></head><body>    <div class="slide">        <ul>            <li>1</li>            <li>2</li>            <li>3</li>            <li>4</li>            <li>5</li>            <li>6</li>            <li>7</li>            <li>8</li>        </ul>    </div></body></html><script>    var slide=document.querySelector(".slide ul");    var L=0;    //左边   var T=setInterval(function(){        if(L>-200){            L=L-1;        }else{            L=0;            slide.appendChild(slide.firstElementChild)        }        slide.style.marginLeft=L+"px";    },10)

</script>
时间: 2024-10-05 11:04:22

简单的无缝滚动的相关文章

JQ简单实现无缝滚动

$(function(){ $("ul li:lt(5)").clone().appendTo("ul"); var $width = $("ul li:lt(5)").width() * 4; var currIndex = 0; $("#next").click(function(){ if(currIndex == 2){ currIndex = 0; $("ul").css("left&q

关于网页中的无缝滚动

随便打开一个网页,基本上都会看到无缝滚动或者轮播图,比如淘宝还有360官网的首页        观察这些轮播图可以发现图片可以来回循环地切换,那么是怎样做到的呢? 做到轮播图或者说无缝滚动主要有两种方式,一种是通过对图片的明暗即透明图的改变来显示或隐藏图片,另一种是通过运动框架,将图片显示在可视区域.这两种方式都会用到同一个东西,那就是定时器. JavaScript中的定时器有两种,1.setInterval();2.setTimeout();相对应的关闭定时器也有两种方法,clearInter

offsetWidth与offsetLeft用法之无缝滚动

知识讲解: (1)offsetWidth是什么? 答:它可以获取物体宽度的数值:offsetWidth实际获取的是盒模型(width+border + padding)的宽度. 如图: (2)offsetLeft是什么? 答:获取的是当前对象左侧距离父对象左侧的值(均不包含border). 另外:   style.left: 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距. clientLeft:获取的是当前对象的offsetLeft属性值和到当前窗口左边

SuperSlidev2.1 轮播图片和无缝滚动

SuperSlidev2.1 轮播图片和无缝滚动 使用方法点击链接:http://down.admin5.com/demo/code_pop/18/562/index.html 简单使用方法如下 html <div class="bd"><ul><li _src="url(images/1.jpg)" style="background:#E2025E center 0 no-repeat;"><a hr

JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语法:<marquee>...</marquee>: 说明:在标记之间添加要进行滚动的内容. 重要属性: 1.滚动方向direction(包括4个值:up. down. left和 right) 语法:<marquee direct

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 如果被获取的元素没有定位

js图片无缝滚动代码

想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,

JavaScript(六)——实现图片上下或者左右无缝滚动

/*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};return v.each(e.split(y),function(e,n){t[n]=!0}),t}function H(e,n,r){if(r===t&&e.nodeType===1){var i="data-"+n.replace(P,"-$1").toL