jquery jquery移动端js库
1、zeptojs
其用法与jquery库用法一样
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zepto</title>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript">
$(function () {
alert("heiheih");
})
</script>
</head>
<body>
</body>
</html>
2、swiper
3、移动端幻灯片滑动效果lianxi
.
.
.
.
.
.
.
显示效果如下所示：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css"> <!--自己定义的css，所以要在最后引入css-->
<script type="text/javascript" src="js/set_root.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/swiper.jquery.min.js"></script>
<script type="text/javascript">
$(function () {
/**
1、initialSlide：初始索引值，从0开始
2、direction：滑动方向 horizontal | vertical
3、speed：滑动速度，单位ms
4、autoplay：设置自动播放及播放时间
5、autoplayDisableOnInteraction：用户操作swipe后是否还自动播放，默认是true，不再自动播放
6、pagination：分页圆点
7、paginationClickable：分页圆点是否点击
8、prevButton：上一页箭头
9、nextButton：下一页箭头
10、loop：是否首尾衔接
* */
var swiper=new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
initialSlide :0, // 表示初初始的第几张幻灯片
paginationClickable: true, // 小圆点是否可点击
loop: true, // 是否收尾相连的循环
autoplay:200000, // 自动播放的间隔时间
autoplayDisableOnInteraction:true // 用户点击后是否自动播放
})
})
</script>
<title>天天生鲜-首页</title>
</head>
<body>
<div class="main_wrap">
<div class="header clearfix">
<a href="#" class="logo"><img src="images/logo.png" alt="天天生鲜logo"></a>
<a href="#" class="search"></a>
</div>
<div class="center_con">
<div class="slide">
<!-- 以下是swiper库固定的关灯片写法-->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 对应着每张幻灯片-->
<div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>
<div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>
<div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>
</div>
<!-- 幻灯片下面的小圆点-->
<div class="swiper-pagination"></div>
<!--左侧箭头-->
<div class="swiper-button-prev"></div>
<!--右侧箭头-->
<div class="swiper-button-next"></div>
</div>
</div>
<!-- ul.menu>(li>a+h2{水果})*8 -->
<div class="menu_con clearfix">
<ul class="menu">
<li>
<a href="#"></a>
<h2>水果</h2>
</li>
<li>
<a href="#"></a>
<h2>水果</h2>
</li>
<li>
<a href="#"></a>
<h2>水果</h2>
</li>
<li>
<a href="#"></a>
<h2>水果</h2>
</li>
<li>
<a href="#"></a>
<h2>水果</h2>
</li>
<li>
<a href="#"></a>
<h2>水果</h2>
</li>
<li>
<a href="#"></a>
<h2>水果</h2>
</li>
<li>
<a href="#"></a>
<h2>水果</h2>
</li>
</ul>
</div>
<div class="common_model clearfix">
<div class="common_title">
<h3>新鲜水果</h3>
<a href="#">更多 ></a>
</div>
<a href="#" class="banner"><img src="images/banner.jpg" alt="banner"></a>
<ul class="goods_list">
<li>
<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>新西兰皇家大红苹果</h4>
<p class="unit">12/提</p>
<p class="price">¥68.00</p>
<a href="#" class="add_chart"></a>
</li>
<li>
<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>新西兰皇家大红苹果</h4>
<p class="unit">12/提</p>
<p class="price">¥68.00</p>
<a href="#" class="add_chart"></a>
</li>
<li>
<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>新西兰皇家大红苹果</h4>
<p class="unit">12/提</p>
<p class="price">¥68.00</p>
<a href="#" class="add_chart"></a>
</li>
</ul>
</div>
<div class="common_model clearfix">
<div class="common_title">
<h3>新鲜水果</h3>
<a href="#">更多 ></a>
</div>
<a href="#" class="banner"><img src="images/banner.jpg" alt="banner"></a>
<ul class="goods_list">
<li>
<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>新西兰皇家大红苹果</h4>
<p class="unit">12/提</p>
<p class="price">¥68.00</p>
<a href="#" class="add_chart"></a>
</li>
<li>
<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>新西兰皇家大红苹果</h4>
<p class="unit">12/提</p>
<p class="price">¥68.00</p>
<a href="#" class="add_chart"></a>
</li>
<li>
<a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>新西兰皇家大红苹果</h4>
<p class="unit">12/提</p>
<p class="price">¥68.00</p>
<a href="#" class="add_chart"></a>
</li>
</ul>
</div>
</div>
<ul class="footer">
<li>
<a href=""></a>
<h2>首页</h2>
</li>
<li>
<a href=""></a>
<h2>首页</h2>
</li>
<li>
<a href=""></a>
<h2>首页</h2>
</li>
<li>
<a href=""></a>
<h2>首页</h2>
</li>
</ul>
</div>
</body>
</html>
427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
