移动端js事件和库（zepto库、swiper.js插件）

最新推荐文章于 2021-12-03 22:45:37 发布

小哦--

最新推荐文章于 2021-12-03 22:45:37 发布

阅读量584

点赞数

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/sundanping_123/article/details/100524351

版权

jQuery 专栏收录该内容

41 篇文章

订阅专栏

本文探讨了如何在移动端利用JavaScript事件处理和库来提升用户体验。特别地，通过实例介绍了使用Zepto库和Swiper.js插件实现幻灯片切换的效果，虽然具体代码未详述，但突显了这两个工具在创建动态效果中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

使用swiper 做幻灯片切换，代码太长，只写swiper段：

<!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">
	<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(){
			var swiper = new Swiper('.swiper-container', {
					  pagination: '.swiper-pagination',
					  prevButton: '.swiper-button-prev',
					  nextButton: '.swiper-button-next',
					  // 初始的幻灯片是第几张
					  initialSlide :0,

					 // 小圆点是否可点击
					  paginationClickable: false,

					  //是否连续播放(设置false会在最后一张返回)
					  loop: true,

					  // 设置多长时间间隔播放一张
					  autoplay:3000,

					  // 用户操作后还是否自动播放
					  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">

				<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>
			...

在这里插入图片描述