<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
.scroll-no-gap {
width: 300px;
height: 100px;
position: relative;
overflow: hidden;
} .scroll-no-gap .ul-scroll {
list-style: none;
margin: 0;
padding: 0;
height: 100px;
width: 100px;
position: absolute;
left: 0;
top: 0;
} .scroll-no-gap .ul-scroll li {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
float: left;
} .scroll-no-gap .ul-scroll li:nth-child(even) {
background-color: rosybrown;
} .scroll-no-gap .ul-scroll li:nth-child(odd) {
background-color: aquamarine;
}
</style>
</head>
<body>
<!--无缝滚动-->
<div class="scroll-no-gap">
<ul class="ul-scroll">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
<script>
//无缝滚动
//取值:oDiv.offsetLeft(可读写) ==>字符串
//设置值: oDiv.style.left(只读) ==> 数值
var oUl = document.getElementsByClassName('ul-scroll')[0];
var aLi = oUl.getElementsByTagName('li');
//console.log(aLi.length);
oUl.style.width = aLi.length * 100 + 'px';
//console.log(oUl.offsetWidth);
var oPrev = document.getElementsByClassName('prev')[0];
var oNext = document.getElementsByClassName('next')[0];
var now = 0;
oNext.onclick = function(){
now = now + 1;
oUl.style.left = oUl.offsetLeft - 300 + 'px';
if(now == 3){
oUl.style.left = 0;
now = 0;
}
};
oPrev.onclick = function(){
now = now - 1;
oUl.style.left = oUl.offsetLeft + 300 + 'px';
if(now == -1){
now = 2;
oUl.style.left = -(aLi.length/3 - 1)*300 + 'px';
}
}; </script>
</body>
</html>

javascrip实现无缝滚动的更多相关文章

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

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  2. JQuery的无缝滚动

    图片无缝向左滚动的代码如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  3. JS 阶段小练习~ 无缝滚动

    结合下学了的知识,做个模拟的综合性扩展练习~~  大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变 图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图 ...

  4. 自己写了一个无缝滚动的插件(jQuery)

    效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...

  5. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

  6. Javascript学习之无缝滚动

    无缝滚动Javascript: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  7. js基础教程四之无缝滚动

    前面学习了相关js的一些基础知识,这节主要针对定时器作综合运用: 无缝滚动-基础 效果演示: *物体运动基础 *让div移动起来 *offsetLeft的作用 *用定时器让物体连续移动 <sty ...

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

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  9. liMarquee演示12种不同的无缝滚动效果

    很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...

随机推荐

  1. solve_lock-1024-大功告成

    create or replace procedure solve_lock_061203(v_msg out varchar2) as  v_sql varchar2(3000); --定义 v_s ...

  2. Linux通配符

    * 任意字符 ?任意单个字符 [] 匹配指定 字符范围内的字符 [^] 指定范围之外的单个字符 常规字符集合 [a-z] a到z的所有小写字母 [A-Z] a到z的所有大写字母 [0-9] 0到9的所 ...

  3. 【HOJ1356】【Miller_rabin素性测试】Prime Judge

    Given a positive integer, your job is writing a program to determine whether it is a prime number or ...

  4. 【Ural1057】幂和的数量

    [题目描述] 写一个程序来计算区间[X,Y]内满足如下条件的整数个数:它恰好等于K个互不相等的B的整数幂之和. 举个例子.令X=15,Y=20,K=2,B=2.在这个例子中,区间[15,20]内有3个 ...

  5. java 按天创建文件夹

    按天创建文件夹,也就是每天创建一个,适合上传文件服务使用,文件数量较多时可以按文件夹区分. public static final String FMT = "yyyy-MM-dd" ...

  6. Bootstrap_Javascript_手风琴

    触发手风琴可以通过自定义的 data-toggle 属性来触发.其中data-toggle值设置为 collapse,data-target="#折叠区标识符". 第一步,设计一个 ...

  7. sql2000

    sql 2000简体中文企业版下载(含SP3 SP4 下载地址)安装图解及sp4安装教程图解 2012-07-17 16:24:37|  分类: mssql数据库|字号 订阅     sql 2000 ...

  8. HTML用法小摘录

    一.网页地址栏上小图标标签添加写法: <link rel="Shortcut Icon" href="~/Content/ico/glasses.ico" ...

  9. emmet插件的导入与实用

    http://jingyan.baidu.com/article/ff4116259b057c12e48237b8.html http://www.iteye.com/news/27580 分享htm ...

  10. 新建maven project遇到的问题

    在m2e安装成功之后,开始创建maven project了,但是出现了如下错误: 结果在很偶然的情况下让我解决了,就是更新下m2.respository,点击下图中的Update Settings -