72 lines
2.9 KiB
HTML
72 lines
2.9 KiB
HTML
|
<link rel="stylesheet" type="text/css" href="__CSS__/swiper.min.css" />
|
||
|
|
<div class="swiper-container">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
{foreach $slides as $key => $slide}
|
||
|
|
<div class="swiper-slide center-center">
|
||
|
|
<div class="w1200">
|
||
|
|
<i>0{$key+1}</i>
|
||
|
|
<strong>{$slide.title}</strong>
|
||
|
|
<p><?php echo nl2br($slide['description']);?></p>
|
||
|
|
<a href="{$slide.url}"><img src="__IMG__/ico_2.png" >查看服务</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/foreach}
|
||
|
|
</div>
|
||
|
|
<div class="ho1_operation">
|
||
|
|
<div class="swiper-pagination"></div>
|
||
|
|
<div class="fl">
|
||
|
|
<div class="swiper-button-next"></div>
|
||
|
|
<div class="swiper-button-prev"></div>
|
||
|
|
</div>
|
||
|
|
<div class="line_box"><i></i></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="__JS__/swiper.min.js" type="text/javascript" charset="utf-8"></script>
|
||
|
|
<script>
|
||
|
|
var swiper = new Swiper('.home_box1 .swiper-container', {
|
||
|
|
effect : 'fade',
|
||
|
|
loop:true,
|
||
|
|
speed: 100,
|
||
|
|
autoplay : {
|
||
|
|
delay:6000,
|
||
|
|
disableOnInteraction: false,
|
||
|
|
},
|
||
|
|
navigation: {
|
||
|
|
nextEl: '.home_box1 .swiper-button-next',
|
||
|
|
prevEl: '.home_box1 .swiper-button-prev',
|
||
|
|
},
|
||
|
|
pagination: {
|
||
|
|
el: '.home_box1 .swiper-pagination',
|
||
|
|
clickable: true,
|
||
|
|
renderBullet: function (index, className) {
|
||
|
|
return '<span class="' + className + '">' + (index + 1) + '</span>';
|
||
|
|
},
|
||
|
|
},
|
||
|
|
on:{
|
||
|
|
init: function(){
|
||
|
|
$('.home_box1').addClass('active');
|
||
|
|
},
|
||
|
|
transitionEnd: function(){
|
||
|
|
$('.home_box1 .swiper-container .swiper-slide .w1200').eq(this.activeIndex).addClass('active')
|
||
|
|
var wz = $('.home_box1 .swiper-container .swiper-slide').eq(this.activeIndex).find('strong').text();
|
||
|
|
var html = ''
|
||
|
|
$.each(wz.split(""),function(i,item){
|
||
|
|
html += '<span>'+item+'</span>'
|
||
|
|
})
|
||
|
|
$('.home_box1 .swiper-container .swiper-slide').eq(this.activeIndex).find('strong').empty();
|
||
|
|
$('.home_box1 .swiper-container .swiper-slide').eq(this.activeIndex).find('strong').append(html)
|
||
|
|
$('.home_box1 .swiper-container .swiper-slide').eq(this.activeIndex).find('strong span').each(function(i){
|
||
|
|
var that = $(this);
|
||
|
|
var speed = (i+1)*100+500;
|
||
|
|
setTimeout(function(){
|
||
|
|
that.addClass('active')
|
||
|
|
},speed)
|
||
|
|
})
|
||
|
|
$('.line_box i').css('left',35*this.realIndex+'px')
|
||
|
|
},
|
||
|
|
transitionStart: function(){
|
||
|
|
$('.home_box1 .swiper-container .swiper-slide .w1200').removeClass('active')
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|