前瞻
今天在修改一个之前的公司项目的时候遇到了手机端引用swiper插件不能多次调用的问题，页面想要实现的效果是选项卡效果，点击下图的幼儿园学校用软木、培训机构用软木能够先显示不同的轮播图。
思路
- 6个标签每个对应一个轮播图，要想使得页面的插件调用不出现复用问题，那就需要把每个轮播图区别开，这里我是加了类名来控制的。详看代码，重点看
swiper-container0...5，swiper-pagination0...5,swiper-button-next0....5,swiper-button-prev0...5 - 当加载时显示幼儿园学校用软木的轮播图，这个只需要
new Swiper()一个swiper就可以了
var swiper1 = new Swiper('.swiper-container0', {
pagination: '.swiper-pagination0',
nextButton: '.swiper-button-next0',
prevButton: '.swiper-button-prev0',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 30,
loop: true
});
- 给6个标签添加点击事件，实现选项卡的效果，当点击
培训机构用软木时，获取到当前的index，然后摧毁所有的swiper（swiper.destroy()），之后再实例化此index对应的轮播图。
代码
不要看foreach里面的内容，foreach里面的只是读取出来的是图片。先说好，代码不是我写的，是我改的，不知道为什么给写死了。
<div class="tab solution_class" id="tab02">
<h2><span class="current">幼儿学校用软木</span><span>培训机构用软木</span><span>商业办公用软木</span><span>影音视剧院用软木</span><span>床头电视背景墙用软木</span><span>家居个人装修用软木</span><div class="cls"></div></h2>
<script src="__ROOT__/moban/mweiji/js/swiper.min.js"></script>
<ul>
<div class="swiper-container swiper-container0">
<div class="swiper-wrapper">
<foreach name="youer" item="v">
<div class="swiper-slide"> <a href="{:U('Home/Mnews/aone',array('id'=>$v['aid']))}" class="f_l"></a></div>
</foreach>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination0"></div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-next0"></div>
<div class="swiper-button-prev swiper-button-prev0"></div>
</div>
</ul>
<ul style="display:none">
<div class="swiper-container swiper-container1">
<div class="swiper-wrapper">
<foreach name="peixun" item="v">
<div class="swiper-slide"> <a href="{:U('Home/Mnews/aone',array('id'=>$v['aid']))}" class="f_l"></a></div>
</foreach>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination1"></div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-next1"></div>
<div class="swiper-button-prev swiper-button-prev1"></div>
</div>
</ul>
<ul style="display:none">
<div class="swiper-container swiper-container2">
<div class="swiper-wrapper">
<foreach name="shangye" item="v">
<div class="swiper-slide">
<a href="{:U('Home/Mnews/aone',array('id'=>$v['aid']))}" class="f_l"></a></div>
</foreach>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination2"></div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-next2"></div>
<div class="swiper-button-prev swiper-button-prev2"></div>
</div>
</ul>
<ul style="display:none">
<div class="swiper-container swiper-container3">
<div class="swiper-wrapper">
<foreach name="yingyuan" item="v">
<div class="swiper-slide"><a href="{:U('Home/Mnews/aone',array('id'=>$v['aid']))}" class="f_l"></a></div>
</foreach>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination3"></div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-next3"></div>
<div class="swiper-button-prev swiper-button-prev3"></div>
</div>
</ul>
<ul style="display:none">
<div class="swiper-container swiper-container4">
<div class="swiper-wrapper">
<foreach name="dianshi" item="v">
<div class="swiper-slide"><a href="{:U('Home/Mnews/aone',array('id'=>$v['aid']))}" class="f_l">
</a></div>
</foreach>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination4"></div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-next4"></div>
<div class="swiper-button-prev swiper-button-prev4"></div>
</div>
</ul>
<ul style="display:none">
<div class="swiper-container swiper-container5">
<div class="swiper-wrapper">
<foreach name="jiaju" item="v">
<div class="swiper-slide"> <a href="{:U('Home/Mnews/aone',array('id'=>$v['aid']))}" class="f_l"></a></div>
</foreach>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination5"></div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-next5"></div>
<div class="swiper-button-prev swiper-button-prev5"></div>
</div>
<!-- Swiper JS -->
<script>
$(function() {
$("#tab02 span").click(function() {
var index = $(this).index();
var swiper;
$("#tab02").find('ul').eq(index).show().siblings('ul').hide();
if(swiper !== undefined) {
swiper.destroy();
}
swiper = createSwiper(index);
});
});
function createSwiper(index) {
var swiper = new Swiper('.swiper-container' + index, {
pagination: '.swiper-pagination' + index,
nextButton: '.swiper-button-next'+ index,
prevButton: '.swiper-button-prev'+ index,
paginationClickable: true,
loop: true,
});
return swiper;
}
var swiper1 = new Swiper('.swiper-container0', {
pagination: '.swiper-pagination0',
nextButton: '.swiper-button-next0',
prevButton: '.swiper-button-prev0',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 30,
loop: true
});
</script>
</ul>
<script type="text/javascript">
var slides = ["tab02"];
for(var i=0; i<slides.length; i++){
var elemTit = document.getElementById(slides[i]).getElementsByTagName("h2")[0].getElementsByTagName("span");
var elemCon = document.getElementById(slides[i]).getElementsByTagName("ul");
slide({ handle:elemTit, content:elemCon, current:"current", mode:"mouseover" });
}
</script>
<a href="{:U('Home/Mnews/index')}"><div class="more_honor">点击查看更多解决方案>></div></a>
<div class="index_ad2" id="BizQQWPA1"><a href="tel:{:C('tellphone')}"></a></div>
<div class="index_ad2"></div>
</div>
原文引自http://yzjcool.xin/index.php?m=Home&c=Article&a=index&id=8
