大图tab

Posted on

首页头部的图片切换案例

1
2
做前端的一定要会做头部的图片切换，例如淘宝、京东等等页面都有这些功能，所以我们可以做好一些例子把它封成一个函数，以备不时之需！！
以下所介绍的是，以淘宝和京东为例子的切换案例，喜欢就收下

左右移动的图片切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="wrap">
	<div class="inner">
		<img src="1.jpg"/>
		<img src="2.jpg"/>
		<img src="3.jpg"/>
		<img src="4.jpg"/>
		<img src="1.jpg"/>
	</div>
	<div id="left"><</div>
	<div id="right">></div>
	<div id="dd">
		<span class="select"></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>
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
.wrap{
	width: 520px;
	height: 280px;
	border: 5px solid skyblue;
	overflow: hidden;
	position: relative;
}
.inner{
	width: 500%;
	overflow: hidden;
	position: relative;
}
.inner img{
	width: 520px;
	float: left;
}
#left{
	width: 24px;
	height: 36px;
	position: absolute;
	background: rgba(0,0,0,0.5);
	left: 0;
	top: 46.538461%;
	font-size: 30px;
	text-align: center;
	line-height: 36px;
	color: white;
	cursor: pointer;
}
#right{
	width: 24px;
	height: 36px;
	position: absolute;
	background: rgba(0,0,0,0.5);
	right: 0;
	top: 46.538461%;
	font-size: 30px;
	text-align: center;
	line-height: 36px;
	color: white;
	cursor: pointer;
}
#dd{
	width: 60px;
	height: 13px;
	border-radius: 5px;
	background: rgba(255,255,255,0.3);
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 10px;
}
#dd span{
	width: 9px;
	height: 9px;
	background: #b7b7b7;
	border-radius: 5px;
	float: left;
	margin-left: 5px;
}
#dd .select{
	background: red;
}
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
//获取移动标签
var inner = document.getElementsByClassName('inner')[0];
//获取左右按钮
var lBtn = document.getElementById('left');
var rBtn = document.getElementById('right');
//获取图片位置点
var span = document.getElementsByTagName('span');
	
//定义记录图片位置值
var index = 0;
//定义布尔值记录动画是否开始
var move_bol = false;
	
//自动化动画
var mytimer =setInterval(function(){
	rBtn.click();
	//模拟手动点击下一张，每3000毫秒点击一次
},3000);
//下一张点击事件
rBtn.onclick = function(){
	if(move_bol){return}
	//动画正在移动就退出点击事件
	index ++;//记录位置
	if (index > 4) {
		index = 1;
		//最后一张时记录位置为第二张
		inner.style.left = '0px';
		//回到第一张
	}
	moveFn();
	//执行动画函数
	changespanFn();
	//执行图片位置点切换函数
}
//上一张点击事件
lBtn.onclick = function(){
	if(move_bol){return}
	//动画正在移动就退出点击事件
	index --;//记录位置
	if (index < 0) {
		index = 3;
		//第一张时记录位置为最后一张
		inner.style.left = '-2080px';
		//到达末尾第一张（注：末尾就是第一张  ）
	}
	moveFn();
	//执行动画函数
	changespanFn();
	//执行图片位置点切换函数
}
//图片位置点切换的点击事件
for (var i=0; i < span.length; i++) {
	span[i].index = i;
	//记录图片位置点位置
	span[i].onclick = function(){
		if(move_bol){return}
		//动画正在移动就退出点击事件
		index = this.index;
		//把图片位置点位置赋值给位置
		changespanFn();
		//执行动画函数
		moveFn();
		//执行图片位置点切换函数
	}
}
	
//图片位置点切换的函数
function changespanFn(){
	for(var i=0; i< span.length; i++){
		span[i].className = '';
		//清空所有图片位置点的样式，防止样式重叠
	}
	var j;
	if (index == 4) {
	//末尾时是第一张
		j = 0;
	}else{
		j = index;
	}
	span[j].className ='select';
	//设置当前图片位置点的样式
}
//图片动画函数	
function moveFn(){
	move_bol = true;
	//记录动画开始
	var start = parseInt(inner.style.left) || 0;
	//初始位置
	var change = -(inner.children[0].offsetWidth)*index-start;
	//移动的距离
	var t = 0;
	//第几步开始
	var endT = 30;
	//执行步数
	
	var timer = setInterval(function(){
		t++;
		//每30毫秒加一步
		if(t >= endT){
			clearInterval(timer);
			//endT步后清除计时器
			move_bol = false;
			//记录动画结束
		}
		//调用运动曲线Bounce的easeOut函数参数顺序：第几步开始，初始位置，移动的距离，执行步数
		var l = Tween.Bounce.easeOut(t, start, change, endT);
		//计算每30毫秒移动的距离
		inner.style.left = l+'px';
		//移动
	},30)
}

最后附上Tween的js代码

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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
// JavaScript Document
var Tween = {
    Linear: function(t,b,c,d){ return c*t/d + b; },
    Quad: {
        easeIn: function(t,b,c,d){
            return c*(t/=d)*t + b;
        },
        easeOut: function(t,b,c,d){
            return -c *(t/=d)*(t-2) + b;
        },
        easeInOut: function(t,b,c,d){
            if ((t/=d/2) < 1) return c/2*t*t + b;
            return -c/2 * ((--t)*(t-2) - 1) + b;
        }
    },
    Cubic: {
        easeIn: function(t,b,c,d){
            return c*(t/=d)*t*t + b;
        },
        easeOut: function(t,b,c,d){
            return c*((t=t/d-1)*t*t + 1) + b;
        },
        easeInOut: function(t,b,c,d){
            if ((t/=d/2) < 1) return c/2*t*t*t + b;
            return c/2*((t-=2)*t*t + 2) + b;
        }
    },
    Quart: {
        easeIn: function(t,b,c,d){
            return c*(t/=d)*t*t*t + b;
        },
        easeOut: function(t,b,c,d){
            return -c * ((t=t/d-1)*t*t*t - 1) + b;
        },
        easeInOut: function(t,b,c,d){
            if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
            return -c/2 * ((t-=2)*t*t*t - 2) + b;
        }
    },
    Quint: {
        easeIn: function(t,b,c,d){
            return c*(t/=d)*t*t*t*t + b;
        },
        easeOut: function(t,b,c,d){
            return c*((t=t/d-1)*t*t*t*t + 1) + b;
        },
        easeInOut: function(t,b,c,d){
            if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
            return c/2*((t-=2)*t*t*t*t + 2) + b;
        }
    },
    Sine: {
        easeIn: function(t,b,c,d){
            return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
        },
        easeOut: function(t,b,c,d){
            return c * Math.sin(t/d * (Math.PI/2)) + b;
        },
        easeInOut: function(t,b,c,d){
            return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
        }
    },
    Expo: {
        easeIn: function(t,b,c,d){
            return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
        },
        easeOut: function(t,b,c,d){
            return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
        },
        easeInOut: function(t,b,c,d){
            if (t==0) return b;
            if (t==d) return b+c;
            if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
            return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
        }
    },
    Circ: {
        easeIn: function(t,b,c,d){
            return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
        },
        easeOut: function(t,b,c,d){
            return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
        },
        easeInOut: function(t,b,c,d){
            if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
            return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
        }
    },
    Elastic: {
        easeIn: function(t,b,c,d,a,p){
            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        },
        easeOut: function(t,b,c,d,a,p){
            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
        },
        easeInOut: function(t,b,c,d,a,p){
            if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
            return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
        }
    },
    Back: {
        easeIn: function(t,b,c,d,s){
            if (s == undefined) s = 1.70158;
            return c*(t/=d)*t*((s+1)*t - s) + b;
        },
        easeOut: function(t,b,c,d,s){
            if (s == undefined) s = 1.70158;
            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
        },
        easeInOut: function(t,b,c,d,s){
            if (s == undefined) s = 1.70158; 
            if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
            return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
        }
    },
    Bounce: {
        easeIn: function(t,b,c,d){
            return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
        },
        easeOut: function(t,b,c,d){
            if ((t/=d) < (1/2.75)) {
                return c*(7.5625*t*t) + b;
            } else if (t < (2/2.75)) {
                return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
            } else if (t < (2.5/2.75)) {
                return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
            } else {
                return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
            }
        },
        easeInOut: function(t,b,c,d){
            if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
            else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
        }
    }
}

淡入类型的图片切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="wrap">
	<div class="inner">
		<img style="opacity: 1;" src="1.jpg"/>
		<img src="2.jpg"/>
		<img src="3.jpg"/>
		<img src="4.jpg"/>
	</div>
	<div id="left"><</div>
	<div id="right">></div>
	<div id="dd">
		<span class="select"></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>
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
.wrap{
	width: 520px;
	height: 280px;
	border: 5px solid skyblue;
	overflow: hidden;
	position: relative;
}
.inner{
	width: 500%;
	overflow: hidden;
	height: 100%;
	position: relative;
}
.inner img{
	width: 520px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	opacity: 0;
}
#left{
	width: 24px;
	height: 36px;
	position: absolute;
	background: rgba(0,0,0,0.5);
	left: 0;
	top: 46.538461%;
	font-size: 30px;
	text-align: center;
	line-height: 36px;
	color: white;
	cursor: pointer;
	z-index: 2;
}
#right{
	width: 24px;
	height: 36px;
	position: absolute;
	background: rgba(0,0,0,0.5);
	right: 0;
	top: 46.538461%;
	font-size: 30px;
	text-align: center;
	line-height: 36px;
	color: white;
	cursor: pointer;
	z-index: 2;
}
#dd{
	width: 60px;
	height: 13px;
	border-radius: 5px;
	background: rgba(255,255,255,0.3);
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 10px;
	z-index: 2;
}
#dd span{
	width: 9px;
	height: 9px;
	background: #b7b7b7;
	border-radius: 5px;
	float: left;
	margin-left: 5px;
}
#dd .select{
	background: red;
}
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
//获取移动标签
var inner = document.getElementsByClassName('inner')[0];
//获取左右按钮
var lBtn = document.getElementById('left');
var rBtn = document.getElementById('right');
//获取图片位置点
var span = document.getElementsByTagName('span');
var img = inner.getElementsByTagName('img');
//定义记录图片位置值
var index = 0;
//定义布尔值记录动画是否开始
var move_bol = false;
	
//自动化动画
var mytimer =setInterval(function(){
	rBtn.click();
	//模拟手动点击下一张，每3000毫秒点击一次
},3000);
//下一张点击事件
rBtn.onclick = function(){
	if(move_bol){return}
	//动画正在执行就退出点击事件
	var before = index;
	index ++;//记录位置
	if (index > 3) {
		index = 0;
		//最后一张时记录位置为第二张
	}
	showFn(before);
	//执行动画函数
	changespanFn();
	//执行图片位置点切换函数
}
//上一张点击事件
lBtn.onclick = function(){
	if(move_bol){return}
	//动画正在执行就退出点击事件
	var before = index;
	index --;//记录位置
	if (index < 0) {
		index = 3;
		//第一张时记录位置为最后一张
	}
	showFn(before);
	//执行动画函数
	changespanFn();
	//执行图片位置点切换函数
}
//图片位置点切换的点击事件
for (var i=0; i < span.length; i++) {
	span[i].index = i;
	//记录图片位置点位置
	span[i].onclick = function(){
		if(move_bol){return}
		//动画正在执行就退出点击事件
		var before = index;
		index = this.index;
		//把图片位置点位置赋值给位置
		changespanFn();
		//执行动画函数
		showFn(before);
		//执行图片位置点切换函数
	}
}
	
//图片位置点切换的函数
function changespanFn(){
	for(var i=0; i< span.length; i++){
		span[i].className = '';
		//清空所有图片位置点的样式，防止样式重叠
	}
	span[index].className ='select';
	//设置当前图片位置点的样式
}
//图片动画函数
function showFn(before){
	move_bol = true;
	//记录动画开始
	var t = 0;
	//初始透明度
	for(var i=0; i< img.length; i++){
		img[i].style.zIndex = 0;
		if(before!=i){
			img[i].style.opacity = 0;
			//除上一张以外其他设为透明，让显示不违和
		}
	}
	img[index].style.zIndex = 1;
	//当前张位置上移覆盖上一张
	var timer = setInterval(function(){
		t++;
		//逐渐增加不透明度
		if(t >= 50){
			clearInterval(timer);
			move_bol = false;
			//记录动画结束
		}
		img[index].style.opacity = t/50 ;
	},30)
}