图片轮换

最新推荐文章于 2021-06-03 07:07:56 发布

晨淼

最新推荐文章于 2021-06-03 07:07:56 发布

阅读量830

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zzq_88/article/details/12151069

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<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]).style.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" οnmοuseοver="pic.img('one')"></div>
						<div class="bai"></div><div id="two" οnmοuseοver="pic.img('two')"></div>
						<div class="bai"></div><div id="three" οnmοuseοver="pic.img('three')"></div>
						<div class="bai"></div><div id="four" οnmοuseοver="pic.img('four')"></div>
						<div class="bai"></div><div id="five" οnmοuseοver="pic.img('five')"></div>
				<div>
		</div>
	</body>
</html>

晨淼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片轮换

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.getEle
复制链接

扫一扫

专栏目录