js 图片实现无缝滚动

时间：2022-08-27 14:33:18
<!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-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

    body,ul{margin:0;padding:0;}

    div{position:relative;width:680px;height:170px;border:1px solid black;margin:10px auto;overflow:hidden;}

    ul{position:absolute;left:0;top:0;}

    li{width:150px;height:150px;padding:10px;float:left;list-style:none;}

    img{width:150px;height:150px;}

</style>

<script>

window.onload = function(){

    var oDIV = document.getElementsByTagName('div')[0];

    var oUl = oDIV.getElementsByTagName('ul')[0];

    var arrLi = oUl.getElementsByTagName('li');

    var arrA = document.getElementsByTagName('a');

    var timer = null;

    var speed = 10;

    oUl.innerHTML += oUl.innerHTML;

    oUl.style.width = arrLi.length*arrLi[0].offsetWidth+'px';

    timer = setInterval(scrollPicture,100)

    arrA[0].onclick = function(){

        speed = -10;

    };

    arrA[1].onclick = function(){

        speed = 10;

    };

    for(var i=0;i<arrLi.length;i++){

        arrLi[i].onmouseover = function(){

            clearInterval(timer);

        }

        arrLi[i].onmouseout = function(){

            timer = setInterval(scrollPicture,100)

        }

    }

    /*原理：走到一半给拉回来*/

    function scrollPicture(){

        if(oUl.offsetLeft < -oUl.offsetWidth/2){ //向左走

            oUl.style.left = 0;

        }else if(oUl.offsetLeft >0){

            oUl.style.left = -oUl.offsetWidth/2+'px'; //向右走

        }

        oUl.style.left = oUl.offsetLeft+speed+'px';

    }

};

</script>

</head>

<body>

    <a href="javascript:;"> < </a>

    <a href="javascript:;"> > </a>

    <div>

        <ul>

            <li><img src="data:images/1.jpg"></li>

            <li><img src="data:images/2.jpg"></li>

            <li><img src="data:images/3.jpg"></li>

            <li><img src="data:images/4.jpg"></li>

        </ul>

    </div>

</body>

</html>

js 图片实现无缝滚动的更多相关文章

  1. 用js实现图片的无缝滚动效果

    实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...

  2. js 实现图片的无缝滚动

      js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...

  3. jquery 图片自动无缝滚动

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

  4. js原生实现 无缝滚动图片

    <!-- 无缝滚动图片开始 --> <div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; H ...

  5. css 图片的无缝滚动

    转载:http://blog.sina.com.cn/s/blog_6387e82401013kx8.html js的图片的横向或者竖向的无缝滚动图片. ttp://zx.bjmylike.com/ ...

  6. js动画之无缝滚动

    效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  7. js实现标准无缝滚动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JS 在 HTML 无缝滚动

    marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或 ...

  9. js文字的无缝滚动（上下）

    使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可 Dom内容 <div id="container& ...

随机推荐

  1. c&plus;&plus; eof&lpar;&rpar;函数

    C++ eof()函数可以帮助我们用来判断文件是否为空,抑或是判断其是否读到文件结尾.在这里我们将会对其进行详细的介绍. C++编程语言中的很多功能在我们的实际应用中起着非常大的作用.比如在对文件文本 ...

  2. google api autocomplete

    <input class="flex-item" id="autocomplete" placeholder="address, zip or ...

  3. &lbrack;Spring框架&rsqb;Spring 事务管理基础入门总结&period;

    前言:在之前的博客中已经说过了数据库的事务, 不过那里面更多的是说明事务的一些锁机制, 今天来说一下Spring管理事务的一些基础知识. 之前的文章: [数据库事务与锁]详解一: 彻底理解数据库事务一 ...

  4. ae&lowbar;datagridview显示属性

    public partial class FrmAttributeTable : Form { private AxMapControl m_MapCtl; public FrmAttributeTa ...

  5. Java Applet与Java Application的区别

    转自:http://www.educity.cn/java/500609.html 在Java语言中,能够独立运行的程序称为Java应用程序(Application).Java语言还有另外一种程序-- ...

  6. salesforce零基础学习（七十五）浅谈SOSL（Salesforce Object Search Language）

    在工作中,我们更多操作的是一个表的对象,所以我们对SOQL的使用很多.但是有时候,我们需要对几个表进行查询操作,类似salesforce的全局搜索功能,这时,使用SOQL没法满足功能了,我们就需要使用 ...

  7. Dynamics CRM项目实例之七：站点地图修改，联系人-订单-积分管理

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复138或者20141229可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me!        前面文章发表后,不 ...

  8. Java annotation浅析

    自定义annotation @Documented@Retention(RetentionPolicy.RUNTIME)@Target({ElementType.FIELD,ElementType.M ...

  9. Java和C冒泡排序

    Java 示例代码: public class test { public static void main(String[] args) { String str = "321dca5&q ...

  10. 使用bat批处理文件定时自动备份oracle数据库并上传ftp服务器

    一.使用bat批处理文件备份oracle(前提是配置好oracle数据库客户端) @echo off set databasename=orcl  //数据库名 set username=ninic ...

相关文章