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>

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。