<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Swiper demo</title> <!-- Link Swiper's CSS --> <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet"> <!-- Demo styles --> <style> html, body { position: relative; width: 100%; height: 100%; } body { margin: 0; padding: 0; } .m-swiper-container{width: 100%;} .m-swiper-slide{display: block; background-size: 100% 100%;} .m-swiper-img{width: 100%;} </style> </head> <body> <!-- Swiper --> <div class="swiper-container m-swiper-container" id="m-swiper-container"> <div class="swiper-wrapper" id="m-swiper-wrapper"> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <!-- Swiper JS --> <script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script> <!-- Initialize Swiper --> <script> var swiperWrapper = $('#m-swiper-wrapper'); var json = [{ img:'https://img-blog.csdn.net/20180531112426283', url:'http://www.baidu.com' }, { img:'https://img-blog.csdn.net/20180531112432547', url:'http://www.baidu.com' }, { img:'https://img-blog.csdn.net/20180531112437692', url:'http://www.baidu.com' }]; var html = ''; for (var i = 0; i < json.length; i++) { html += '<a class="swiper-slide m-swiper-slide" href="' + json[i].url + '">' + '<img src="' + json[i].img + '" class="m-swiper-img">' + '</a>'; } swiperWrapper.html(html); var swiper = new Swiper('#m-swiper-container', { speed:300, autoplay : { delay:3000 }, loop: true }); </script> </body> </html>
備註:歡迎加入web前端求職招聘qq羣:668352707css