模仿爱奇艺首页图片轮播：
HTML代码：
<!doctype html>
<html>
<head>
<meta charset='utf-8'/>
<title>爱奇艺轮播图</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<script src="move.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function (){
var arr=['第1张','第2张','第3张','第4张','第5张','第6张','第7张','第8张','第9张','第10张'];
var domWidth = document.documentElement.clientWidth;
var aScrollLi = $('scroll_ul').getElementsByTagName('li');
var aThumbLi = $('thumb_ul').getElementsByTagName('li');
var timer = null;
var iNow=0;
for(var m=0; m<aScrollLi.length; m++){
aScrollLi[m].style.backgroundPosition = -parseInt((1500-$('outline').offsetWidth)/2)+'px,0px';
}
window.onresize =function (){
for(var m=0; m<aScrollLi.length; m++){
aScrollLi[m].style.backgroundPosition = -parseInt((1500-$('outline').offsetWidth)/2)+'px,0px';
}
}
for(var i=0; i<aThumbLi.length; i++){
aThumbLi[i].index = i;
aThumbLi[i].onclick=function (){
iNow = this.index;
scroll(this);
};
}
timer = setInterval(function(){
if(iNow == aScrollLi.length-1){
iNow=0;
}else{
iNow++;
}
scroll(aThumbLi[iNow]);
},1000);
$('outline').onmouseover = function(){
clearInterval(timer);
}
$('outline').onmouseout = function(){
timer = setInterval(function(){
if(iNow == aScrollLi.length-1){
iNow=0;
}else{
iNow++;
}
scroll(aThumbLi[iNow]);
},1000);
}
function scroll(obj){
for(var j=0; j<aThumbLi.length; j++){
aThumbLi[j].className = '';
aScrollLi[j].style.display = 'none';
}
obj.className = 'active';
aScrollLi[iNow].style.display = 'block';
aScrollLi[iNow].style.opacity = 0;
aScrollLi[iNow].style.filter = "alpha(opacity:0)";
move(aScrollLi[iNow],{opacity:100},8);
$('info').innerHTML = arr[iNow];
$('info').style.bottom = '-20px';
move($('info'),{bottom:20},8);
}
}
</script>
</head>
<body>
<div id="outline">
<div id="scroll">
<ul id="scroll_ul">
<li style="background-image:url(img/1.jpg);"><a href="#"></a></li>
<li style="background-image:url(img/2.jpg);"><a href="#"></a></li>
<li style="background-image:url(img/3.jpg);"><a href="#"></a></li>
<li style="background-image:url(img/4.jpg);"><a href="#"></a></li>
<li style="background-image:url(img/5.jpg);"><a href="#"></a></li>
<li style="background-image:url(img/6.jpg);"><a href="#"></a></li>
<li style="background-image:url(img/7.jpg);"><a href="#"></a></li>
<li style="background-image:url(img/8.jpg);"><a href="#"></a></li>
<li style="background-image:url(img/9.jpg);"><a href="#"></a></li>
<li style="background-image:url(img/10.jpg);"><a href="#"></a></li>
</ul>
</div>
<div id="thumb">
<ul id="thumb_ul">
<li class='active'><img src='img/1_1.jpg' /></li>
<li><img src='img/2_2.jpg' /></li>
<li><img src='img/3_3.jpg' /></li>
<li><img src='img/4_4.jpg' /></li>
<li><img src='img/5_5.jpg' /></li>
<li><img src='img/6_6.jpg' /></li>
<li><img src='img/7_7.jpg' /></li>
<li><img src='img/8_8.jpg' /></li>
<li><img src='img/9_9.jpg' /></li>
<li><img src='img/10_10.jpg' /></li>
</ul>
</div>
<div id="info">第1张</div>
</div>
</body>
</html>
CSS代码：
*{padding:0px; margin:0px;}
html{background:#fff;color:#000;}
ul{list-style:none;}
#outline{width:auto; min-width:1000px; height:410px; background:#000; margin-top:20px; overflow:hidden; position:relative;}
#outline #scroll ul {height:410px;}
#outline #scroll ul li{height:410px;}
#outline #thumb{width:150px; background:url(img/bgphone.png) no-repeat left top; padding:13px; position:absolute; top:10px; right:10px;}
#outline #thumb ul{height:auto; overflow:hidden; background:#000; border-radius:5px;}
#outline #thumb li{float:left; margin-bottom:1px; filter:alpha(opacity:60); opacity:0.6; cursor:pointer;}
#outline #thumb li.active{filter:alpha(opacity:100); opacity:1;}
#outline #thumb li img{display:block;}
#outline #info{position:absolute; left:20px; bottom:20px; color:#fff; font-size:16px; width:100px; height:20px; line-height:20px;}
JS代码：
function move(obj,json,iSpeed,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var oBtn=true;
for(var attr in json){
if(attr == 'opacity'){
iCur = parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
iCur = parseInt(getStyle(obj,attr));
}
speed = (json[attr]-iCur)/iSpeed;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(iCur != json[attr]){
oBtn = false;
}
if(attr == 'opacity'){
obj.style.filter = "alpha(opacity:"+(iCur+speed)+")";
obj.style.opacity = (iCur+speed)/100;
}else{
obj.style[attr] = (iCur+speed)+'px';
}
}
if(oBtn){
clearInterval(obj.timer);
obj.timer=null;
if(fn){
fn();
}
}
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,null)[attr];
}
}
function $(obj){
return document.getElementById(obj);
}
如果有什么不懂，可以咨询：QQ1003837059.请注明来自百度知道本回答被提问者采纳