您的位置：首页 > Web前端 > JavaScript

JS 幻灯练习(全屏，图片自定义数量)

2015-04-23 11:32 711 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航