1、HTML
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
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插件下载引入：
<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>
运行结果：
