javascript以及jquery框架使用----轮播图实例

最新推荐文章于 2021-06-09 15:57:34 发布

weixin_42672830

最新推荐文章于 2021-06-09 15:57:34 发布

阅读量254

点赞数

本文链接：https://blog.csdn.net/weixin_42672830/article/details/82461528

版权

本周主要学习了javascript技术以及jquery框架
1.javascript：简称JS，是一种直译（无需编译）脚本语言，是一种动态类型，弱类型，基于原型语言，内置
支持类型。其解释器被称为javascript引擎，属于浏览器的一部分，广泛用于客户端的脚本语言，最早是在html（
标准通用标记语言下一个应用）网页上使用，用来给html网页增加动态功能。其语法与java类似。
2.javascript基础语法（ECMAScript）：数据类型（var弱类型）：数值型，字符串型，布尔型，数组，对象，null，undefined
运算符：算术，赋值，比较，逻辑，三目运算符
条件分支（if...else...；switch）
循环语句(for ，while)
标准对象（Number，String，Array，Date，Regexp，JSON）
浏览器对象模型（BOM）：window，navigator，screen，location，document，history
文档对象模型（DOM）：关于DOM的增删改查
3.jquery框架：是对js的方法包装，使开发者可以更简易地使用js。
以下是轮播图实例，需要引入bootstrap框架以及jquery框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="asserts/bootstrap-3.3.7-dist/css/bootstrap.min.css" />   
		<style type="text/css">
			img{
				width: 100%;
			}
		</style>
	</head>
	<body>
		<!--轮播插件-->
		<div class="carousel slide" id="myCarousel">
			<!--轮播指示器（）-->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1" ></li>
				<li data-target="#myCarousel" data-slide-to="2" ></li>
				<li data-target="#myCarousel" data-slide-to="3" ></li>
			</ol>
			<!--被轮播的组件：图片，层-->
			<div class="carousel-inner">
				<div class="item active">
					<img src="img/p1.jpg"/>
					<div class="carousel-caption">
						<div class="jumbotron" style="background: transparent;">
							
								<h1>喜洋洋</h1>
								<p>一起看</p>
							
						</div>
					</div>
				</div>
				<div class="item">
					<img src="img/p2.jpg"/>
				</div>
				<div class="item">
					<img src="img/p3.jpg"/>
				</div>
				<div class="item">
					<img src="img/p5.jpg"/>
				</div>
			</div>
			
			<!--切换控制器-->
			<a href="#myCarousel" class="left carousel-control" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left"></span>
			</a>
			<a href="#myCarousel" class="right carousel-control" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right"></span>
			</a>
			
		</div>
		
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	    <script src="asserts/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	    
	    <script type="text/javascript">
	    	$(function(){
	    		$('#myCarousel').carousel({
	    			interval:5000
	    		})
	    	})
	    </script>
	</body>
</html>

weixin_42672830

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript以及jquery框架使用----轮播图实例

本周主要学习了javascript技术以及jquery框架 1.javascript：简称JS，是一种直译（无需编译）脚本语言，是一种动态类型，弱类型，基于原型语言，内置支持类型。其解释器被称为javascript引擎，属于浏览器的一部分，广泛用于客户端的脚本语言，最早是在html（标准通用标记语言下一个应用）网页上使用，用来给html网页增加动态功能。其语法与java类似。 ...
复制链接

扫一扫