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
| <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
*{margin: 0px; padding: 0px;}
html,body{width: 100%; height: 100%;overflow: hidden;}
.section-wrap{width: 100%; height: 100%; overflow: visible;transition:transform 1s cubic-bezier(0.86,0,0.03,1);-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);}
.section-wrap .section{width: 100%; height: 100%;}
.section-1{background: #0f0}
.section-2{background: #FF0}
.put-section-1{ transform:translateY(0);-webkit-transform:translateY(0);}
.put-section-2{ transform:translateY(-100%);-webkit-transform:translateY(-100%);}
.section-btn{ width:14px;position:fixed;right:4%;top:50%;}
.section-btn li{ width:14px;height:14px;cursor:pointer;text-indent:-9999px;border-radius:50%;-webkit-border-radius:50%;margin-bottom:12px; background:#BD362F;text-align:center; color:#fff; onsor:pointer;}
.section-btn li.on{ background:#fff}
</style>
<body>
<section class='section-wrap put-section-1'>
<div class="section section-1">
<div class='title'>
<p class="tit">111</p>
</div>
</div>
<div class="section section-2">
<div class='title'>
<p class="tit">222</p>
</div>
</div>
</section>
<ul class="section-btn">
<li class="on"></li>
<li></li>
</ul>
<script type="text/javascript" src='jiaoben3135/js/jquery.min.js'></script>
<script type="text/javascript">
$(function(){
var i=1;
var $btn = $('.section-btn li'),
$wrap = $('.section-wrap'),
$arrow = $('.arrow');
function up(){i++;if(i>$btn.length){i=1};}
function down(){i--;if(i<1){i=$btn.length};}
function run(){
$btn.eq(i-1).addClass('on').siblings().removeClass('on');
$wrap.attr("class","section-wrap").addClass(function() { return "put-section-"+i; }).find('.section').eq(i).find('.title').addClass('active');
};
$btn.each(function(index) {
$(this).click(function(){
i=index+1;
run();
})
});
$arrow.one('click',go);
function go(){
up();run();
setTimeout(function(){$arrow.one('click',go)},1000)
};
$wrap.one('mousewheel',mouse_);
function mouse_(event){
if(event.deltaY<0) {up()}
else{down()}
run();
setTimeout(function(){$wrap.one('mousewheel',mouse_)},1000)
};
$(document).one('keydown',k);
function k(event){
var e=event||window.event;
var key=e.keyCode||e.which||e.charCode;
switch(key) {
case 38: down();run();
break;
case 40: up();run();
break;
};
setTimeout(function(){$(document).one('keydown',k)},1000);
}
});
</script>
</body>
</html>
|