网页特效

swiper jquery移动端图片列表li等按下左右滑动效果

位置:首页 > 网页特效 > 广告特效,2019-02-22 11:10
近来网站开发需要,做了个swiper jquery移动端图片列表li等按下左右滑动效果
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>swiper移动端图片列表ul li等按下滑动效果</title> 
<meta name="keywords" content="swiper移动端图片列表ul li等按下滑动效果">
<meta name="description" content="swiper移动端图片列表ul li等按下滑动效果"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<script type="text/javascript" src="/js/jquery.min.js"></script>
<link href="/css/idangerous.swiper.css" rel="stylesheet" type="text/css" />
<script src="/js/idangerous.swiper.min.js"></script> 
<style type="text/css"> 
* { margin:0; padding:0;} 
</style> 
<script src="jquery.min.js" type="text/javascript"></script> 
<link href="idangerous.swiper.css" rel="stylesheet" type="text/css" />
<script src="idangerous.swiper.min.js"></script> 
<style type="text/css"> 
.swiper-slide div{height:100px;border:1px solid #ccc;margin:10px;}
</style> 
<script language="javascript" type="text/javascript"> 

$(document).ready(function () { 

new Swiper('#swiper-container',{
slidesPerView : 2,
autoplay :2000,
autoplayDisableOnInteraction : false,
loop : true
});



}); 
</script> 
</head> 
<body> 
swiper移动端图片列表ul li等按下滑动效果

<div class="swiper-container" id="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<div>1</div>
		</div>
		<div class="swiper-slide">
			<div>2</div>
			</div>
		<div class="swiper-slide">
			<div>3</div></div>
			<div class="swiper-slide">
			<div>4</div></div>
			<div class="swiper-slide">
			<div>5</div></div>
	</div>
</div>
</body> 
</html> 

TAGS:jquery移动端图片列表滑动

猜你喜欢

NewHot