需求:
Swiper轮番图触发onClick事件,然后触发Slide自定义的url或者获取其属性
实现:
<div class="swiper-container"> <ul class="swiper-wrapper"> <li class="swiper-slide" url-val="${basePath}/cms/article/list"> <img src="${basePath}static/common/images/home_img.jpg" alt="" /> </li> <li class="swiper-slide" url-val="${basePath}"> <img src="${basePath}static/common/images/home_img_index.jpg" alt="" /> </li> <li class="swiper-slide" url-val="${basePath}/itemTm/list"> <img src="${basePath}static/common/images/home_img_tmh.jpg" alt="" /> </li> <li class="swiper-slide" url-val="${basePath}/cms/article/list"> <img src="${basePath}static/common/images/home_img.jpg" alt="" /> </li> </ul> <div class="swiper-pagination"> </div> </div>
对应的js操作:
<script type="text/javascript"> (function($) { var swiper = new Swiper('#home_page .swiper-container', { autoplay: 3000, pagination: '#home_page .swiper-pagination', loop: true, onClick: function(swiper) { window.location.href = swiper.clickedSlide.attributes["url-val"].nodeValue; } }); })(jQuery) </script>
更多优质资源请访问http://www.someabcd.com