手机幻灯片

最新推荐文章于 2021-09-05 14:57:22 发布

含笑一过

最新推荐文章于 2021-09-05 14:57:22 发布

阅读量493

点赞数

分类专栏：前端文章标签： zepto-js

本文链接：https://blog.csdn.net/u013630488/article/details/50528528

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

                                    **手机幻灯片**

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

含笑一过

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手机幻灯片

**手机幻灯片**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-sca
复制链接

扫一扫