<!--轮播-->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!--二维码是梨的话显示梨的轮播图-->
<img class="sp-image" src="images/open-pic.png"/>
<!--二维码是梨的话显示葡萄的轮播图-->
<img class="sp-image" style="display:none" src="images/burgeon-pic2.png"/>
</div>
<div class="swiper-slide">
<!--二维码是梨的话显示梨的轮播图-->
<img class="sp-image" src="images/pollination-pic.png"/>
<!--二维码是梨的话显示葡萄的轮播图-->
<img class="sp-image" style="display:none" src="images/open-pic2.png"/>
</div>
<div class="swiper-slide">
<!--二维码是梨的话显示梨的轮播图-->
<img class="sp-image" src="images/trace-pic.png"/>
<!--二维码是梨的话显示葡萄的轮播图-->
<img class="sp-image" style="display:none" src="images/recovery-pic2.png"/>
</div>
<div class="swiper-slide">
<!--二维码是梨的话显示梨的轮播图-->
<img class="sp-image" src="images/recovery-pic.png"/>
<!--二维码是梨的话显示葡萄的轮播图-->
<img class="sp-image" style="display:none" src="images/grown-pic2.png"/>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="arrow">
<div class="prev prev-next"></div>
<div class="slide-pic">
<!--二维码是梨的话显示梨对应周期在css中-->
<!--二维码是葡萄的话显示葡萄对应周期在css中-->
<i class=" one slide-com active" data-index='1'>开花</i>
<i class=" two slide-com" data-index='2'>授粉</i>
<i class=" three slide-com" data-index='3'>套袋</i>
<i class=" four slide-com" data-index='4'>采收</i>
</div>
<div class=" next prev-next"></div>
</div>
/*轮播*/
.sp-image{
width:6.7rem;
height:3.9rem;
margin:0 0.4rem;
}
.arrow{
width:100%;
height:3.8rem;
background:#f6f6f6;
margin-top:-0.1rem;
position:relative;
-webkit-tap-highlight-color:rgba(255,0,0,0);
-webkit-appearance:none;
}
.prev-next{
height:1.6rem;
margin-top: 0.1rem;
}
.prev{
width:0.83rem;
background:url(../images/prev.png) no-repeat;
background-size:100% 100%;
position:absolute;
top:0;
left:0;
}
.next{
width:0.85rem;
background:url(../images/next.png) no-repeat;
background-size:100% 100%;
position:absolute;
right:0;
top:0;
}
.slide-pic{
width:5.6rem;
overflow:hidden;
padding:1.36rem 0.8rem;
box-sizing: content-box;
margin:0 auto;
text-align:center;
-webkit-tap-highlight-color:rgba(255,0,0,0);
-webkit-appearance:none;
}
.slide-com{
display:inline-block;
width:1.1rem;
height:1.1rem;
line-height:1.1rem;
text-align:center;
font-size:0.24rem;
color:#c2c0c1;
border:1px solid #a9a7a8;
border-radius:50%;
-webkit-tap-highlight-color:rgba(255,0,0,0);
-webkit-appearance:none;
clear:both;
}
*+ html .slide-com {
display:inline;
zoom:1;
}
* html .slide-com {
display:inline;
zoom:1;
}
i.active.one,i.active.two,i.active.three,i.active.four{
border:1px solid #17c13a;
color:#17c13a;
}
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container', {
//autoplay: 5000,//可选选项，自动滑动
pagination : '.swiper-pagination',
paginationType : 'custom',
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
loop:true,
paginationClickable :true,
// initialSlide :0 ,
})
//给每个页码绑定跳转的事件
$('div.slide-pic').on('click','i',function(){
var index = $(this).index();
$(this).addClass("active").siblings().removeClass("active")
var index = $(this).attr("data-index");
//slideTo：Swiper切换到指定slide。
mySwiper.slideTo(index, 1000, false);//切换到第一个slide，速度为1秒
})
//点击下一页
$(".swiper-button-next").on("click",function(){
// console.log(mySwiper.activeIndex);//返回当前活动块(激活块)的索引。loop模式下注意该值会被加上复制的slide数。
var slidePicActive;
if(mySwiper.activeIndex == 5){
slidePicActive = $('.slide-pic').find("i").eq(0);
}else{
slidePicActive = $('.slide-pic').find("i").eq(mySwiper.activeIndex-1);
}
if(slidePicActive.hasClass('active')){
slidePicActive.siblings().removeClass("active")
}else{
slidePicActive.addClass("active").siblings().removeClass("active")
}
//slideNext:滑动到下一个滑块。
mySwiper.slideNext(false, 1000);
})
//点击上一页
$(".swiper-button-prev").on("click",function(){
var slidePicActive = $('.slide-pic').find("i").eq(mySwiper.activeIndex-1);
if(slidePicActive.hasClass('active')){
slidePicActive.siblings().removeClass("active")
}else{
slidePicActive.addClass("active").siblings().removeClass("active")
}
//slidePrev:滑动到前一个滑块。
mySwiper.slidePrev(false, 1000);
})
//点击的背景颜色
$(".toggle li").click(function(){
$(this).css("background","#e1ebe1").siblings().css('background','#f5fff5')
})
//点击去这里显示地图
$(".go-here").click(function(){
var boxsH=document.body.clientHeight
$(".toggle").show()
$("#boxs").css('height',boxsH+"%").show();
})
//点击取消不显示地图
$(".cancle").click(function(){
$("#boxs").hide();
$(".toggle").hide()
$(".toggle li").css("background","#f5fff5")
})
//点击遮罩不显示地图
$("#boxs").click(function(){
$(".toggle").hide()
$("#boxs").hide();
$(".toggle li").css("background","#f5fff5")
})
//点击定位
$(".position").click(function(){
var boxsH=document.body.clientHeight
$(".toggle").show()
;//确定弹框位置
$("#boxs").css('height',boxsH+"%").show();
})
</script>
