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. 20155325 2016-2017-2 《Java程序设计》第九周学习总结
			
    教材学习内容总结 SRP高内聚 开发工作原则:对扩充开发,对修改封闭.(对模块的行为可以扩充:模块的源代码不可更改) OO设计 依赖倒置原则:高层模块不依赖于 Linux视频笔记 安装时的说明(非ub ...
    
			
    2. 
						
  2. installshield 判断mdmcpq.inf和usbser.sys 是否 存在
			
    1.产品上位机程序,需要驱动支持,在安装  exe程序的时候,连同NET框架4.0和 .inf驱动文件,一起安装, 安装驱动的时候,会发现, 如果系统 C:\Windows\Inf 缺少mdmcpq. ...
    
			
    3. 
						
  3. Drupal8 新建第一个模块
			
    参考: https://www.drupal.org/developing/modules/8 https://www.drupal.org/node/1915030 https://www.drup ...
    
			
    4. 
						
  4. Pandas v0.23.4手册汉化
			
    Pandas手册汉化 此页面概述了所有公共pandas对象,函数和方法.pandas.*命名空间中公开的所有类和函数都是公共的. 一些子包是公共的,其中包括pandas.errors, pandas. ...
    
			
    5. 
						
  5. The specified value "2019-1-2" does not conform to the required format, "yyyy-MM-dd"
			
    问题: 在cshtml中转换的日期格式错误,前端报错:The specified value "2019-1-2" does not conform to the required ...
    
			
    6. 
						
  6. 180726-InfluxDB基本概念小结
			
    InfluxDB基本概念小结 InfluxDB作为时序数据库,与传统的关系型数据库相比而言,还是有一些区别的,下面尽量以简单明了的方式介绍下相关的术语概念 I. 基本概念 mysql influxdb ...
    
			
    7. 
						
  7. APP端测试，常见功能测试点汇总
			
    除去每个产品和版本不同的业务需求以及功能,针对于大多数的APP的共同点和移动设备的特性,本文总结了一些APP功能测试中经常遇见,需要考虑到的测试点以共参考 一.安装和卸载 应用的安装和卸载在任何一款A ...
    
			
    8. 
						
  8. 小白初识 - 快速排序（QuickSort）
			
    我个人觉得快速排序和归并排序有相似之处,都是用到了分治的思想,将大问题拆分成若干个小问题. 不同的地方是归并排序是先把大问题拆分好了之后再排序,而快速排序则是一边拆分,一边排序. 快速排序的原理就是, ...
    
			
    9. 
						
  9. vue cli 3      +jquery
			
    const webpack = require('webpack')module.exports = { // baseUrl type:{string} default:'/' // 将部署应用程序 ...
    
			
    10. 
						
  10. openstack-r版(rocky)搭建基于centos7.4 的openstack swift对象存储服务 一
			
    openstack-r版(rocky)搭建基于centos7.4 的openstack swift对象存储服务 一 openstack-r版(rocky)搭建基于centos7.4 的openstac ...
    
			
    11.