<!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. PAT A1035 Password (20)

    AC代码 注意创造函数条件中使用引用 输出语句注意单复数 #include <cstdio> #include <cstring> #include <iostream& ...

  2. 剑指offer6:旋转数组的最小数字

    1. 题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1,2,3,4,5}的一 ...

  3. 怎样使用构造函数: Vue()?

    1. 新建一个 .html 文件 => 引入一个在线的 vue 库 => 写一个带 id 的 html 标签 => 写一个 script 标签, 这里的 vApp 是 Vue() 这 ...

  4. Java Web Tomcat服务器

    一.Tomcat目录结构 1.bin:存放脚本文件.其中有个档是catalina.bat,打开这个配置文件,在非注释行加入JDK路径(SET JAVA_HOME=C:\j2sdk1.4.2_06)保存 ...

  5. Java super与this

    一.super()与this() 1.super(): 只能出现在子类构造器中 且必须位于第一行. 所有子类构造器默认调用super()方法 参数决定使用父类哪一个构造器. 若父类没有相应的构造器,则 ...

  6. inline元素、block元素

    inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...

  7. ModbusTCP报文详解【二】

    [1]功能码05H [2]功能码06H [3]功能码0FH [4]功能码10H

  8. HttpWorkerRequest应用简介

    1. Using HttpWorkerRequest for getting headers1.使用HttpWorkerRequest获取headers信息 First, the HttpWorker ...

  9. luogu题解P2312解方程--暴力模+秦九韶

    题目链接 https://www.luogu.org/problemnew/show/P2312 分析 这道题很毒啊,这么大的数. 但是如果多项式\(\sum_{i=0}^N a[i]*X^i=0\) ...

  10. python爬取妹子图全站全部图片-可自行添加-线程-进程爬取，图片去重

    from bs4 import BeautifulSoupimport sys,os,requests,pymongo,timefrom lxml import etreedef get_fenlei ...