html查找商品随机显示,随机显示广告.html

随机图片滚动

html,body {

margin:0;

padding:0;

}

ul {

width:220px;

margin:50px auto;

list-style-type:none;

}

li {

width:100px;

height:50px;

overflow:hidden;

float:left;

margin-right:5px;

margin-top:5px;

position:relative;

}

div {

position:absolute;

left:0;

top:0;

}

//getStyle

function getStyle(obj,attr) {

return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];

}

//shake

function shake(obj,attr,endFn) {

var pos = parseInt( getStyle(obj,attr) );

var arr = [];

var num = 0;

var timer = null; //*

for(var i=10; i>0; i -=2) {

arr.push( i,-i );

}

arr.push(0);

clearInterval(obj.shakeTimer);

obj.shakeTimer = setInterval( function () {

obj.style[attr] = pos + arr[num] + "px";

num++;

if(num === arr.length) {

clearInterval(obj.shakeTimer);

if(endFn) {

endFn();

}

}

},50 )

}

//doMove

function doMove(obj,attr,dir,target,endFn) {

dir = parseInt( getStyle(obj,attr) ) < target ? dir : -dir;

clearInterval(obj.timer);

obj.timer = setInterval( function () {

var speed = parseInt( getStyle(obj,attr) ) + dir;

if(speed > target && dir > 0 || speed < target && dir < 0) {

speed = target;

}

obj.style[attr] = speed + "px";

if(speed == target) { //*

clearInterval(obj.timer);

if(endFn) {

endFn();

}

}

},30 )

}

//opacity

function opacity(obj,step,target,frequency,endFn) {

var currentOpacity = getStyle(obj,"opacity")*100; //*

step = currentOpacity < target ? step : -step; //*

clearInterval(obj.alpha);

obj.alpha = setInterval( function () {

currentOpacity = getStyle(obj,"opacity")*100;

var nextOpacity = currentOpacity + step;

if(nextOpacity > target && step >0 || nextOpacity < target && step <0) {

nextOpacity = target;

}

obj.style.opacity = nextOpacity/100;

obj.style.filter = "alpha(opacity:"+ nextOpacity +")";

if(nextOpacity == target) {

clearInterval(obj.alpha);

if(endFn) {

endFn();

}

}

},frequency )

}

window.onload = function () {

var aLi = document.getElementsByTagName("li");

var step = 0;

function slide(li) {

var oDiv = li.getElementsByTagName("div")[0];

var flag = 0;

function slideOnce() {

setTimeout( function () {

flag = flag == 0 ? -50 : 0;

doMove( oDiv, "top" ,10 ,flag, slideOnce )

}, Math.round( Math.random()*3000 + 1000 ) );

}

slideOnce();

}

for(var i=0; i

slide( aLi[i] );

}

}

• 

  

• 

  

• 

  

• 

  

• 

  

• 

  

• 

  

• 

  

一键复制

编辑

Web IDE

原始数据

按行查看

历史