代码:点击huanj这个ul再显示swiper-container,默认swiper-container是隐藏的
..................................css...............................
.container{
width:96%;
margin:2% auto;
position: relative;
display:none;
}
...................................页面.........................
<ul class="huanj">
<li><img src="/images/xueda/hj1.jpg"></li><li><img src="/images/xueda/hj3.jpg"></li>
<li><img src="/images/xueda/hj4.jpg"></li>
<li><img src="/images/xueda/hj5.jpg"></li>
<li><img src="/images/xueda/hj6.jpg"></li>
</ul>
<div class="container re1">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="/images/xueda/hj1.jpg"></div>
<div class="swiper-slide"><img src="/images/xueda/hj3.jpg"></div>
<div class="swiper-slide"><img src="/images/xueda/hj4.jpg"></div>
<div class="swiper-slide"><img src="/images/xueda/hj5.jpg"></div>
<div class="swiper-slide"><img src="/images/xueda/hj6.jpg"></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<script src="/js/swiper3.07.jquery.min.js" type="text/javascript"></script>
<script>
swiper1 = new Swiper('.swiper-container', {
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true//修改swiper的父元素时,自动初始化swiper
});
</script>
.....................................................js ...................................
$(".huanj").click(function(){
$(".container").show();$(".huanj").hide();
var mySwiper = new Swiper('.swiper-container', {
autoplay: 2500,
autoplayDisableOnInteraction: false,
pagination: '.swiper-pagination',
paginationClickable: true,
onSlideChangeEnd: function(swiper){
swiper.update(); //swiper更新
}
});
................................效果..................
http://xdjy.soujoin.com/xa/xueda/