JS 幻灯练习(全屏，图片自定义数量)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="http://luxury.bjhoutai.com/js/jquery-1.8.2.min.js"></script>
<style>
*{margin:0px; padding:0px;}
img{border:0px; float:left; width:25%; height:200px;} //宽度100%除以切换个数
.c{ clear:both}
#tabimg{width:100%; height:200px; overflow:hidden; position:relative}
#mrt{height:200px; position:absolute}
#mrt2{ position:absolute; top:170px; }
#mrt2 li{ z-index:9;width:15px; margin:0px 5px; height:15px; background:#CCCCCC;float:left; list-style:none}
</style>
<body>
<div id='tabimg'>
<div id='mrt'>
<img src='http://luxury.bjhoutai.com/images/ad_auto.jpg' />
<img src='http://luxury.bjhoutai.com/images/ad_home.jpg' />
<img src='http://luxury.bjhoutai.com/images/ad_nba.jpg' />
<img src='http://luxury.bjhoutai.com/images/ad_stock.jpg' />
</div>
<ul id='mrt2'></ul>
</div>
<script>
// JavaScript Document
var time = 2000; //时间
var color = '#CCC'; //焦点颜色
var hovercolor = '#333'; //经过焦点颜色
var width=document.documentElement.clientWidth;
var insertText;
var x=document.getElementById('mrt');
var x2=document.getElementById('tabimg');
var x3 = document.getElementById('mrt2');
var length = x.getElementsByTagName("img").length;
x3.style.width = length*25+"px";
x3.style.margin = "0px 0px 0px "+length*25/-2+"px";
x3.style.left = width/2+"px";
x.style.width = length*width+"px";
var int=setInterval("move()",time);
$(function(){
for(j = 0 ; j < length ; j++){
if(j == 0){insertText = "<li style='background:"+hovercolor+"'></li>"; continue;}
insertText += "<li></li>";
x3.innerHTML = insertText;
}
for(s = 0 ; s < length ; s++){
x3.getElementsByTagName('li')[s].className = 'btn';
x3.getElementsByTagName('li')[s].id = 'btn' + s;
}
$('#mrt2 li').each(function(i) {
$(this).mouseover(function(){
window.clearInterval(int);
$('#mrt2 li:eq('+i+')').css('background',hovercolor).siblings('li').css('background',color);
$("#mrt").stop().animate({left:-width*i+"px"});
});
});
$('#mrt2 li').mouseleave(function(){int = setInterval('move()',time);
});
});
function move(){
index = -Math.round(parseInt(x.style.left)/width)+1;
if(index<length){
$("#mrt").stop().animate({left:"-"+width*index+"px"});
$('.btn').css('background',color);
$('#btn'+index).css('background',hovercolor);
}
else{
index = 0;
$("#mrt").stop().animate({left:"0px"});
$('.btn').css('background',color);
$('#btn0').css('background',hovercolor);
}
}
</script>
</body>
</html>
