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

本文主要是介绍【我的javaEE学习】前端例子之图片轮播与打字机，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

一、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到代码里。效果如下：