-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
90 lines (86 loc) · 3.1 KB
/
test.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
*{padding: 0; margin: 0;}
.banner{position: relative; width: 1191px; height: 304px; overflow: hidden;}
.banner_list img{ border:none;}
.banner .page-ul{position: absolute;list-style-type: none;filter:alpha(Opacity=80); opacity: .8; z-index: 1000; margin:0; padding:0;bottom: 20px;left: 124px}
.banner ul.page-ul li{margin: 0px 5px; float: left; background: #000;cursor: pointer; width: 10px; height: 10px;}
.banner ul.page-ul li.on{background: #fff;}
.banner .ctrl{width: 39px; height: 80px;position: absolute;z-index: 1000; background-image: url(img/bg_all.png); background-repeat: no-repeat; cursor: pointer;}
.banner #prev{background-position: -51px 0px; top: 110px; left: 20px;}
.banner #prev:hover{background-position: -95px 0px;}
.banner #next{background-position: -51px -83px; top: 110px; right: 20px;}
.banner #next:hover{background-position: -95px -83px;}
</style>
</head>
<body>
<div class="banner">
<ul class="page-ul">
<li data-id="1" class="on"></li>
<li data-id="2"></li>
<li data-id="3"></li>
<li data-id="4"></li>
</ul>
<div class="ctrl" id="prev"></div>
<div class="ctrl" id="next"></div>
<ul class="banner_list">
<li>
<a href="#" target="_blank" data-listIndex="1">
<img src="img/banner1.jpg" alt="다饋1" title="다饋1" class="lazy">
</a>
</li>
<li>
<a href="#" target="_blank" data-listIndex="1">
<img src="img/banner2.jpg" alt="다饋2" title="다饋2" class="lazy">
</a>
</li>
<li>
<a href="#" target="_blank" data-listIndex="1">
<img src="img/banner3.jpg" alt="다饋3" title="다饋3" class="lazy">
</a>
</li>
<li>
<a href="#" target="_blank" data-listIndex="1">
<img src="img/banner4.jpg" alt="다饋4" title="다饋4" class="lazy">
</a>
</li>
</ul>
</div>
<script>
var timer = index = 0, count, curIndex;
$(document).ready(function(){
count = $('.banner_list a').length;
$('.banner_list li:not(:first-child)').hide();
$('.page-ul li').on('click', function(){
var i = $(this).data('id') - 1;
index = i;
if(i >= count) return;
$('.banner_list li').filter(':visible').fadeOut(200).parent().children().eq(i).fadeIn(1000);
$('.banner').css('background', '');
$(this).toggleClass('on').siblings().removeAttr("class");
});
$('#prev').on('click', function(){
index = $('.banner_list li').filter(':visible').index();
index = index <= 0 ? (count - 1) : --index;
$('.page-ul li').eq(index).trigger('click');
});
$('#next').on('click', function(){
index = $('.banner_list li').filter(':visible').index();
index = index >= (count - 1)? 0 : ++index;
$('.page-ul li').eq(index).trigger('click');
});
timer = setInterval('showAuto()', 2000);
$('.banner-wrapper').hover(function(){clearInterval(timer)}, function(){timer = setInterval('showAuto()', 2000);});
});
function showAuto(){
index = index >= (count - 1)? 0 : ++index;
$('.page-ul li').eq(index).trigger('click');
}
</script>
</body>
</html>