<!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" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>js</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,

user-scalable=no"/>

<style>

*{margin: ;padding: ;}

#div1{

    position: relative;border: 1px solid gray;

    width: %;

    margin: 20px auto;

    height: 800px;

    overflow: hidden;

}

#div1 ul{

    position: absolute;

    left: ;

}

#div1 a{

    position: absolute;

    z-index: ;

    text-decoration: none;

    top: %;

    display: none;

}

#div1 ul li{

    padding: 5px;

    list-style: none;

    width: 720px;

    height: %;

    float: left;

}

#div1 ul li img{

    width: %;

    height: %;

}

</style>

</head>

<body>

<script type="text/javascript">

    window.onload = function(){

        var oDiv = document.getElementById('div1');

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

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

        var aA = oDiv.getElementsByTagName('a');

        var iSpeed = ;//正左负右

        var timer = null;

        //计算ul的宽为所有li的宽的和;

        oUl.innerHTML += oUl.innerHTML+oUl.innerHTML;

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

        function Slider(){

            if (oUl.offsetLeft<-oUl.offsetWidth/) {

                oUl.style.left = ;

            }else if(oUl.offsetLeft>){

                oUl.style.left =-oUl.offsetWidth/+'px';

            }

            oUl.style.left = oUl.offsetLeft-iSpeed+'px';//正负为方向

        }

        timer =setInterval(Slider,);

        aA[].onclick = function(){

            iSpeed = ; //控制速度的正负

        }

        aA[].onclick = function(){

            iSpeed = -;

        }

        oDiv.onmouseover = function(){

            clearInterval(timer);

        }

        oDiv.onmouseout = function(){

            timer =setInterval(Slider,);

        }

    };

</script>

<div id="div1">

    <ul>

        <li><img src="http://192.168.0.239/disk/jx/1.jpg"></li>

        <li><img src="img/3.png"></li>

        <li><img src="img/4.png"></li>

        <li><img src="img/5.png"></li>

    </ul>

    <a href="javascript:;" style="left:10px;"><</a>

    <a href="javascript:;" style="right:10px;">></a>

</div>

</body>

</html>

js实现网页上图片循环播放的更多相关文章

  1. JS让网页上文字出现键盘打字的打字效果

    一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html ...

  2. 嵌入在网页上Flash媒体播放器（1）

    做的项目,在不久的将来相关的Flash玩家使用,需要播放视频的网页上,不同的视频资源,需要不同的球员.基于使用稳定性.的嵌入式和嵌入式复杂性能的优点概括起来有两种方式(不同的玩家),视频资源也略有不同 ...

  3. 使用js在网页上记录鼠标划圈的小程序

    Spin-Wheel 实现鼠标在网页上转圈时记录转动圈数的小程序,每转一圈记录一次,同时要是顺时针方向的. 问题分析与实现 这个小程序的难点在于如何知道鼠标完成了一个转圈的动作,而且人工使用鼠标划圈时 ...

  4. 网页上图片点击放大js代码

    //图片弹出事件 function showPict(path) { src = path; var mask = "<div style = 'position: absolute; ...

  5. JS微信网页使用图片预览（放大缩小）

    前言 需求在微信网页中客户点击图片可进行预览放大缩小功能,网上找了各种js方式实现, 唯一的麻烦就是不兼容或者和项目框架不兼容 次函数只只用于部分客户端,否则会出现 WeixinJSBridge is ...

  6. HTML5 之 FileReader 的使用 （二） （网页上图片拖拽并且预显示可在这里学到） ［转载］

    转载至 : http://www.360doc.com/content/14/0214/18/1457948_352511645.shtml FileReader 资料(英文): https://de ...

  7. JavaScript实现的图片循环播放

    直接上干货 <html> <head> <title>Banner Cycler</title> <script> var banners ...

  8. 原生JS在网页上复制的所有文字后面自动加上一段版权声明

    不少技术博客有这样的处理,当我们复制代码的时候,会自动加上一段本信息版权为XXXX,这是怎么实现的呢? 其实实现的方式很简单,可以在我的网站页面上绑定一个copy事件,当你复制文章内容的时候,自动在剪 ...

  9. php广告图片循环播放 幻灯片效果

    <!DOCTYPE> <html> <head> <meta http-equiv="content-type" content=&quo ...

随机推荐

  1. Python-基础-文件操作-随机存取

    随机存取 文件操作中,read()和write()都属于顺序存取,只能按顺序从头到尾的进行读写.实际上我们可以只访问文件中我们感兴趣的部分.对此,我们可以使用seek()和tell()方法.两种方法的 ...

  2. 并不对劲的复健训练-bzoj5249:loj2472:p4364[2018多省联考]IIIDX

    题目大意 给出\(n,k,d_1,...,d_n\)(\(n\leq 5\times 10^5,1<k\leq 10^9,d\leq 10^9,k\in R\)).有一个满足 对于每个点\(i\ ...

  3. 一次简单的springboot+dubbo+flume+kafka+storm+redis系统

    最近无事学习一下,用springboot+dubbo+flume+kafka+storm+redis做了一个简单的scenic系统 scenicweb:展现层,springboot+dubbo sce ...

  4. Navicat连接CentOS7中的MariaDB

    Step 1:首先登录数据库设置开启远程连接 mysql -u root -p Step 2:使用改表法实现远程连接 use mysql; update user set host = '%' whe ...

  5. 用Fiddler模拟低速网络环境【转】

    原文链接:http://caibaojian.com/fiddler.html 我们为什么要限速 限速对于web前端研发是非常重要的,由于开发者的机器一般配置都很高,并且是在localhost下来调试 ...

  6. java启动server时报端口无效解决方法

    今天在Java里配置Tomcat服务器,启动时出现如下图报错信息 The server cannot be started because one or more of the ports are i ...

  7. OpenStreetMap全球库

    https://www.loveyu.org/5344.html https://www.jianshu.com/p/957aa4a933d7 https://blog.csdn.net/mrib/a ...

  8. 【转】ESXi主机出现“主机上的系统日志存储在非持久存储器中”解决办法

    原址:https://blog.csdn.net/mooncarp/article/details/50923483 当ESXi主机的底层操作系统安装在SD卡上时,在vCenter中配置该主机时,如果 ...

  9. Java学习笔记【十三、多线程编程】

    概念 Java 给多线程编程提供了内置的支持.一个多线程程序包含两个或多个能并发运行的部分.程序的每一部分都称作一个线程,并且每个线程定义了一个独立的执行路径. 多线程是多任务的一种特别的形式,但多线 ...

  10. 【Day2】1.循环结构

     视频地址(全部) https://edu.csdn.net/course/detail/26057 课件地址(全部) https://download.csdn.net/download/gentl ...