jQuery-mobile之简单的图片轮播

最新推荐文章于 2023-09-14 18:36:20 发布

Michael II

最新推荐文章于 2023-09-14 18:36:20 发布

阅读量2.2k

点赞数 1

分类专栏： jQuery学习文章标签： jQuery-mobile之简单的图片轮播 jQuery-mobile基础图片轮播

本文链接：https://blog.csdn.net/YYxiaobao0726/article/details/88544076

版权

jQuery学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

最近开始学习jQuery-mobile，讲解了一个简单的图片轮播（要对jQuery有一定的基础），下面我将代码分享出来。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		 <link rel="stylesheet" type="text/css" 
    			href="css/jquery.mobile-1.4.5.min.css">
	</head>
	<body>
		<div data-role="page"> <!--页面容器-->
			<div data-role="header"> <!--头部栏-->
				旅游集锦
			</div>
			<div data-role="content" id="ctx" style="width: 500px;height: 500px;"><!--内容-->
				烟花三月下扬州
			</div>
			<input type="hidden" value="0" id="imgIndex">
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.mobile-1.4.5.min.js" ></script>
		<script>
			//interval(fn,1000);
			$(document).ready(function(){
				var imgArray =['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
				//将图片放到一个数组里
				var temp;
				if (typeof(temp)=="undefined") {
					temp = setInterval(fn,500);  /*每隔0.5秒调用函数,实现图片轮播*/
				}
				
				
				function fn() {
					var index = parseInt($("#imgIndex").val());
					index = ++index%4;  //图片下标加一
					/*
					index++;
					if (index%4 ==0) {
						index =0
					} 
					
					if (index==4) {
						index ==0;
					}
					
					**/
					var bg = "url(" + imgArray[index] + ")";
					$("#ctx").css("backgroundImage",bg);
					$("#imgIndex").val(index);
				}

			});
		</script>

		
	</body>
</html>

样式很简单就不给出了，部分地方都已作出注释，若有看的不懂的地方请在下方评论，谢谢。

Michael II

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery-mobile之简单的图片轮播

&nbsp;&nbsp;&nbsp;&nbsp;最近开始学习jQuery-mobile，讲解了一个简单的图片轮播（要对jQuery有一定的基础），下面我将代码分享出来。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/t
复制链接

扫一扫

专栏目录