南宁小程序开发,挑战百日学习计划第45天(Css+javascript做轮播图实例)

最新推荐文章于 2022-04-30 12:04:24 发布

zkelm.com

最新推荐文章于 2022-04-30 12:04:24 发布

阅读量207

点赞数 1

分类专栏：南宁小程序开发小程序定制南宁小程序文章标签：南宁软件开发软件开发小程序定制南宁小程序

本文链接：https://blog.csdn.net/zkelm/article/details/107775201

版权

南宁小程序开发同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

小程序定制

15 篇文章 1 订阅

订阅专栏

南宁小程序

14 篇文章 0 订阅

订阅专栏

我要戒咖啡，因为喝咖啡会给我一种莫名的兴奋感，会让我误认为已经成功了的幻觉，然而忘记了自己的目标和初衷。我本应拥有源源不断的精神力量被消磨殆尽。所以我决定戒掉咖啡。
最近将有一个财务系统需要开发合作。已经在约谈，还有一个房地产公司，需要对自己的一套物业系统进行二次开发，他们已经找了7家公司都没人会做，而我们准备接下来I！letsgo！
南宁物业系统开发：www.zkelm.com

物业系统开发，物业小程序开发：www.zkelm.com

南宁小程序开发,挑战百日学习计划第45天(Css+javascript做轮播图实例)，这个我做了好几天，只是没有发布出来，今天晚上正好有时间，准备更新一下博文

南宁小程序开发，物业系统开发，企业建站

1.实现这个的终极思路就是一个UL 装着 3个LI 每个li中加入图片！

<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
</ul>

2.把 ul 之中的li 设置成 float：left 。并把 ul的width设置成 3个LI的宽度，简单让他们成一行
南宁企业OA定制开发。软件开发 www.zkelm.com
3.设置定时功能：

var mytimeid=window.setInterval(function(){
   这里是代码
},1500)

4.清除定时,需要知道清楚的一个句柄

window.clearInterval(mytimeid);

好的详细的代码发表如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>				
		<style type="text/css">
			.box{
				width:100%;
			}
			.con{
				width:685px;
				overflow:hidden;
				height: 300px;
				border:1px solid #aaa;
				margin:0 auto;
				position: relative;
			}
			ul li{
				list-style:none;
				float: left;
				margin: 0;
			}
			ul{
				margin: 0px;
				padding: 0px;
				width:2055px;
				position: absolute;
				transition: left 1s;
			}
			.imgleft{
				width:50px;
				height: 100%;
				background: #AAAAAA;
				opacity:0.5;
				position: absolute;
				font-size: 30px;
				font-weight:500;
				color:#111;
				line-height: 300px;
				left:0;
				text-align:center;
				
			}
			.imgright{
				width:50px;
				height: 100%;
				background: #AAAAAA;
				opacity:0.5;
				position: absolute;
				font-size: 30px;
				font-weight:500;
				color:#111;
				line-height: 300px;
				right: 0;
				text-align:center;
			}
			.idc:hover{
				background-color: #bbb;
				opacity: 0.6;
				color: #fff;
				cursor:pointer;
			}
			.scroll{
				width:80px;
				height: 15px;
				position: absolute;
				background-color: #fff;
				bottom:20px;
				border-radius:10px;
				left:302px;
			}
			.scroll ol li{
				width:10px;
				height: 10px;
				background-color:#aaa;		
				border-radius: 5px;				
				box-shadow: 0px 0px 5px #aaa;
				border: 1px solid #ccc;
				
			}
			.scroll ol{
				margin: 0;
				padding: 0;
				list-style: none;				
				width:100%;
				display: flex;
				justify-content:space-around;
				height: 100%;
				align-items: center;
			}
			.scroll ol li.enter{
				background-color: deepskyblue;
			}
			h2{
				text-align:center;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h2>Css+javascript制作轮播图</h2>
			<div class="con">
				
				<ul>
					<li><img src="./images/lbt2.jpg"></li>
					<li><img src="./images/lbt3.jpg"></li>
					<li><img src="./images/lbt1.jpg"></li>
				</ul>
				<div class="imgleft idc"> < </div>
				<div class="imgright idc"> > </div>
				<div class="scroll">
					<ol>
						<li></li>
						<li></li>
						<li></li>
					</ol>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			window.onload=function(){
				var mul=document.querySelector(".con ul");
				var olli=document.querySelectorAll("ol li");
				
				var index=0;
				document.querySelector(".imgleft").onclick=function(){
					index++;
					if(index>2){						
						index=0;						
					}
					
					mul.style.left=-index*685+"px";
					licheck(index);
				}
				document.querySelector(".imgright").onclick=function(){
					index--;
					if(index<0){
						index=2;
					}
					
					mul.style.left=-index*685+"px";
					licheck(index);
				}
				licheck(index);
				
				function licheck(m){
					for(var i=0;i<olli.length;i++){
						olli[i].style.background="#aaa";
					}
					olli[m].style.background="deepskyblue";
				}
				
				var timeid=setInterval(function(){
					document.querySelector(".imgleft").click();
				},2000)
				for(var i=0;i<olli.length;i++){
					olli[i].setAttribute("id",i);
					olli[i].onclick=function(){
						index=this.getAttribute("id");
						mul.style.left=-index*685+"px";
						licheck(index);
					}
				}
				
				document.querySelector(".con").onmouseover=function(){
					window.clearInterval(timeid);
				}
			}
			
		</script>
	</body>
</html>

图片一共三个，我这里贴出来给大家
小程序开发公司：www.zkelm.com
南宁小程序开发：www.zkelm.com
广西小程序开发公司：www.zkelm.com

广西小程序，软件开发公司：www.zkelm.com

好了，教程就到这里结束，如果有不明白的欢迎加微信交流！每天进步1% 。

zkelm.com

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
南宁小程序开发,挑战百日学习计划第45天(Css+javascript做轮播图实例)

我要戒咖啡，因为喝咖啡会给我一种莫名的兴奋感，会让我误认为已经成功了的幻觉，然而忘记了自己的目标和初衷。我本应拥有源源不断的精神力量被消磨殆尽。所以我决定戒掉咖啡。最近将有一个财务系统需要开发合作。已经在约谈，还有一个房地产公司，需要对自己的一套物业系统进行二次开发，他们已经找了7家公司都没人会做，而我们准备接下来I！letsgo！物业系统开发，物业小程序开发：www.zkelm.com南宁小程序开发,挑战百日学习计划第45天(Css+javascript做轮播图实例)，这个我做了好几天，只
复制链接

扫一扫