无缝循环滚动

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <wraper>
      <ul id="ul">
        <li>AA</li>
        <li>BB</li>
        <li>CC</li>
        <li>DD</li>
        <li>EE</li>
        <li>FF</li>
        <li>AA</li>
                <li>BB</li>
        <li>CC</li
            <li>DD</li>
        <li>EE</li>
    </ul>

  </wraper>
</body>
</html>
wraper{
  display:block;
  background-color:red;
  width:200px;
  overflow:hidden;
  position:relative;
  height:100px;
}

ul{
  width:490px;
  position:absolute;
  left:0px;
  right:0px;
  top:0px;
  height:20px;
  bottom:20px;
  display:block;
}
li{
  float:left;
  width:45px;
}
var x=document.getElementById(‘ul‘);

setInterval(function(){
  var left=x.style.left.replace(‘px‘,‘‘);
  if(left<-290)
    {
      left=-30;
    }
  x.style.left=left-10+‘px‘;
},100);

JS Bin on jsbin.com

时间: 2024-11-10 14:07:09

无缝循环滚动的相关文章

Swift - 多层无缝循环滚动背景(SpriteKit游戏开发)

在游戏开发中,比如跑酷游戏.我们需要实现背景的无限循环滚动,来营造运动的效果.除了单层的背景滚动,还有视差滚动. 视差滚动是指让多层背景以不同的速度移动,形成立体的效果,从而带来非常出色的视觉体验. 样例说明: 1,本样例背景分为两层.第一层更靠近游戏窗口的色彩更鲜艳,移动速度也更快一些.第二层由于要模拟远处的场景,所以颜色也更淡一些,对比度更弱一些,移动速度也更慢一些. 2,要实现循环滚动.我们准备的背景图首尾是要可以无缝衔接的. 3,判断需要多少张无缝衔接图来组成背景?判断标准是:当第一张图

js实现无缝循环滚动

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> </head> <style type="text/css"> .row{ width: 1298px; height: 400px; border: 1px solid; box-sha

js 图片无缝循环

<html> <head> <title>Js图片无缝滚动</title> <style type="text/css"> body{ background:gray; } #wrap{ width:810px; height:200px; border:1px solid black; position:relative; left:50%; top:50%; margin-left:-410px; margin-top:-

WPF 无缝图片滚动

上图是效果  可以双方向拖动 废话不多说上代码 界面: 1 <Window x:Class="FlashPrac2.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 Title="MainWindow&qu

2014.12.10 ScrollerView循环滚动的三种方法

1.循环滚动 每次滚动后都将scrollview的offset设置为中间的一页 若本次滚动是向前一页滚动,则把三页都向后放置,最后一页放到开头 若本次滚动是向后一页滚动,则把三页都向前放置,第一页放到末尾 初始化UISCrollView float x,y,width,height; x = WIDTH_OFF_SET; y = HEIGHT_OFF_SET; width = WIDTH_OFF_SET; height = SCROLLVIEW_HEIGHT; for (int j=0; j<3

超简单的纯CSS图片无缝循环方法

首先效果如下. 效果就是若干长图通过视口,并且第一张和最后一张要无缝衔接. 接着原理图如下.真的,超简单... 注意:第一张和最后一张必须要是同一张图,这样才能无缝衔接. 如果视口大于每张图片,那就有必要第1,2甚至3张和倒数第3,2,1张相同,这样才能在视口大于图片的情况下完成完成衔接. 从右往左滚动,或者垂直方向滚动效果稍加变动代码即可实现. 代码如下 <!DOCTYPE html> <html> <head lang="en"> <met

循环滚动图片

1.概述 循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果.setTimeout()方法的语法格式如下: setTimeout(function,milliseconds,[arguments]) 参数说明: a. function:要调用的JavaScript自定义函数名称. b. Milliseconds:设置超时时间(以毫秒为单位). 功能:经过超时时间后

【Android】ViewPager实现无限循环滚动

最近做的一个项目,客户要求在ViewPager实现的主页面中滑动到最后一页后继续滑动能返回到第一页,也就是实现无限循环滚动,效果如下: 看了下ViewPager没有滑到尽头的回调方法,因此想到的解决方案是,在原来的最后一页之后再加上一个第一页,也就是原本有编号为a1,b,c的三个页面,现在在最后面再加一个a页面,变为a1.b.c.a2四个页面,然后使用OnPageChangeListener中的onPageSelected方法来监听到页面切换,当发现是从第三个页面(c)切换到第四个页面(a1)时

循环滚动scrollView---最后一张图片后面紧跟着第一张图片,第一张图片前面挨着最后一张图片

问题描述:循环滚动scrollView---最后一张图片后面紧跟着第一张图片,第一张图片前面挨着最后一张图片,形成环,循环切换图片. 效果图如下: 具体代码如下: //  ViewController.m #import "ViewController.h" #define kW 375 #define kH 500 #define kCount 11 @interface ViewController () <UIScrollViewDelegate> @end @imp