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. 2016-2017-2 《Java程序设计》第3周学习总结
			
    20155202张旭 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 第四章:认识对象: java两个类型系统:基本类型,类类型. 定义"构造函数& ...
    
			
    2. 
						
  2. 20155321 实验四 Android程序设计
			
    20155321 实验四 Android程序设计 安装Android studio成功 任务一:Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)( ...
    
			
    3. 
						
  3. 【转载】C/C++杂记：运行时类型识别（RTTI）与动态类型转换原理
			
    原文:C/C++杂记:运行时类型识别(RTTI)与动态类型转换原理 运行时类型识别(RTTI)的引入有三个作用: 配合typeid操作符的实现: 实现异常处理中catch的匹配过程: 实现动态类型转换 ...
    
			
    4. 
						
  4. Mybatis传递参数的三种方式
			
    第一种: Dao层使用@Param注解的方法 VersionBox getVersionByVersionNumAndVersionType(@Param("versionNum" ...
    
			
    5. 
						
  5. TCP的三次握手和四次分手
			
    TCP的三次握手 图解:     • 第一次握手:客户端发送syn包到服务器,并进入syn_send状态,等待服务器进行确认: • 第二次握手:服务器收到客户端的syn包,必须确认客户的SYN,同时自 ...
    
			
    6. 
						
  6. protobuf工程的编译以及使用
			
    一. 获取Protocol Buffer 1.1 获得源码 Github:ProtocolBuffer源码 Git clone之:git clone https://github.com/google ...
    
			
    7. 
						
  7. [转]操作系统Unix、Windows、Mac OS、Linux的故事
			
    [写得很江湖气,可惜找不到原作者了] 文章转自:http://blog.csdn.net/wenmingchan/article/details/49925379 http://www.jb51.ne ...
    
			
    8. 
						
  8. Spring Cloud Learning(一): 服务注册
			
    官网https://projects.spring.io/spring-cloud/,spring cloud官网各组件版本为: Component Edgware.SR4 Finchley.SR1  ...
    
			
    9. 
						
  9. Codeforces Round #502 (in memory of Leopoldo Taravilse, Div. 1 + Div. 2) E. The Supersonic Rocket
			
    这道题比赛之后被重新加了几个case,很多人现在都过不了了 算法就是先求凸包,然后判断两个凸包相等 我们可以吧凸包序列化为两点距离和角度 角度如果直接拿向量的叉积是不对的,,因为钝角和锐角的叉积有可能 ...
    
			
    10. 
						
  10. web _service 接口
			
    1.WebService 就是 http请求    post接口 2.需要加 请求头信息 Content-Type: text/xml; 3.需要把占位符换成需要的字符串 webservice接口可以 ...
    
			
    11.