Swiper，联动效果

最新推荐文章于 2023-12-28 16:36:23 发布

开发转测试

最新推荐文章于 2023-12-28 16:36:23 发布

阅读量3.6k

点赞数

本文链接：https://blog.csdn.net/fulq1234/article/details/54706639

版权

图片变化，引起名称和内容随之变化，其中名称和内容不在图片div里面，所以要特殊处理。

<html>
<!-----------------导入文件------------->


<link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />

<script type="text/javascript" src="../js/swiper.min.js"></script>

<!-----------------html----------- >



<div class="grand_start">
<div class="swiper-Container" id="grand-start">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../img/a1.jpg"  pic_name="pic_name1"   adpic_context="adpic_context1"/>
</div>
<div class="swiper-slide">
<img src="../img/a2.jpg"  pic_name="pic_name2"   adpic_context="adpic_context2"//>
</div>
</div>
</div>
</div>
<div class="zh_txt_box" id="div_pic_name">
名称
</div>
<div class="js_contents" style="text-align: center;" id="div_adpic_context">
内容
</div>
<script type="text/javascript">
/*-----------------JavaScript------------------*/
var swiper_goods = new Swiper('#grand-start', {

parallax: true,
speed: 600,
autoplay: 3000,
autoplayDisableOnInteraction : false,
loop: true,
onSlideChangeStart:function(swiper){//自动循环   
changSwiper(swiper);
} 
});

/**
* 各站启动盛况，图片改变，下面的“图片名称”和“图片内容”随之变化。
**/
function changSwiper(swiper){
//console.log("index",swiper.activeIndex); //切换结束时，告诉我现在是第几个slide
    var activeIndex=swiper.activeIndex;//当前选中,从1开始
   var iaI=parseInt(activeIndex);
   iaI=iaI-1;
var slides_arr=swiper.slides;//数组
var slides_select=slides_arr[swiper.activeIndex];//当前选中数组
    var pic_name=$(slides_select).find("img").attr("pic_name");
    var adpic_context=$(slides_select).find("img").attr("adpic_context");
$("#div_pic_name").html(pic_name);
    $("#div_adpic_context").html(adpic_context);
}
</script>
</html>