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>
- JavaScript特效动画实例—图片轮播 右下角图片广告 原生js日历
- 流行的广告轮播(图片轮播)JS代码!!
- 用JQ 写的 广告图片轮播 幻灯片JS特效代码分享
- JavaEE day03 使用JS完成简单的数据校验、完成图片轮播效果、完成页面定时弹出广告、完成表单校验
- ecshop 首页图片广告轮播修改flash改为js-方法很简洁
- js实现淘宝首页图片轮播效果(修正图片滚动顺序的问题)
- 做一个JS实现带渐变可停顿功能的图片轮播
- js图片循环广告代码(转)
- 指定位置如果有图片显示图片,无图片显示广告的JS
- 转载——JS图片轮播器,从数据库读取图片进行轮播
- js轮播广告
- js图片轮播
- 图片轮播的js代码
- JS 图片轮播
- 《js-图片漂浮广告代码-特效》
- JS+Flash 图片轮播
- 右下角随机显示的CSS+JS图片广告
- JS_无缝广告图片左右滚动(基于JQ)
- js动画——图片轮播
- JS图片轮播器,从数据库读取图片进行轮播