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 ...
随机推荐
- ArrayList构造函数
//1.摘要: //初始化 System.Collections.ArrayList 类的新实例,该实例为空并且具有默认初始容量. // public ArrayList(); ArrayList a ...
- VS生成桌面应用程序
1.简介 1/ 什么是WPF WPF,Windows Presentation Foundation也,译过来就是"Windows呈现基础",你看它的目的非常明确,就是用来把数据& ...
- Java泛型的定义以及对于<? extends T>和<? super T>
Java 中对于泛型方法的定义: public <T> T getT(){ .....相关代码; } 其中我对<T>的理解就是申明只是一个泛型方法的标记,T是返回的类型. 对于 ...
- openstack私有云布署实践【18 修改实例DHCP服务的DNS IP】
某天,由于Linux服务器默认没有DNS缓存功能,每次服务器每访问一个http域名链接时,都会触发一次DNS域名解析查询,降低了调用API接口的时延,所以我司后续启用的内网的dnsmasq DNS服务 ...
- db2 常用配置
db2set配置: db2set DB2_ENABLE_LDAP=NO db2set DB2_ALTERNATE_GROUP_LOOKUP=GETGROUPLIST db2set DB2_RESTOR ...
- php笔记(二)PHP类和对象之Static静态关键字
PHP类和对象之Static静态关键字 静态属性与方法可以在不实例化类的情况下调用,直接使用类名::方法名的方式进行调用.静态属性不允许对象使用->操作符调用. class Car { pr ...
- HttpGet和HttpPost的区别
HttpGet和HttpPost的区别总结就是下面这样: Get一般用于从服务器取数据,而且不改变原来的内容: Post一般用于向服务器传递数据,这需要改变服务器的内容. 从安全性上考虑,Get的安全 ...
- SpringFramework_module
org.springframework : spring-aop:基于代理的AOP spring-aspects:基于切面的AspectJ spring-beans:beans spring-cont ...
- Multi-Objective Data Placement for Multi-Cloud Socially Aware Services---INFOCOM 2014
[标题] [作者] [来源] [对本文评价] [why] 存在的问题 [how] [不足] assumption in future work [相关方法或论文] [重点提示] [其它]
- 获取所有input值 处理成json格式再利用$.post提交
<script>$(document).ready(function(){ $("#sub").click(function(){ var ...