您的位置：首页 > 其它
图片轮换

2013-09-30 08:08 176 查看
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<script>
var arr = Array('one','two','three','four','five');
var pic;//图片对象
var i = 0;//计数
var time;
function $(x){
return document.getElementById(x);
}
function $n(x){
return document.getElementsByTagName(x);
}
function picture(){
this.time = function(){
window.clearInterval(time);
time = window.setInterval('pic.display()',1000);//先让图片动起来
}
this.display = function(){
var len = arr.length;
i++;
if(i>=len){
i=0;
}
$n('img')[0].src = './images/'+arr[i]+'.jpg';
this.background_img();
}

//stop
this.stop = function(){
window.clearInterval(time);
}

//start
this.start = function(){
this.time();
}

//下标
this.xiabiao = function(value){
var x;
//遍历找出value在数组中的下标
for(var j=0,len=arr.length;j<len;++j){
if(arr[j] == value){
x = j;
}
}
return x;
}
//按钮(value是鼠标碰到图片切换按钮时的值)
this.img = function(value){

window.clearInterval(time);
//找下标(方法)
i = this.xiabiao(value);
$n('img')[0].src = './images/'+arr[i]+'.jpg';
//自动切换按钮背景色css
this.background_img()
}

//图片自动切换按钮背景色
this.background_img = function(){
//alert(i);
for(var x=0,len=arr.length;x<len;++x){
if(x != i){
$(arr[x]).style.background = '';
}
$(arr[i]).styl
9dae
e.background = 'red';
}
}
}

//控制器
window.onload = function(){
pic = new picture();//实例化一个图片类对象
pic.time();
$n('img')[0].onmouseover = function(){pic.stop();};
$n('img')[0].onmouseout = function(){pic.start();};

//鼠标离开自动切换按钮区域开始图片转换
$('div1').onmouseover = function(){
for(var j=0,len=arr.length;j<len;j++){
$(arr[j]).onmouseout = function(){pic.start();};
}
}

}
</script>
<style>
body{
margin:0px;
padding:0px;
text-align:center;
}
#xiaomi{
width:940px;
height:410px;
margin:auto;
text-align:left;
}
#div1{
width:200px;
height:20px;
background:blue;
float:right;
}
#one,#two,#three,#four,#five{
height:20px;
width:20px;
background:green;
float:left;
}
.bai{
height:20px;
width:20px;
background:white;
float:left;
}
</style>
<body>
<div id="xiaomi">
<img src="./images/one.jpg"></img>
<div id="div1">
<div class="bai"></div><div id="one" onmouseover="pic.img('one')"></div>
<div class="bai"></div><div id="two" onmouseover="pic.img('two')"></div>
<div class="bai"></div><div id="three" onmouseover="pic.img('three')"></div>
<div class="bai"></div><div id="four" onmouseover="pic.img('four')"></div>
<div class="bai"></div><div id="five" onmouseover="pic.img('five')"></div>
<div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航