js广告图片轮播
<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广告图片轮播的更多相关文章
- jQuery - 广告图片轮播切换
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
- 纯js写图片轮播插件
最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...
- 用JS做图片轮播
脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...
- js加强版图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js实现图片轮播效果
思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...
- html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
- 使用JS实现图片轮播(前后首尾相接)
最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(在此表示感谢),但是没有首尾相 ...
- ios 学习 广告图片轮播器
// // ViewController.m // 图片轮播器 // // Created by zjj on 15/5/23. // Copyright (c) 2015年 zjj. All rig ...
随机推荐
- 又遇Release编译的一坑 -- 应用程序正常初始化(0xc000007b)失败。请单击“确定”,终止应用程序。
项目中使用了xlslib库,以动态库形式编译,由于它没有生成链接库lib文件,所以官方提供的demo中有createDLL这个小程序用来生成lib文件.然而我又 no zuo no die了一次. ...
- php常量作用
PHP常量的特点是: 1.不能通过外部来传递,也就是不能通过get与post还有cookie等方式来传递赋值,所以可以确定是程序执行过程中定义的,非外界变量.2.定义后不能更改,可以防止被篡改. 基于 ...
- python项目练习地址
作者:Wayne Shi链接:http://www.zhihu.com/question/29372574/answer/88744491来源:知乎著作权归作者所有,转载请联系作者获得授权. 目前是3 ...
- Sonatype Nexus 服务启动失败问题解决
Sonatype Nexus 服务启动失败问题解决 问题前述: 近日在开发机本机安装了 Oracle 数据库快捷版 11g2 之后,重启电脑后发现本机的maven代理服务无法访问. 现象 通过 Win ...
- Redis同步操作失败的原因
今天弄了下 Redis 的主从同步,设置方法其实很简单的,但崩溃的是遇到个莫名其妙的问题,始终同步不了.. 看了看错误日志: Unable to connect to MASTER: Invalid ...
- sealed的作用
sealed 修饰符表示密封 用于类时,表示该类不能再被继承,不能和 abstract 同时使用,因为这两个修饰符在含义上互相排斥 用于方法和属性时,表示该方法或属性不能再被重写,必须和 overri ...
- Struts2中一个自定义拦截器的使用
1.自定义的拦截器的类: package it.web.interceptor; import com.opensymphony.xwork2.ActionContext; import com.op ...
- php干不了的活
服务端除了web请求,还有很多需要长时间运行的任务在后台执行. 哪些事情是其它语言能做,php做不了的? 有人说,php基本不会成为服务端的瓶颈.事实如此吗? 已知问题:即使在web前端,连接数是ph ...
- Java的设计模式----strategy(策略模式)
设计模式: 一个程序员对设计模式的理解: “不懂”为什么要把很简单的东西搞得那么复杂.后来随着软件开发经验的增加才开始明白我所看到的“复杂”恰恰就是设计模式的精髓所在,我所理解的“简单”就是一把钥匙开 ...
- 解决“在UBUNTU下打开windows中创建的文本文件,中文显示乱码”的问题 。
在UBUNTU下打开windows中用notepad等工具创建的txt或程序源码等文本文件,中文显示乱码,原因是windows中的txt文件编码方式为GBK,UBUNTU中为utf-8. 解决办法:在 ...