zoukankan      html  css  js  c++  java
  • unslider.js 实现移动web轮播

    unslider.js可以实现轮播,但是在移动端还需要另两个插件。

    jquery.event.movejQuery.event.swipe ;

    下面就是简单的实例:

    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
        <meta content="no" name="apple-touch-fullscreen">
        <meta name="format-detection" content="telephone=no">
        <meta content="no" name="apple-mobile-web-app-capable">
    	<title>Document</title>
    	<script src="jquery-1.11.1.min.js"></script>
    	
    	<style>
    	html,body{height: 100%; 100%}
    	*{margin: 0;padding: 0;list-style: none;}
    		.dome{
    			height: 100%;
    			display: box;
    			display: -moz-box;
    			display: -webkit-box;
    			-moz-box-orient: vertical;
    			-webkit-box-orient: vertical;
    			-moz-box-pack:center; 
        		-moz-box-align:center; 
        		-webkit-box-pack:center;
        		-webkit-box-align:center;
    		}
    		.banner { 
    			 100%;
    			text-align: center;
    			position: relative; 
    			overflow: auto;	
    		}
            .banner ul li { float: left; }
            .banner ul li img{ 100%}
            .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
            .dots li { 
    			display: inline-block; 
    			 10px; 
    			height: 10px; 
    			margin: 0 4px; 
    			text-indent: -999em; 
    			border: 2px solid #fff; 
    			border-radius: 6px; 
    			cursor: pointer; 
    			opacity: .4; 
    			-webkit-transition: background .5s, opacity .5s; 
    			-moz-transition: background .5s, opacity .5s; 
    			transition: background .5s, opacity .5s;
    		}
    		.dots li.active {
    			background: #fff;
    			opacity: 1;
    		}
    	</style>
    </head>
    <body class="one">
    	<div class="dome">
    	<div class="banner">
    	    <ul>
    	        <li><img src="01.jpg" alt=""></li>
    		<li><img src="02.jpg" alt=""></li>
    		<li><img src="03.jpg" alt=""></li>
    		<li><img src="04.jpg" alt=""></li>
    		<li><img src="05.jpg" alt=""></li>
    	    </ul>
    	</div>
    	</div>
    </body>
    <script src="unslider.min.js"></script>
    <script src="jquery.event.move.js"></script>
    <script src="jquery.event.swipe.js"></script>
    <script>
    
        var unslider=$('.banner').unslider({
        	speed: 500,               
    		delay: false,              
    		complete: function() {},  
    		keys: true,               
    		dots: true, 
    		autoplay: false,              
    		fluid: true  
        });
    
        var data = unslider.data('unslider');
        var slides = $('.banner');
            slides.on('swipeleft', function(e) {
                data.next();
            }).on('swiperight', function(e) {
                data.prev();
            });
    
    </script>
    </html>
    

      

  • 相关阅读:
    中国AI觉醒 阿里王坚:云智能将成为大趋势
    中国AI觉醒 阿里王坚:云智能将成为大趋势
    如何设计scalable 的系统 (转载)
    如何设计scalable 的系统 (转载)
    如何设计scalable 的系统 (转载)
    如何设计scalable 的系统 (转载)
    odoo开发笔记--模型中常用的方法
    odoo开发笔记--模型中常用的方法
    odoo开发笔记--模型中常用的方法
    用五分钟重温委托,匿名方法,Lambda,泛型委托,表达式树
  • 原文地址:https://www.cnblogs.com/steamedCray/p/5139011.html
Copyright © 2011-2022 走看看