jQuery-mobile之简单的图片轮播

た入场券 2022-03-08 02:12 304阅读 0赞

最近开始学习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>

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

发表评论取消回复

表情：

评论列表（有 0 条评论，304人围观）

还没有评论，来说两句吧...

相关阅读

相关 html简单图片轮播居中,html简单图片轮播的实现

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进先来贴一发代码 ![s1.jpg][] ![s2.jpg][] ![s3.jpg][] 在这个html的

蔚落/ 2022年10月06日 10:52/ 0 赞/ 429 阅读

相关简单的html轮播图片怎么做的,简单的HTML+js图片轮播?

这个我写过，不知道你是否有什么特殊的要求。 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN html

Love The Way You Lie/ 2022年10月06日 07:49/ 0 赞/ 229 阅读

相关 jQuery 简单的图片轮播特效

加了很多技术群，前端的，程序的，运维的等等。。。经常有入门菜鸟问图片轮播怎么实现。我总是很无奈的说，这个百度上一搜一大堆视频教程，为毛不看看呢？后来有人竟然

快来打我*/ 2022年08月05日 11:09/ 0 赞/ 219 阅读

相关 html简单图片轮播的实现

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进先来贴一发代码 <!DOCTYPE HTML> <html> <head>

港控/mmm°/ 2022年08月03日 14:36/ 0 赞/ 401 阅读

相关最简单的图片轮播实现

以下代码保存为一个xx.html即可运行。 <html <head> <style> \banner \{

傷城~/ 2022年07月15日 11:45/ 0 赞/ 203 阅读

相关简单图片轮播器的实现

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Docume

迷南。/ 2022年07月14日 13:26/ 0 赞/ 242 阅读

相关 JS实现简单的图片轮播

看了很多大佬的博客，大佬们的博客写的都非常有水平，小菜鸡今天就用自己的理解方式，按照自己的思路整理一下学习笔记啦！！！轮播、轮播自然就是轮流着播放啦！图片轮播简单来

- 日理万妓/ 2022年05月17日 08:12/ 0 赞/ 258 阅读

相关 JS之实现简单的图片轮播

> 复制即可使用 1：代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"

Myth丶恋晨/ 2022年05月13日 13:56/ 0 赞/ 203 阅读

相关轮播图片简单常用的图片轮播，新闻轮播，焦点新闻轮播

空话就不多说了，开始。。。简略经常使用的图片轮播，新闻轮播，焦点新闻轮播,空话不说，贴代码，代码简略易懂，非插件，欢迎留言啊，有什么问题可以指出来,效果图如下 ![轮播和

川长思鸟来/ 2022年03月31日 02:12/ 0 赞/ 458 阅读

相关 jQuery-mobile之简单的图片轮播

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

た入场券/ 2022年03月08日 02:12/ 0 赞/ 305 阅读