slide.html
1.16 KB
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
<script type="text/javascript" src="{$_W['siteroot']}addons/lxy_marry/template/js/swipe.js"></script>
<style>
.box_swipe {overflow: hidden;position: relative;}
.box_swipe ul {overflow: hidden;position: relative;}
.box_swipe ul > li {float:left;width:100%;position: relative;}
.box_swipe>ol{height:20px;position: relative;z-index:10;margin-top:-25px;text-align:right;padding-right:15px;background-color:rgba(0,0,0,0.3);}
.box_swipe>ol>li{display:inline-block;margin:5px 0;width:8px;height:8px;background-color:#757575;border-radius: 8px;}
.box_swipe>ol>li.on{background-color:#ffffff;}
</style>
<div id="banner_box" class="box_swipe">
<ul>
{loop $hslists $v}
<li>
<img src="{php echo tomedia($v);}" title="{$item['title']}" style="width:100%;" />
</li>
{/loop}
</ul>
<ol>
{php $slideNum = 1;}
{loop $hslists $vv}
<li{if $slideNum == 1} class="on"{/if}></li>
{php $slideNum++;}
{/loop}
</ol>
</div>
<script type="text/javascript">
$(function() {
new Swipe($('#banner_box')[0], {
speed:500,
auto:3000,
callback: function(){
var lis = $(this.element).next("ol").children();
lis.removeClass("on").eq(this.index).addClass("on");
}
});
});
</script>