swiper点击显示对应banner图

常用脚本 20-11-16 19 0



<!doctype html>

<html>

<head>

  <meta charset="UTF-8">

  <title>swiper</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="css/idangerous.swiper.css">idangerous

</head>

<body>

<style>

body {

  padding: 0;

  margin: 0;

}


.pc-slide {

  width: 500px;

  margin: 0 auto;

}


.view .swiper-container {

  width: 500px;

  height: 500px;

}


.view .arrow-left {

  background: url(http://cd.seowhy.com/images/index_tab_l.png) no-repeat left top;

  position: absolute;

  left: 10px;

  top: 50%;

  margin-top: -25px;

  width: 28px;

  height: 51px;

  z-index: 10;

}


.view .arrow-right {

  background: url(http://cd.seowhy.com/images/index_tab_r.png) no-repeat left bottom;

  position: absolute;

  right: 10px;

  top: 50%;

  margin-top: -25px;

  width: 28px;

  height: 51px;

  z-index: 10;

}


.preview {

  width: 100%;

  margin-top: 10px;

  position: relative;

}


.preview .swiper-container {

  width: 430px;

  height: 82px;

  margin-left: 35px;

}


.preview .swiper-slide {

  width: 87px;

  height: 82px;

}


.preview .slide6 {

  width: 82px;

}


.preview .arrow-left {

  background: url(http://cd.seowhy.com/images/feel3.png) no-repeat left top;

  position: absolute;

  left: 10px;

  top: 50%;

  margin-top: -9px;

  width: 9px;

  height: 18px;

  z-index: 10;

}


.preview .arrow-right {

  background: url(http://cd.seowhy.com/images/feel4.png) no-repeat left bottom;

  position: absolute;

  right: 10px;

  top: 50%;

  margin-top: -9px;

  width: 9px;

  height: 18px;

  z-index: 10;

}


.preview img {

  padding: 1px;

}


.preview .active-nav img {

  padding: 0;

  border: 1px solid #F00;

}

</style>

 <div>

  <div>

    <div>

      <a href="#"></a>

      <a href="#"></a>

      <div>

        <div>

          <a href="javascript:void(0);" ><img src="images/b1.jpg" alt=""></a>

        </div>

        <div>

          <a href="javascript:void(0);" ><img src="images/b2.jpg" alt=""></a>

        </div>

        <div>

          <a href="javascript:void(0);" ><img src="images/b3.jpg" alt=""></a>

        </div>

        <div>

          <a href="javascript:void(0);" ><img src="images/b4.jpg" alt=""></a>

        </div>

        <div>

          <a href="javascript:void(0);" ><img src="images/b5.jpg" alt=""></a>

        </div>

        <div>

          <a href="javascript:void(0);" ><img src="images/b6.jpg" alt=""></a>

        </div>

      </div>

    </div>

  </div>

  <div>

    <a href="#"></a>

    <a href="#"></a>

    <div>

      <div>

        <div class="swiper-slide active-nav">

          <img src="images/s1.jpg" alt="">

        </div>

        <div>

          <img src="images/s2.jpg" alt="">

        </div>

        <div>

          <img src="images/s3.jpg" alt="">

        </div>

        <div>

          <img src="images/s4.jpg" alt="">

        </div>

        <div>

          <img src="images/s5.jpg" alt="">

        </div>

        <div class="swiper-slide slide6">

          <img src="images/s6.jpg" alt="">

        </div>

      </div>

    </div>

  </div>

</div>

<script src="js/jquery-1.10.1.min.js"></script>

<script src="js/idangerous.swiper.min.js"></script>


JS压缩包:js



<script>

    var viewSwiper = new Swiper('.view .swiper-container', {

  onSlideChangeStart: function() {

    updateNavPosition()

  }

})


$('.view .arrow-left,.preview .arrow-left').on('click', function(e) {

  e.preventDefault()

  if (viewSwiper.activeIndex == 0) {

    viewSwiper.swipeTo(viewSwiper.slides.length - 1, 1000);

    return

  }

  viewSwiper.swipePrev()

})

$('.view .arrow-right,.preview .arrow-right').on('click', function(e) {

  e.preventDefault()

  if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {

    viewSwiper.swipeTo(0, 1000);

    return

  }

  viewSwiper.swipeNext()

})


var previewSwiper = new Swiper('.preview .swiper-container', {

  visibilityFullFit: true,

  slidesPerView: 'auto',

  onlyExternal: true,

  onSlideClick: function() {

    viewSwiper.swipeTo(previewSwiper.clickedSlideIndex)

  }

})


function updateNavPosition() {

    $('.preview .active-nav').removeClass('active-nav')

    var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')

    if (!activeNav.hasClass('swiper-slide-visible')) {

      if (activeNav.index() > previewSwiper.activeIndex) {

        var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1

        previewSwiper.swipeTo(activeNav.index() - thumbsPerNav)

      } else {

        previewSwiper.swipeTo(activeNav.index())

      }

    }

  }

</script>

</body>

</html>


本文来自:以上内容来自互联网,如有侵权请联系客服

链接网址:http://cd.seowhy.com

分享:

SEO培训,扫码微信了解

评论

免费拨打  187-0592-1889 免费拨打  187-0592-1889
免费拨打:187-0592-1889拨打电话:187-0592-1889
微信二维码 微信二维码
手机二维码 手机二维码
返回顶部 返回顶部
返回顶部返回顶部
cache
Processed in 0.007637 Second.