原生javascript实现完整的轮播图

最新推荐文章于 2021-01-11 19:41:50 发布

我不想学习了

最新推荐文章于 2021-01-11 19:41:50 发布

阅读量443

点赞数

CC 4.0 BY-SA版权

分类专栏：报错笔记记录分享文章标签：原生js 轮播图 css html es5 动画效果

本文链接：https://blog.youkuaiyun.com/z15802933724/article/details/83111992

报错同时被 3 个专栏收录

20 篇文章

订阅专栏

笔记

20 篇文章

订阅专栏

记录

20 篇文章

订阅专栏

本文详细介绍了如何从零开始构建一个轮播图特效，包括HTML结构搭建、CSS样式设置，以及后续将加入的JavaScript动态处理。通过本文，你将学会如何创建一个既美观又实用的轮播图组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

轮播图是现在网站网页上最常见的效果之一，我们日常工作可能会使用轮播图插件，可是一旦插件和需求不对等的时候你就需要寻找更符合你要求的插件。那么我们有找插件的功夫还不如自己写一个轮播图，既提升了技术又便于维护。

无论我们做什么特效，都要记住一个原则，先写静态的代码，再做动态的处理！

html

         //最外层壳子 
	 <div class='all' id='all'>
     
	   <div class='screen' id='screen'>
                //装图片的壳子
		<ul id='ul'>
		 <li><img src="img/tx1.jpg" width="500" height='200' alt=""></li>
		 <li><img src="img/tx2.jpg" width="500" height='200' alt=""></li>
		 <li><img src="img/tx3.jpg" width="500" height='200' alt=""></li>
		 <li><img src="img/tx4.jpg" width="500" height='200' alt=""></li>
		 <li><img src="img/tx5.jpg" width="500" height='200' alt=""></li>
		</ul>
                //装图片序号的壳子等会根据图片的数量用js动态添加
		<ol></ol>
                //左右箭头
		<div id="arr">
	          <span id="left"></span>
		  <span id="right"></span>
		</div>
	   </div>

	 </div>

html搭建了一个基础的轮播图框架

现在页面的图片是按顺序展开的

接下来用css给它美化一下

   *{
	 padding:0;
	  margin:0; 
	  list-style:none; 
	  border:0;
	}
    .all{
        width:500px;
        height:200px;
        padding:7px;
        border:1px solid #ccc;
        margin:100px auto;
        position:relative;
    }
    .screen{
        width:500px;
        height:200px;
        overflow:hidden;
        position:relative;
    }
    .screen li{
        width:500px; 
        height:200px; 
        overflow:hidden; 
        float:left;
    }
    .screen ul{ 
    	position:absolute; 
    	left:0; top:0px; 
    	width:3000px;
    }
    .all ol{ 
    	position:absolute; 
    	right:10px; 
    	bottom:10px; 
    	line-height:20px; 
    	text-align:center;
    }
    .all ol li{ 
    	float:left; 
    	width:20px; 
    	height:20px; 
    	background:#fff; 
    	border:1px solid #ccc; 
    	margin-left:10px; 
    	cursor:pointer;
    	border-radius: 50%;
    	color: #999;
    }
    .all ol li.current{ 
    	background:#bfab1f;
    	border: 1px solid #bfab1f;
    	color: #fff;
    }
    #arr {
    	display: none;
    }
    #arr span{ 
    	width:40px; 
    	height:40px; 
    	position:absolute; 
    	left:5px; 
    	top:50%; 
    	margin-top:-20px; 
    	background:#000; 
    	cursor:pointer; 
    	line-height:40px; 
    	text-align:center; 
    	font-weight:bold; 
    	font-family:'黑体'; 
    	font-size:30px; 
    	color:#fff; 
    	opacity:0.3; 
    	border:1px solid #fff;
    }
    #arr #right{
    	right:5px; 
    	left:auto;
    }

美化后的效果：