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>

时间: 2025-01-01 07:46:58

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

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

最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(再次表示感谢),但是没有首尾相接的功能,本人在此基础上增加了首尾相接功能. 效果如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra

基于原生js的图片轮播效果简单实现

基本效果如下: 实现了三张图片自动轮播+按键点击切换的效果. 基本思想: 图片轮播的效果和老式电影院的胶片放映形式很相似,在老式的电影院放映中,使用长长的胶片记录影片,胶片上是按顺序排列的一系列图片,通过快速通过放映机放映口,使这些图片产生一个连贯的切换效果,形成了动态的影片.所以,这里图片轮播的形式也可以采用这种方式来形成动画效果. 形式如下图: (黑框即我们的最外层的容器,充当放映机的存在:绿框就是胶片,上面搭载着很多的图片:粉框内即我们要轮播的图片) 从上图出发,我们要做到图片轮播,那么只

用JS做图片轮播

脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:mdxy-dxy 网上比较常见的用jquery实现的图片轮播效果代码. 演示地址:http://img.jb51.net/online/picPlayer/picplay.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/

原生js实现图片轮播效果

思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Carousel figure</title> 5 <meta charset="utf-8"> 6 <!-- 浏览器标签页显示图标 --> 7 <lin

js实现图片轮播

实现图片轮播的效果 1 <script language =javascript > 2 function $(id){ 3 return document.getElementById(id); 4 } 5 var curIndex = 0; 6 //时间间隔 单位毫秒 7 var times = 1000; 8 var arr = []; 9 arr[0] = "0.jpg"; 10 arr[1] = "1.jpg"; 11 arr[2] = &qu

JS——网页图片轮播特效

焦点图轮播 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"><head> 3 <meta http-equiv="Content-T

CSS/HTML/JS实现图片轮播

实现原理 将点击的a标签的href属性值赋给img标签的src属性,这样有个好处,就是如果浏览器不支持js的话,点击a标签也可跳转到图片地址看到图片,不会影响内容的呈现 注:需要导入jquery库 html代码 <div class="banner"> <img src="1.png"> <ul> <li><a href="1.png">1</a></li> &l

js实现图片轮播图(一)

一.实现原理 (1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏: (2)轮播图分为手动轮播和自动轮播: 手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示: 自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片. (3)所有的基础知识:dom操作,定时器,事件运用. 二.轮播图页面布局: <div id="content">   <!-- 总

实现广告图片轮播效果-AndroidImageSild

在AS中的使用: 1.在build文件中进行配置 compile 'com.squareup.picasso:picasso:2.3.2' compile 'com.nineoldandroids:library:2.4.0' compile 'com.daimajia.slider:library:[email protected]' 2.权限 <uses-permission android:name="android.permission.INTERNET" />