swiper点击显示对应banner图
<!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"> </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压缩包： <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培训，扫码微信了解
评论