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. 一个servlet如何处理多个请求
			
    页面1:表单的action=login?method=login 页面2:表单的action=login?method=insert ..... 然后通过method的值采用不同方法进行处理. 如下  ...
    
			
    2. 
						
  2. 20155220 2016-2017-2 《java程序设计》第四周总结
			
    教材学习内容总结 第六章 继承与多态 继承 继承的基本原则是: 子类继承父类的所有成员变量(包括静态成员): 子类继承除父类构造方法外的所有成员方法(包括静态方法): 子类不能继承父类的构造方法,但在 ...
    
			
    3. 
						
  3. 预备作业03: 初体验---虚拟机virtual box
			
    学习基于VirtualBox虚拟机安装Ubuntu图文教程在自己笔记本上安装Linux操作系统 昨天从下午到晚上一直在研究怎么安装也问了很多同学,也自己查了查百度,经过一晚上终于安装成功,于是今天一早 ...
    
			
    4. 
						
  4. 深入理解redis复制原理
			
    原文:深入理解redis复制原理 1.复制过程 2.数据间的同步 3.全量复制 4.部分复制 5.心跳 6.异步复制 1.复制过程 从节点执行 slaveof 命令. 从节点只是保存了 slaveof ...
    
			
    5. 
						
  5. [arc068E]Snuke Line-[树状数组]
			
    Description 传送门 Solution 假如想直接YY对于每一个d会有多少种商品满足条件,em反正我搞不定. 然后大佬的题解告诉我说:搞不定?那就不搞它啊,反过来不就得了? 好吧.我们来考虑 ...
    
			
    6. 
						
  6. SaltStack入门篇（六）之部署Redis主从实现和Job管理
			
    一.部署Redis主从 需求: 192.168.56.11是主,192.168.56.12是从 redis监听自己的ip地址,而不是0.0.0.0 分析: linux-node1 安装 配置 启动 l ...
    
			
    7. 
						
  7. 洛谷1552 [APIO2012]派遣
			
    洛谷1552 [APIO2012]派遣 原题链接 题解 luogu上被刷到了省选/NOI- ...不至于吧 这题似乎有很多办法乱搞? 对于一个点,如果他当管理者,那选的肯定是他子树中薪水最少的k个,而 ...
    
			
    8. 
						
  8. asp.net core添加全局异常处理及log4net、Nlog应用
			
    0.目录 整体架构目录:ASP.NET Core分布式项目实战-目录 一.介绍 此篇文章将会介绍项目的全局异常收集以及采用log4net或者NLog记录. 众所周知,一旦自己的项目报错,如果没有进行处 ...
    
			
    9. 
						
  9. phpcms 的模板更换
			
    刚安装完成后的phpcms ,自带的默认模板样式一般,可以自己换模板 首先打开phpcms文件夹,按照下图路径打开 default是存模板的文件夹 在里面新建一个文件夹 在default中主要用到的是 ...
    
			
    10. 
						
  10. c# IE浏览器清除缓存没用
			
    再想买更新JS和css文件之后, 使用 internet 里面的删除选项 发现样式和事件还是没用变 最终发现 需要 按 f12 找到这个清缓存才正常解决问题
    
			
    11.