您的位置：首页 > 其它

手机幻灯片

2016-01-16 16:00 1101 查看

**手机幻灯片**

html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery手机端触屏滑动幻灯片代码演示_大头网</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="css/style.css">
<script src="js/zepto.min.js"></script>
<script src="js/zepto.touchSlider.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div id="slider-box">
<ul id="slider">
<li><img src="images/1.jpg" alt="" /></li>
<li><img src="images/2.jpg" alt="" /></li>
<li><img src="images/3.jpg" alt="" /></li>
</ul>
</div>
<script>
$(function(){
$('#slider-box').touchSlider({
box: '#slider-box',
arrow: true,
auto: true,
autoTime: 3000
});
});
</script>
</body>
</html>

css

@CHARSET "UTF-8";
/* 代码整理：大头网 www.datouwang.com */
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background-color:#f2f2f2;}
body{max-width:640px;margin:0 auto;box-shadow:0 0 160px 0 #999;position:relative;font: .85em/1.4 "微软雅黑","Microsoft Yahei",'Arial','san-serif';color: #666;}
img{max-width:100%;height:auto;width: auto9;-ms-interpolation-mode:bicubic;vertical-align: middle;}
ul,li{list-style:none;padding:0;margin:0;}
p{padding:0 20px;}

/*slider*/
#slider-box{position:relative;width:100%;height:175px;overflow:hidden;}
#slider {height:100%;overflow:hidden;*zoom:1;-webkit-backface-visibility: hidden;-webkit-transform-style: preserve-3d;}
#slider li{width:100%;height:100%;float:left;display:none;}
#slider li.active{display:block;-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
#slider li img{width:100%;}
#arrow {position:absolute;bottom:10px;left: 50%;margin-left: -27px;}
#arrow li{width:12px;height:12px;float:left;display:inline-block;margin: 0 3px;background-color: #d5dbd6;border-radius: 50%;-webkit-border-radius: 50%;}
#arrow li.active{background-color:#c95122;}

效果图：

下载地址：

http://pan.baidu.com/s/1skhxVRJ

秘钥：ax4n

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航