1、HTML

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jQuery.touchSlider触屏满屏左右滚动幻灯片</title>

 <link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet"/>

 <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>

 <script>

 $(document).ready(function () {

     $(".main_visual").hover(function(){

         $("#btn_prev,#btn_next").fadeIn()

         },function(){

         $("#btn_prev,#btn_next").fadeOut()

         })

     $dragBln = false;

     $(".main_image").touchSlider({

         flexible : true,

         speed : 200,

         btn_prev : $("#btn_prev"),

         btn_next : $("#btn_next"),

         paging : $(".flicking_con a"),

         counter : function (e) {

             $(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");

         }

     });

     $(".main_image").bind("mousedown", function() {

         $dragBln = false;

     })

     $(".main_image").bind("dragstart", function() {

         $dragBln = true;

     })

     $(".main_image a").click(function() {

         if($dragBln) {

             return false;

         }

     })

     timer = setInterval(function() { $("#btn_next").click();}, 5000);

     $(".main_visual").hover(function() {

         clearInterval(timer);

     }, function() {

         timer = setInterval(function() { $("#btn_next").click();}, 5000);

     })

     $(".main_image").bind("touchstart", function() {

         clearInterval(timer);

     }).bind("touchend", function() {

         timer = setInterval(function() { $("#btn_next").click();}, 5000);

     })

 });

 </script>

 </head>

 <body>

         <div class="main_visual">

                 <div class="flicking_con">

                     <div class="flicking_inner">

                     <a href="javascript:">1</a>

                     <a href="javascript:">2</a>

                     <a href="javascript:">3</a>

                     <a href="javascript:">4</a>

                     <a href="javascript:">5</a>

                     </div>

             </div>

             <div class="main_image">

                 <ul>

                     <li><span class="img_3"></span></li>

                     <li><span class="img_4"></span></li>

                     <li><span class="img_1"></span></li>

                     <li><span class="img_2"></span></li>

                     <li><span class="img_5"></span></li>

                 </ul>

                 <a href="javascript:;" id="btn_prev"></a>

                 <a href="javascript:;" id="btn_next"></a>

             </div>

             </div>

 </body>

 </html>

2、CSS

 @charset "utf-8";

 *{margin:;padding:;list-style:none;border:;}

 img{ border:none;}

 .main_image {

     width:100%;

     height:422px;

     border-top:1px solid #d7d7d7;

     overflow:hidden;

     margin:0 auto;

     position:relative

 }

 .main_image ul {

     width:9999px;

     height:422px;

     overflow:hidden;

     position:absolute;

     top:;

     left:0

 }

 .main_image li {

     float:left;

     width:100%;

     height:422px;

 }

 .main_image li span {

     display:block;

     width:100%;

     height:422px

 }

 .main_image li a {

     display:block;

     width:100%;

     height:422px

 }

 .main_image li .img_1 {

     background: url('../images/img_main_1.jpg') center top no-repeat

 }

 .main_image li .img_2 {

     background: url('../images/img_main_2.jpg') center top no-repeat

 }

 .main_image li .img_3 {

     background: url('../images/img_main_3.jpg') center top no-repeat

 }

 .main_image li .img_4 {

     background: url('../images/img_main_4.jpg') center top no-repeat

 }

 .main_image li .img_5 {

     background: url('../images/img_main_5.jpg') center top no-repeat

 }

 div.flicking_con {

     width:990px;

     margin:0 auto;

     position:relative

 }

 div.flicking_con .flicking_inner {

     position:absolute;

     top:360px;

     left:90px;

     z-index:;

     width:300px;

     height:21px

 } /* 121126 */

 div.flicking_con a {

     float:left;

     width:21px;

     height:21px;

     margin:;

     padding:;

     background:url('../images/btn_main_img.png') 0 0 no-repeat;

     display:block;

     text-indent:-1000px

 }

 div.flicking_con a.on {

     background-position:0 -21px

 }

 #btn_prev, #btn_next {

     z-index:;

     position:absolute;

     display:block;

     width:73px!important;

     height:74px!important;

     top:50%;

     margin-top:-37px;

     display:none;

 }

 #btn_prev {

     background:url(../images/hover_left.png) no-repeat left top;

     left:100px;

 }

 #btn_next {

     background:url(../images/hover_right.png) no-repeat right top;

     right:100px;

 }

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>
运行结果：

												


											
第145天：jQuery.touchSlider触屏满屏左右滚动幻灯片的更多相关文章
	

    
								
  1. 利用snowfall.jquery.js实现爱心满屏飞
		
    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
    
		
    2. 
						
  2. 一款jQuery满屏自适应焦点图切换特效
		
    一款jQuery满屏自适应焦点图切换特效 ,自适应当前浏览器的宽度,可以作为网站整个大背景的却换效果,很不错的一款不jquery特效. 兼容性没的说直接秒杀了IE6.适用浏览器:IE6.IE7.IE8 ...
    
		
    3. 
						
  3. jQuery手机触屏拖动滑块验证跳转插件
		
    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...
    
		
    4. 
						
  4. Easyui layout设置满屏效果
		
    html文件: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
    
		
    5. 
						
  5. Android 底部弹出Dialog（横向满屏）
		
    项目中经常需要底部弹出框,这里我整理一下其中我用的比较顺手的一个方式(底部弹出一个横向满屏的dialog). 效果图如下所示(只显示关键部分): 步骤如下所示: 1.定义一个dialog的布局(lay ...
    
		
    6. 
						
  6. VMware Tools的简易安装---解决Ubuntu 14.10不能满屏显示问题
		
    由于使用的VMware WorkStation是中文破解版,安装时又是简易安装,因此VMware Tools并没有安装上,导致Ubuntu 14.10在VMware中装上之后,并不能满屏显示,如图1所 ...
    
		
    7. 
						
  7. css背景图片拉伸 以及100% 满屏显示
		
    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...
    
		
    8. 
						
  8. 消除PyCharm中满屏的波浪线
		
    PyCharm使用了较为严格的PEP8的检查规则,如果代码命名不规范,甚至多出的空格都会被波浪线标识出来,导致整个编辑器里铺满了波浪线,右边的滚动条也全是黄色或灰色的标记线,很是影响编辑. 在网上看了 ...
    
		
    9. 
						
  9. 基于jQuery的网站首页宽屏焦点图幻灯片
		
    今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 20155222 2016-2017-2 《Java程序设计》实验二
			
    1 测试 public class MyUtil{ public static String percentage2fivegrade(int grade){ //如果成绩小于60,转成"不 ...
    
			
    2. 
						
  2. 20155224聂小益的Linux学习
			
    20155224聂小益的虚拟机安装 虚拟机安装 一开始,我在下载VirtulBox及Ubuntu遇到了一些困难,老实说点进去看到一大堆英文界面的时候真的是有点吓到.不过几秒钟之后就发现这并没有什么哈哈 ...
    
			
    3. 
						
  3. 20155315 2016-2017-2 《Java程序设计》第二周学习总结
			
    教材学习内容总结 在教材中,有一句话叫做 伪代码是最好的注释. 一开始我不理解什么是伪代码,但在参考了百度和C语言的学习过程后,我发现伪代码的作用就相当于是解决问题前期的流程图设计,伪代码设计好了之后 ...
    
			
    4. 
						
  4. 基于Opencv的人脸检测及识别
			
    一.实验目的:我这里完成的是,将8张人脸图片(4组,每组两张)存入库中,选取1张图片,程序识别出与其匹配的另一张. 这里介绍分三个步骤完成该工作,①程序读取摄像头.拍照 ②程序从电脑文档中读取图片   ...
    
			
    5. 
						
  5. WPF  GDI+字符串绘制成图片（一）
			
    原文:WPF GDI+字符串绘制成图片(一) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/83 ...
    
			
    6. 
						
  6. 3809: Gty的二逼妹子序列
			
    3809: Gty的二逼妹子序列 链接 分析: 和这道AHOI2013 作业差不多.权值是1~n的,所以对权值进行分块.$O(1)$修改,$O(\sqrt n)$查询. 代码: #include< ...
    
			
    7. 
						
  7. 【JUC源码解析】LinkedBlockingQueue
			
    简介 一个基于链表的阻塞队列,FIFO的顺序,head指向的元素等待时间最长,tail指向的元素等待时间最短,新元素从队列尾部添加,检索元素从队列头部开始,队列的容量,默认是Integer#MAX_V ...
    
			
    8. 
						
  8. Vue.js之常用指令
			
    vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...
    
			
    9. 
						
  9. JavaScript里的循环方法之forEach，for-in，for-of
			
    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标 ...
    
			
    10. 
						
  10. PowerShell自定义修改远程桌面RDP端口
			
    应朋友的要求写了一个通过PowerShell修改远程桌面(Remote Desktop)端口的脚本,不复杂,启动脚本后有两个选项:1.自定义远程桌面:2.回复远程桌面的默认端口3389 发出来给有用的 ...
    
			
    11.