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. 20155213 实验四 Android程序设计
			
    20155213 实验四 Android程序设计 实验内容 基于Android Studio开发简单的Android应用并部署测试; 了解Android组件.布局管理器的使用: 掌握Android中事 ...
    
			
    2. 
						
  2. 20155220 2016-2017-2 《java程序设计》第四周总结
			
    教材学习内容总结 第六章 继承与多态 继承 继承的基本原则是: 子类继承父类的所有成员变量(包括静态成员): 子类继承除父类构造方法外的所有成员方法(包括静态方法): 子类不能继承父类的构造方法,但在 ...
    
			
    3. 
						
  3. 20155305乔磊2016-2017-2《Java程序设计》第二周学习总结
			
    20155305乔磊 2016-2017-2 <Java程序设计>第二周学习总结 教材学习内容总结 第三章学习了基本类型 整数(short.int.long) 字节(byte) 浮点数(f ...
    
			
    4. 
						
  4. 20155338 《Java程序设计》实验一（Java开发环境的熟悉）实验报告
			
    20155338 <Java程序设计>实验一(Java开发环境的熟悉)实验报告 一.实验内容及步骤 1.用JDK编译.运行简单的java程序 步骤一(新建文件夹): 打开windows下的 ...
    
			
    5. 
						
  5. php 换行 PHP_EOL
			
    在unix世界换行就用/n来代替,但是windows为了体现他的不同,就用/r/n,更有意思的是在mac中用/r.因此unix系列用 /n,windows系列用 /r/n,mac用 /r,这样就用你写 ...
    
			
    6. 
						
  6. 【转载】深入理解Direct3D9
			
    原文:Effulgent的<深入理解Direct3D9>整理版(转) 深入理解Direct3D9 深入理解D3D9对图形程序员来说意义重大,我把以前的一些学习笔记都汇总起来,希望对朋友们有 ...
    
			
    7. 
						
  7. CF 1083 A. The Fair Nut and the Best Path
			
    A. The Fair Nut and the Best Path https://codeforces.com/contest/1083/problem/A 题意: 在一棵树内找一条路径,使得从起点 ...
    
			
    8. 
						
  8. C#：通过NuGet程序包下载CefSharp来加载谷歌浏览器
			
    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 首先我讲明一下我要做的,公司有个C# wpf的项目需要我把一个开发好的网页嵌入到客户端当中,由于种种原因,我放 ...
    
			
    9. 
						
  9. QT在子窗口外单击关闭子窗口
			
    网上查到了好多种方法,1.添加过滤器(eventFilter),2.重写鼠标单击事件,这两种方法都要判断鼠标单击位置是不是在子窗口上.而且在可编辑控件上如(下拉框.文本编辑框等),父窗口会直接传递到可 ...
    
			
    10. 
						
  10. scrapy 爬取知乎问题、答案 ，并异步写入数据库（mysql）
			
      python版本  python2.7 爬取知乎流程: 一 .分析 在访问知乎首页的时候(https://www.zhihu.com),在没有登录的情况下,会进行重定向到(https://www. ...
    
			
    11.