jquery手机端幻灯片
来源:原创
时间:2016-08-08
作者:脚本小站
分类:JS/JQuery
Swiper slider插件
下载地址:
http://www.lanrenzhijia.com/jquery/2851.html
http://demo.lanrenzhijia.com/js/mobile0626.rar
演示代码:
<!doctype html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="stylesheet" href="css/idangerous.swiper.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script> <script src="js/idangerous.swiper-1.9.1.min.js"></script> <style type="text/css"> .home-device { width:640px; height:300px; margin:0 auto; position:relative; /*边框影音*/ box-shadow: 0px 0px 5px #000; } .home-device .arrow-left { /* 引用时注意图片路劲 */ background:url(./images/arrows.png) no-repeat left top; position:absolute; left:10px; top:50%; margin-top:-15px; width:17px; height:30px; z-index:888; } .home-device .arrow-right { /* 引用时注意图片路劲 */ background:url(./images/arrows.png) no-repeat left bottom; position:absolute; right:10px; top:50%; margin-top:-15px; width:17px; height:30px; z-index:888; } .swiper-main { width: 640px; height: 300px; position: relative; } .swiper1, .swiper1 .swiper-slide { width: 640px; height: 300px; } .pagination1 { text-align: center; margin-top: 5px; } .content-slide { background: #fff; padding: 20px; border-radius: 5px; } .cs-1, .cs-2 { float: left; width:270px; margin-top: 10px; margin-bottom: 10px; } .cs-1 { margin-right: 20px; background: #333; color: #fff; } .cs-2 { background: #ad2e4c; color: #fff; } /* Pagination */ .pagination1 .swiper-pagination-switch { display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: #999; box-shadow: 0px 1px 2px #555 inset; margin: 0 3px; cursor: pointer; } .pagination1 .swiper-active-switch { background: #fff; } .sw-title { padding: 5px 20px; font-size: 41px; margin: 50px 0 20px; font-family: 'Lato', sans-serif; line-height: 50px; color: #222; font-weight: 300; border-bottom: 1px solid #555; } .sw-content { background: #fff; border-radius: 5px; } .demo-title { margin-bottom: 5px; text-align: center; font-size: 31px; font-family: "Lato", Arial, Helvetica; font-weight: 300; line-height: 35px; margin: 50px 0 20px; } </style> </head> <body> <div class="home-device"> <a class="arrow-left" href="#"></a> <a class="arrow-right" href="#"></a> <div class="swiper-main"> <div class="swiper-container swiper1"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="images/slider1-1.png"> </div> <div class="swiper-slide"> <img src="images/slider1-2.png"><h2>这是标题。。</h2></div> <div class="swiper-slide"> <div class="content-slide"> <h2 style="margin-top: 0;">雅蠛蝶</h2> <p>自定义内容幻灯片,呵呵</p> </div> <div class="content-slide cs-1"> <p style="margin: 0;">无语.</p> </div> <div class="content-slide cs-2"> <p style="margin: 0;">操.</p> </div> <div class="content-slide cs-1"> <p style="margin: 0;">fuck.</p> </div> <div class="content-slide cs-2"> <p style="margin: 0;">shit.</p> </div> <div class="clearfix"></div> </div> </div> </div> </div> <div class="pagination pagination1"></div> </div> <script> $(function(){ //Main Swiper var swiper = new Swiper('.swiper1', { pagination : '.pagination1', loop:true, grabCursor: true }); //Navigation arrows $('.arrow-left').click(function(e) { e.preventDefault() swiper.swipePrev() }); $('.arrow-right').click(function(e) { e.preventDefault() swiper.swipeNext() }); //Clickable pagination $('.pagination1 .swiper-pagination-switch').click(function(){ swiper.swipeTo($(this).index()) }) }) </script> </body> </html>
演示地址:
http://www.jiawin.com/demo/6589.html
关于触屏事件参考资料:
http://www.cnblogs.com/iamlilinfeng/p/3983671.html