js制作简单的轮播图

缺乏、安全感 2022-04-13 11:57 284阅读 0赞

今天帅帅学到了js部分就想简单的做一个小的轮播图,在网上也看过别人写的,决定自己尝试下–>>>  
**样例展示:图片需要自己替换:**  
![在这里插入图片描述][20181129122724198.gif]  
**html部分:**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>轮播图</title>
    		<link rel="stylesheet" type="text/css" href="lunbo.css"/>
    		<script src="lunbo.js">
    			
    		</script>
    	</head>
    	<body>
    		<div id="lunbo">
    			<ul id="pic">
    				<li><img src="2.jpg"/></li>
    				<li><img src="3.jpg"/></li>
    				<li><img src="4.jpg"/></li>
    				<li><img src="5.jpg"/></li>
    				<li><img src="6.jpg"/></li>
    			</ul>
    			<ol id="list">
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol
    		</div>
    	</body>
    </html>

**css部分**

*{
    	margin: 0;
    	padding: 0;
    }
    div{
    	margin: 20% auto;
    	width: 500px;
    	height: 309px;
    	border: 1px solid black;
    	position:relative;
    	overflow:hidden;
    }
     ul {
     	list-style: none;
     	position:absolute;
     }
     ul li{
    	float: left;
    	
    }
    
    ol {
    	position: absolute ;
    	bottom: 5px;
    	left: 157px;
    }
    ol li{
    	background:#ddd;
    	border:1px solid #969591;
        height:20px;
    	width:20px;
    	border-radius:50%;
    	margin-left:10px;
    	color:#959490;
    	float:left;
    	text-align:center;
    	cursor:pointer;
    	list-style: none;
    }
    .on{
    	background:#8F9E9E;
    	color:#fff;
    	
    }

**js部分**

window.onload = function() {
         var wrap = document.getElementById('lunbo'),
             pic = document.getElementById('pic'),
             list = document.getElementById('list').getElementsByTagName('li'),
             index = 0,
             timer = null;
    
         // 若果有在等待的定时器，则清掉
         if (timer) {
             clearInterval(timer);
             timer = null;
         }
    
         // 自动切换
         timer = setInterval(autoPlay, 2000);
    
         // 定义并调用自动播放函数
         function autoPlay() {
             index++;
             if (index >= list.length) {
                 index = 0;
             }
             changeImg(index);
         }
    
         // 定义图片切换函数
         function changeImg(curIndex) {
             for (var j = 0; j < list.length; j++) {
                 list[j].className = "";
             }
             // 改变当前显示索引
             list[curIndex].className = "on";
             pic.style.marginTop = -318 * curIndex + "px";
             index = curIndex;
         }
    
         // 鼠标划过整个容器时停止自动播放
         wrap.onmouseover = function() {
             clearInterval(timer);
         }
    
         // 鼠标离开整个容器时继续播放至下一张
         wrap.onmouseout = function() {
             timer = setInterval(autoPlay, 2000);
         }
    
         // 遍历所有数字导航实现划过切换至对应的图片
         for (var i = 0; i < list.length; i++) {
             list[i].id = i;
             list[i].onmouseover = function() {
                 clearInterval(timer);
                 changeImg(this.id);
             }
         }
     }

[20181129122724198.gif]: /images/20220413/ef84af859ce7408a8fd902762fe5ff35.png

发表评论取消回复

表情：

评论列表（有 0 条评论，284人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS实现简单的轮播图

S实现简单的轮播图 js用面向过程的方法实现简单的轮播图先写好简单的html布局；正常轮播图所要实现的功能有一下几个： 1.banner图的自动切换；...

逃离我推掉我的手/ 2024年04月18日 08:27/ 0 赞/ 106 阅读

相关 JS实现简单的轮播图

1. 用display属性的block或none控制轮播图代码如下： <!DOCTYPE HTML> <head> <met

ゝ一纸荒年。/ 2023年07月06日 06:24/ 0 赞/ 143 阅读

相关 js轮播图，简单易懂

首先完成HTML和CSS部分， 1. 划分区域 2. 让图片排成一排，可以利用浮动，也可以利用定位，在这里我用的是定位 3. 开始js部分：由于自己还在学习中，对Jav

蔚落/ 2023年06月30日 08:53/ 0 赞/ 56 阅读

相关使用原生JS制作简单的轮播图特效

使用原生JavaScript制作一个简答的图片轮播效果，没有实现动画。原理很简单，只需要使用DOM对象操作节点的添加和删除即可实现轮播功能，看一下效果图： ![在这里插入图

小咪咪/ 2023年03月12日 10:59/ 0 赞/ 39 阅读

相关用原生js制作简单轮播图、tab切换

轮播效果三种轮播效果：图片自动轮播、鼠标点击左右轮播、任意点击轮播第一步：规定大框并引入图片，将图片包裹在一个很宽的div中，且设置初始的偏移量为0px；第

╰半橙微兮°/ 2022年11月27日 12:10/ 0 赞/ 288 阅读

相关 js编写简单轮播图

效果如下 ![Center][] 分4步去实现，我代码图片的名字是数字，有规律的的（1,2,3,4,5,6,7,8）第一步：先让图片按着顺序开始切换,到最后一张（

╰+攻爆jí腚メ/ 2022年06月09日 12:56/ 0 赞/ 254 阅读

相关简单的js制作轮播图

编辑html代码使用数据存入图片,操作数据的下标,设定setInterval方法,每隔几秒执行一次 <!DOCTYPE html> <html>

雨点打透心脏的1/2处/ 2022年05月12日 14:50/ 0 赞/ 260 阅读

相关 js实现简单的轮播图

html+css代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="

刺骨的言语ヽ痛彻心扉/ 2022年04月17日 03:54/ 0 赞/ 300 阅读

相关 js制作简单的轮播图

今天帅帅学到了js部分就想简单的做一个小的轮播图,在网上也看过别人写的,决定自己尝试下–>>> 样例展示:图片需要自己替换: ![在这里插入图片描述][20181129

缺乏、安全感/ 2022年04月13日 11:57/ 0 赞/ 285 阅读

相关 js实现轮播图（简单滚动轮播)

原理：在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时，b需要移动，移动一个a的宽度，使下一张图片显示，

冷不防/ 2021年11月10日 09:30/ 0 赞/ 722 阅读