【我的javaEE学习】前端例子之图片轮播与打字机

最新推荐文章于 2022-09-21 13:18:29 发布

小个子的奥特曼

最新推荐文章于 2022-09-21 13:18:29 发布

阅读量434

点赞数

分类专栏： JAVA学习我的JavaEE学习文章标签： java ee 前端 javascript

本文链接：https://blog.csdn.net/suqi356/article/details/78801493

版权

JAVA学习同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

我的JavaEE学习

12 篇文章 0 订阅

订阅专栏

最近有时间把自己的学习笔记放上来，方便以后自己复习。

一、js实现打字机之前看过一个案例，实现一句话逐步打印，于是，就有这个案例了。

定义定时器：

var id = setInterVal(code,毫秒数)：每隔指定的毫秒数执行一次函数

var id = setTimeout(code,毫秒数)

清理定时器：

clearInterVal(id);

clearTimeout(id);

<html>
<head>

<title>打字机</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">

      var s = "历史上的今天";
      var i = 0;
      var divObj ;
	function init(){
		divObj  = document.getElementById("divId");
		//定时器，200毫秒
		setInterval(show,200);
	}
	function show(){		
		i++;
		var str = s.substring(0,i);
		divObj.innerHTML=str;
		//当字符串写完后重新开始
		if(i==s.length){
			i=0;
		}
	}
</script>
</head >
<body onload="init()">
<div id="divId"></div>

</body>
</html>

效果如下：

二、轮播图片

这个很常见，比如购物网站，这里有用JS简单实现的，也有用bootstrap.min.js

利用JS代码如下：

<html>
  <head>    
    <title>图片轮播</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
      <script type="text/javascript">
         var i =1 ;
         function init(){  		
  		//定时器，200毫秒
  		setInterval(show,2000);
  	   }
         function show(){		
     		var imgobj = document.getElementById("imgid");
     		i++;
     		imgobj.src="${pageContext.request.getContextPath()}/img/front/section"+i+".jpg";
     		if(i>=3){
     			i=0;
     		}
     	   }
      </script>
  </head>
  
  <body onload="init()">
    <div>
    <img id="imgid" src="${pageContext.request.getContextPath()}/img/front/section1.jpg">
    </div>
  </body>
</html>

效果如下：

也可以用bootstrap.min.js实现，个人推荐这个，很不错的。

<body>
	<div class="Carouselimg">
		<div id="myCarousel" class="carousel slide" style="height:45%">
			<!-- 轮播（Carousel）指标 -->
			<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>
			</ol>
			<!-- 轮播（Carousel）项目 -->
			<div class="carousel-inner">
				<div class="item active">
					<img src="${basePath}/img/front/section2.jpg" alt="First slide">
				</div>
				<div class="item">
					<img src="${basePath}/img/front/section3.jpg" alt="Second slide">
				</div>
				<div class="item">
					<img src="${basePath}/img/front/section1.jpg" alt="Third slide">
				</div>
				<%-- <div class="item">
					<img src="${basePath}/img/front/section4.jpg" alt="Four slide">
				</div> --%>
			</div>			
		</div>
	</div>
</body>

这个需要引用bootstrap.min.js到代码里。效果如下：

小个子的奥特曼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【我的javaEE学习】前端例子之图片轮播与打字机

最近有时间把自己的学习笔记放上来，方便以后自己复习。一、js实现打字机之前看过一个案例，实现一句话逐步打印，于是，就有这个案例了。定义定时器： var id =setInterVal(code,毫秒数)：每隔指定的毫秒数执行一次函数 var id = setTimeout(code,毫秒数)清理定时器： clearInterVal(i...
复制链接

扫一扫