<div class="box">
<div class="box1"></div>
<div class="box2" id="box2">
<ul class="list">
<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>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var box2=document.getElementById('box2');
var oUl=box2.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var len=aLi.length;
var w=aLi[0].offsetWidth;
var index=0;
var b=true;
var timer=null;
function next(){
b?index++:index--;
(index==0 || index==len-1) && (b=!b);
startMove(-index*w);
}

setInterval(next,2000);
function doMove(iTarget){
var iSpeed=(iTarget-oUl.offsetLeft)/14;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
oUl.offsetLeft == iTarget ? clearInterval(timer) : oUl.style.left = oUl.offsetLeft + iSpeed + "px";
};
function startMove(iTarget){//alert(1);
clearInterval(timer);
timer=setInterval(function(){
doMove(iTarget);
},30)
};
};
</script>

js广告图片轮播的更多相关文章

  1. jQuery - 广告图片轮播切换

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

  2. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  3. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  4. 用JS做图片轮播

    脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...

  5. js加强版图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  7. html中使用JS实现图片轮播效果

    1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...

  8. 使用JS实现图片轮播(前后首尾相接)

    最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(在此表示感谢),但是没有首尾相 ...

  9. ios 学习 广告图片轮播器

    // // ViewController.m // 图片轮播器 // // Created by zjj on 15/5/23. // Copyright (c) 2015年 zjj. All rig ...

随机推荐

  1. hibernate事务控制

    在使用ssh中将事务委托给spring时老是出现事务不可用 经过检查,原因如下: 是因为在hibernate.cfg.xml文件中忘记进行了如下设置: hibernate.current_sessio ...

  2. mac安装lavaral

    1,安装composer # brew install josegonzalez/php/composer

  3. google 技巧

    inurl: 用于搜索网页上包含的URL. 这个语法对寻找网页上的搜索,帮助之类的很有用. intext: 只搜索网页部分中包含的文字(也就是忽略了标题,URL等的文字). site: 可以限制你搜索 ...

  4. supervisor启动流程

    Supervisor结构: 单点结构如图: 1. 初始化时,启动进程Supervisor,根据 Nimbus分配的任务情况触发启动/停用Worker Jvm进程! 2. 每个Worker进程启动一个 ...

  5. 基于Java 的增量与完全备份小工具

    前段时间,因为各种原因,自己动手写了一个小的备份工具,用了一个星期,想想把它的设计思路放上来,当是笔记吧. 需求场景:这个工具起初的目的是为了解决朋友公司对其网络的限制(不可以用任何同步软件,git, ...

  6. md5证书在window2012不能访问

    之前在window 2008使用makecert的产生的证书,部署到window 2012后,发现只有IE能访问,但是Firefox和chrome都不行.Firefox可以使用about:config ...

  7. C# DataTable转实体通用方法

    public static class DataTableHelper { public static T GetEntity<T>(DataTable table) where T : ...

  8. jmeter从外部文件取值问题,如果文件中的参数值为纯数字形式的,jmeter会默认将其识别成int型数据

    如果你通过CSV Data Set Config或者_StringFromFile函数来参数化你的请求,需要特别注意当参数为纯数字时,jmeter会默认将其识别成int型数据,说明jmeter并不是默 ...

  9. if和switch的原理

    在C语言中,if和switch是条件分支的重要组成部分.if的功能是计算判断条件的值,根据返回的值的不同来决定跳转到哪个部分.值为真则跳转到if语句块中,否则跳过if语句块.下面来分析一个简单的if实 ...

  10. 2016-12-14 - SSH Tunnel

    2016-12-14 - SSH Tunnel ssh Network Topo Network Topo A: Internet sshd B: NAT sshd C: NAT B Create S ...