<!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. Vijos1675 NOI2005 聪聪和可可 记忆化搜索

    简单题,结果因为理解错题意懵逼了好久…… moveTo[x][y]表示聪聪在节点x,可可在节点y时,聪聪下一步应到达哪一个节点 dp[x][y]表示聪聪在节点x,可可在节点y,且轮到可可行动时,所需时 ...

  2. laravel5通过auth.attempt事件加入登陆验证码

    <?php namespace WangDong\Http\Controllers\Auth; use Illuminate\Http\Exception\HttpResponseExcepti ...

  3. ICE学习第四步-----客户端请求服务器返回数据

    这次我们来做一个例子,流程很简单:客户端向服务器发送一条指令,服务端接收到这条指令之后,向客户端发送数据库中查询到的数据,最终显示在DataGridView上. 根据上一篇文章介绍的Slice语法,我 ...

  4. 百度分享 ajax 或分页后显示不出问题解决方案

    自从用了AJAX后,JS重新加载问题就如家常便饭般层出不穷啊.没有系统学习过js感觉亚历山大. 百度后,还是找到了解决办法. 百度分享创建了一个全局对象window._bd_share_main.通过 ...

  5. 使用Thinkphp框架开发移动端接口

     本文给大家分享的是使用thinkphp框架开发移动端接口的2种方法,一种是开发API,另外一种是实现移动端访问自动切换移动主题模板,从而实现伪app访问,下面我们就来详细看下如何实现吧. 方案一:给 ...

  6. .NET序列化的一点技巧

    介绍 序列化是将对象状态转换为可保持或传输的形式的过程.序列化的补集是反序列化,后者将流转换为对象.这两个过程一起保证数据易于存储和传输. .NET Framework 提供了两个序列化技术: 二进制 ...

  7. Linux服务器集群技术的概述

    目前,越来越多的网站采用Linux操作系统,提供邮件.Web.文件存储.数据库等服务.也有非常多的公司在企业内部网中利用Linux服务器提供这些服务.随着人们对Linux服务器依赖的加深,对其可靠性. ...

  8. hibernate 一张数据表的流程

    1. 写一个domain类来映射数据库表 2. 写一个*.hbm.xml文件来配置映射 <?xml version="1.0"?> <!DOCTYPE hiber ...

  9. Sereja and Suffixes

    Codeforces Round #215 (Div. 2) B:http://codeforces.com/problemset/problem/368/B 题意:给你一个序列,然后查询i--n中没 ...

  10. 用STRACE解决公司真实故障一例

    这是相关分析文档.为了职业操守,已修改相关公司敏感信息~~~ ~~~~~~~~~~~~~~~~~~~~~~~~ 关于论坛每五分钟左右,会有warning.html跳转出现的原因调查 (warning. ...