Web App 开发----图片轮播（gallery）

最新推荐文章于 2022-05-18 20:59:41 发布

烊烊！

最新推荐文章于 2022-05-18 20:59:41 发布

阅读量455

点赞数

文章标签： web app

本文链接：https://blog.csdn.net/m0_58760840/article/details/123784837

版权

1.图片轮播

图片轮播：支持图片循环和不支持图片循环

支持循环：左滑，直接切换到第1张图片，图片可循环播放

不支持图片循环：图片轮播到最后一张图片将轮播停止，必须右滑回到第一张图片

若要支持循环，则需要在.mui-slider-group节点上增加.mui-slider-loop类，同时需要重复增加2张图片，图片顺序变为：4、1、2、3、4、1

轮播小圆圈：

<div class="mui-slider-indicator">
               <div class="mui-indicator mui-active"></div>
               <div class="mui-indicator"></div>
               <div class="mui-indicator"></div>
               <div class="mui-indicator"></div>
</div>
       </div>

用户可以设定是否自动轮播及轮播周期：

var gallery = mui(# );

gallery.slider({

interval:2000 //自动轮播周期，若为0则不自动播放，默认为0；

});

支持循环：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>

	<body>
		<!-- 循环图片轮播 -->
		<div id="slider1" class="mui-slider">
			<div class="mui-slider-group mui-slider-loop">
				<!-- 额外增加节点 -->
				<div class="mui-slider-item mui-slider-duplicate ">
					<a href="#"><img src="imgs/04.jpg" /></a>
				</div>

				<div class="mui-slider-item">
					<a href="#"><img src="imAgs/01.jpg" /></a>
				</div>
				<div class="mui-slider-item">
					<a href="#"><img src="imgs/02.jpg" /></a>
				</div>
				<div class="mui-slider-item">
					<a href="#"><img src="imgs/03.jpg" /></a>
				</div>
				<div class="mui-slider-item">
					<a href="#"><img src="imgs/04.jpg" /></a>
				</div>
				<!-- 额外增加节点 -->
				<div class="mui-slider-item mui-slider-duplicate ">
					<a href="#"><img src="imgs/1.jpg" /></a>
				</div>
			</div>
			<!-- 圆圈 -->
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
	</body>
	<script src="js/mui.js"></script>
	<script type="text/javascript">
		mui.init()
		//循环图片轮播
		var slider1 = mui("#slider1");
		slider1.slider({
			interval: 1000
		});
	</script>
</html>

代码效果：

2.图片轮播---下方悬浮标题的循环图片轮播

轮播小圆圈：

<div class="mui-slider-indicator mui-text-right"> //添加.mui-text-right使小圆圈固定在右边
    <div class="mui-indicator mui-active"></div>
               <div class="mui-indicator"></div>
               <div class="mui-indicator"></div>
               <div class="mui-indicator"></div>
</div>
       </div>

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>

	<body>
		<!-- 循环图片轮播 -->
		<div id="slider1" class="mui-slider">
			<div class="mui-slider-group mui-slider-loop">
				<!-- 额外增加节点 -->
				<div class="mui-slider-item mui-slider-duplicate ">
					<a href="#">
						<img src="images/00.jpg" />
						<p class="mui-slider-title">下方悬浮标题的循环图片轮播效果4</p>
						</a>
				</div>

				<div class="mui-slider-item">
					<a href="#">
						<img src="images/00.jpg" />
						<p class="mui-slider-title">下方悬浮标题的循环图片轮播效果1</p>
					</a>
				</div>
				<div class="mui-slider-item">
					<a href="#">
						<img src="images/00.jpg" />
						<p class="mui-slider-title">下方悬浮标题的循环图片轮播效果2</p>
					</a>
				</div>
				<div class="mui-slider-item">
					<a href="#">
						<img src="images/00.jpg" />
						<p class="mui-slider-title">下方悬浮标题的循环图片轮播效果3</p>
					</a>
				</div>
				<div class="mui-slider-item">
					<a href="#">
						<img src="images/00.jpg" />
						<p class="mui-slider-title">下方悬浮标题的循环图片轮播效果4</p>
					</a>
				</div>
				<!-- 额外增加节点 -->
				<div class="mui-slider-item mui-slider-duplicate ">
					<a href="#">
						<img src="images/00.jpg" />
						<p class="mui-slider-title">下方悬浮标题的循环图片轮播效果1</p>
					</a>
				</div>
			</div>
			<!-- 圆圈 -->
			<div class="mui-slider-indicator mui-text-right">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
	</body>
	<script src="js/mui.js"></script>
	<script type="text/javascript">
		mui.init()
		// //循环图片轮播
		var slider1 = mui("#slider1");
		slider1.slider({
			interval: 1000
		});
	</script>

</html>

代码效果：