前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第145天:jQuery.touchSlider触屏满屏左右滚动幻灯片

第145天:jQuery.touchSlider触屏满屏左右滚动幻灯片

作者头像
半指温柔乐
发布2018-09-11 10:16:07
2.6K0
发布2018-09-11 10:16:07
举报
文章被收录于专栏:前端知识分享

1、HTML

代码语言:javascript
复制
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>jQuery.touchSlider触屏满屏左右滚动幻灯片</title>
 6 <link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet"/>
 7 <script src="js/jquery.min.js"></script>
 8 <script src="js/jquery.event.drag-1.5.min.js"></script>
 9 <script src="js/jquery.touchSlider.js"></script>
10 <script>
11 $(document).ready(function () {
12     $(".main_visual").hover(function(){
13         $("#btn_prev,#btn_next").fadeIn()
14         },function(){
15         $("#btn_prev,#btn_next").fadeOut()
16         })
17     $dragBln = false;
18     $(".main_image").touchSlider({
19         flexible : true,
20         speed : 200,
21         btn_prev : $("#btn_prev"),
22         btn_next : $("#btn_next"),
23         paging : $(".flicking_con a"),
24         counter : function (e) {
25             $(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
26         }
27     });
28     $(".main_image").bind("mousedown", function() {
29         $dragBln = false;
30     })
31     $(".main_image").bind("dragstart", function() {
32         $dragBln = true;
33     })
34     $(".main_image a").click(function() {
35         if($dragBln) {
36             return false;
37         }
38     })
39     timer = setInterval(function() { $("#btn_next").click();}, 5000);
40     $(".main_visual").hover(function() {
41         clearInterval(timer);
42     }, function() {
43         timer = setInterval(function() { $("#btn_next").click();}, 5000);
44     })
45     $(".main_image").bind("touchstart", function() {
46         clearInterval(timer);
47     }).bind("touchend", function() {
48         timer = setInterval(function() { $("#btn_next").click();}, 5000);
49     })
50 });
51 </script>
52 </head>
53 <body>
54         <div class="main_visual">
55                 <div class="flicking_con">
56                     <div class="flicking_inner">
57                     <a href="javascript:">1</a>
58                     <a href="javascript:">2</a>
59                     <a href="javascript:">3</a>
60                     <a href="javascript:">4</a>
61                     <a href="javascript:">5</a>
62                     </div>
63             </div>
64             <div class="main_image">
65                 <ul>                    
66                     <li><span class="img_3"></span></li>
67                     <li><span class="img_4"></span></li>
68                     <li><span class="img_1"></span></li>
69                     <li><span class="img_2"></span></li>
70                     <li><span class="img_5"></span></li>
71                 </ul>
72                 <a href="javascript:;" id="btn_prev"></a>
73                 <a href="javascript:;" id="btn_next"></a>
74             </div>
75             </div>
76 </body>
77 </html>

2、CSS

代码语言:javascript
复制
 1 
 2 @charset "utf-8";
 3 *{margin:0;padding:0;list-style:none;border:0;}
 4 img{ border:none;}
 5 
 6 .main_image {
 7     width:100%;
 8     height:422px;
 9     border-top:1px solid #d7d7d7;
10     overflow:hidden;
11     margin:0 auto;
12     position:relative
13 }
14 .main_image ul {
15     width:9999px;
16     height:422px;
17     overflow:hidden;
18     position:absolute;
19     top:0;
20     left:0
21 }
22 .main_image li {
23     float:left;
24     width:100%;
25     height:422px;
26 }
27 .main_image li span {
28     display:block;
29     width:100%;
30     height:422px
31 }
32 .main_image li a {
33     display:block;
34     width:100%;
35     height:422px
36 }
37 .main_image li .img_1 {
38     background: url('../images/img_main_1.jpg') center top no-repeat
39 }
40 .main_image li .img_2 {
41     background: url('../images/img_main_2.jpg') center top no-repeat
42 }
43 .main_image li .img_3 {
44     background: url('../images/img_main_3.jpg') center top no-repeat
45 }
46 .main_image li .img_4 {
47     background: url('../images/img_main_4.jpg') center top no-repeat
48 }
49 .main_image li .img_5 {
50     background: url('../images/img_main_5.jpg') center top no-repeat
51 }
52 div.flicking_con {
53     width:990px;
54     margin:0 auto;
55     position:relative
56 }
57 div.flicking_con .flicking_inner {
58     position:absolute;
59     top:360px;
60     left:90px;
61     z-index:999;
62     width:300px;
63     height:21px
64 } /* 121126 */
65 div.flicking_con a {
66     float:left;
67     width:21px;
68     height:21px;
69     margin:0;
70     padding:0;
71     background:url('../images/btn_main_img.png') 0 0 no-repeat;
72     display:block;
73     text-indent:-1000px
74 }
75 div.flicking_con a.on {
76     background-position:0 -21px
77 }
78 #btn_prev, #btn_next {
79     z-index:11111;
80     position:absolute;
81     display:block;
82     width:73px!important;
83     height:74px!important;
84     top:50%;
85     margin-top:-37px;
86     display:none;
87 }
88 #btn_prev {
89     background:url(../images/hover_left.png) no-repeat left top;
90     left:100px;
91 }
92 #btn_next {
93     background:url(../images/hover_right.png) no-repeat right top;
94     right:100px;
95 }

3、js插件下载引入:

代码语言:javascript
复制
<script src="js/jquery.min.js"></script>
<script src="js/jquery.event.drag-1.5.min.js"></script>
<script src="js/jquery.touchSlider.js"></script>
运行结果:
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-01-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、HTML
  • 2、CSS
  • 3、js插件下载引入:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档