当前位置: 首页 > 工具软件 > Unslider.js > 使用案例 >

unslider.js 实现移动web轮播

夔博
2023-12-01

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%;width: 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 { 
			width: 100%;
			text-align: center;
			position: relative; 
			overflow: auto;	
		}
        .banner ul li { float: left; }
        .banner ul li img{width: 100%}
        .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
        .dots li { 
			display: inline-block; 
			width: 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>

  

转载于:https://www.cnblogs.com/steamedCray/p/5139011.html

 类似资料: