JavaScript之图片的转换

将选项卡式的图片滚动


<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
img{
	border:none;
	vartical-alight:top;
}
#box{
	width:800px;
	height:300px;
	margin:100px auto;
	position:relative;
	overflow:hidden;
}
ul{
	width:800px;
	position:absolute;
	left:0;
	top:0;
}
ul li{
	list-style-type:none;
	display:none;
}
ol{
	z-index:2px;
	position:absolute;
	bottom:10px;
	width:120px;
	position:absolute;
	right:10px;
	bottom:10px;
}
ol li{
	list-style-type:none;
	float:left;
	width:20px;
	height:20px;
	margin:0 2px;
	background:#fff;
	color:#f60;
	line-height:20px;
	text-align:center;
}
ol .active{
	background:#f60;
	color:#fff;
}
ol li:hover{
	cursor:pointer;	
	}
</style>
<script>
window.onload=function(){
	var oUl=document.getElementsByTagName('ul')[0];
		var aLiul=oUl.getElementsByTagName('li');	
		var oOl=document.getElementsByTagName('ol')[0];
		var aLiol=oOl.getElementsByTagName('li');
		for(var i=0;i<aLiol.length;i++){
			aLiol[i].index=i;
			aLiol[i].onmouseover=function(){
					for(var i=0;i<aLiol.length;i++){
						aLiol[i].className='';
						aLiul[i].style.display='none';
				}
				this.className='active';
				aLiul[this.index].style.display='block';
			}	
		}
	}
</script>
</head>
<body>
<div id="box">
	<ul>
    	<li style="display:block;opacity:1;"><img src="img/1.png" /></li>
        <li><img src="img/2.png" /></li>
        <li><img src="img/3.png" /></li>
        <li><img src="img/4.png" /></li>
    </ul>
    <ol>
    	<li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
</div>
</body>
</html>

图片轮播

/index.html/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128 	<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="move.js"></script>
		<script>
			window.onload=function(){
				
				var outer=document.getElementById("outer");
				var imgArr=document.getElementsByTagName("img");
				
				var imgul=document.getElementsByTagName("ul")[0];
				var imgli=imgul.getElementsByTagName("li");
				
				imgul.style.width=650*imgli.length+"px";
				
				
				var index=0;
				var navdiv=document.getElementById("navdiv");
				var alla=document.getElementsByTagName("a");
				
				alla[index].style.background="red";
				
				/*点击超链接现实出图片*/
				
				for(var i=0;i<alla.length;i++){
					/*贴标签*/
					alla[i].num=i;
					alla[i].onmouseover=function(){
						//获取点击超链接的索引
						index=this.num;
						/*imgul.style.left=-index*650+"px";*/
						seta();
						
						startMove(imgul,{left:-650*index});
					}
				}
				autochange();
				function seta(){
					
					for (var i=0;i<alla.length;i++){
						alla[i].style.background="#9E0022";
					}
					alla[index].style.background="red";
				}
				//自动切换图片
				function autochange(){
					setInterval(function(){
						//索引自增
						index++;
						index=index%imgli.length;
						startMove(imgul,{left:-650*index})
						//修改导航点
						seta();
					},3000);
				}
				
			}
			
		</script>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#outer{
				width:650px;
				height:450px;
				margin:0 auto;
				
				position:relative;
				overflow: hidden;
			}
			ul{
				height:450px;
				position:absolute;
				left:0;
			}
			ul li{
				width:650px;
				height:450px;
				list-style: none;
				float:left;
		
				box-sizing:border-box;
			}
			#navdiv{
				position:absolute;
				bottom:5%;
				right:35%;
			}
			#navdiv a{
				display:block;
				width:20px;
				height:20px;
				margin:0 5px;
				float:left;
				background:#9E0022;
				
			}
			#navdiv a:hover{
				background:red;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<ul>
				<li><img src="images/g10.jpg"/></li>
				<li><img src="images/g6.jpg"/></li>
				<li><img src="images/g2.jpg"/></li>
				<li><img src="images/g5.jpg"/></li>
				<li><img src="images/g7.jpg"/></li>
				<li><img src="images/g4.jpg"/></li>
				
			</ul>
			<div id="navdiv">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>
	</body>
</html>

/move.js/

function startMove(obj,json,endFn){
	
		clearInterval(obj.timer);
		
		obj.timer = setInterval(function(){
			
			var bBtn = true;
			
			for(var attr in json){
				
				var iCur = 0;
			
				if(attr == 'opacity'){
					if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
					iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
					
					}
					else{
						iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
					}	
				}
				else{
					iCur = parseInt(getStyle(obj,attr)) || 0;
				}
				
				var iSpeed = (json[attr] - iCur)/20;
			iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
				if(iCur!=json[attr]){
					bBtn = false;
				}
				
				if(attr == 'opacity'){
					obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
					obj.style.opacity = (iCur + iSpeed)/100;
					
				}
				else{
					obj.style[attr] = iCur + iSpeed + 'px';
				}
				
				
			}
			
			if(bBtn){
				clearInterval(obj.timer);
				
				if(endFn){
					endFn.call(obj);
				}
			}
			
		},30);
	
	}
	
	
	function getStyle(obj,attr){
		if(obj.currentStyle){
			return obj.currentStyle[attr];
		}
		else{
			return getComputedStyle(obj,false)[attr];
		}
	}