图片变化,引起名称和内容随之变化,其中名称和内容不在图片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>
可以加我微信探讨