利用JS实现基本的图片轮播功能，包括鼠标的经过事件

╰半夏微凉° 2022-06-17 12:17 113阅读 0赞

## 注意： ##

本代码只是参考代码，全是在本地的数据，并没有和后台服务器进行交互，不过有些地方还是一样的。可以作为参考

## html部分： ##

<div id="lb">
    			<img src="img/1462962491.jpg"  id="img"/>
    			<ul>
    				<li class="over" οnmοuseοver="gameOver(0)" οnmοuseοut="myGo()">1</li>
    				<li οnmοuseοver="gameOver(1)" οnmοuseοut="myGo()">2</li>
    				<li οnmοuseοver="gameOver(2)" οnmοuseοut="myGo()">3</li>
    				<li οnmοuseοver="gameOver(3)" οnmοuseοut="myGo()">4</li>
    				<li οnmοuseοver="gameOver(4)" οnmοuseοut="myGo()">5</li>
    			</ul>
    		</div>

## css部分: ##

* {
    				margin: 0;
    				padding: 0;
    				box-sizing: border-box;
    			}
    			
    			#myDiv {
    				width: 700px;
    				height: 200px;
    				position: relative;
    			}
    			
    			ul {
    				list-style: none;
    				position: absolute;
    				right: 10px;
    				bottom: 0;
    			}
    			
    			#myDiv li {
    				width: 15px;
    				height: 15px;
    				border-radius: 50%;
    				background: indianred;
    				display: inline-block;
    				font-size: 12px;
    				line-height: 15px;
    				text-align: center;
    			}
    			
    			#myDiv .over {
    				background: greenyellow;
    			}

## js部分: ##

var arr = ["1462962491.jpg", "1463397325.jpg", "1464682081.jpg", "1465979482.jpg", "1466266404.jpg"];
    			var myDiv = document.getElementById("myDiv");
    			var myImg = document.getElementById("myImg");
    			var arrLi = myDiv.getElementsByTagName("li");
    			var n = 0;
    			var t = setInterval(fun, 1000);
    
    			function fun() {
    				for(var i = 0; i < arrLi.length; i++) {
    					arrLi[i].className = "";
    				}
    				myImg.src = "img/" + arr[n];
    				arrLi[n].className = "over";
    				n++;
    				if(n > arr.length - 1) {
    					n = 0;
    				}
    			}
    
    			function myGame(v){
    				clearInterval(t);//当鼠标经过(放在)li上的时候停止轮播
    				myImg.src="img/"+arr[v];//鼠标经过(放在)那个li上就显示那张图片
    				//所有li都是红色
    				for(var i=0;i<arrLi.length;i++){
    					arrLi[i].className="";
    				}
    				arrLi[v].className="over";//鼠标经过(放在)那个li时那个li变成黄色
    				//下面代码是为了当鼠标离开时能够在下一张图片继续滑动而不是在第一张开始
    				if(n==4){
    					n=0;
    				}else{
    					n=v+1;
    				}
    			}
    			function myGo(){
    				t=setInterval(fun,1000);
    			}

发表评论取消回复

表情：

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

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

相关阅读

相关 js实现简单的图片轮播

简单的图片轮播案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="

￡神魔★判官ぃ/ 2023年01月07日 08:58/ 0 赞/ 146 阅读

相关 html实现自动图片轮播,图片轮播的实现（html__js）

1.简单实现 1)实现思想：通过轮播次数来决定显示那一张首先，可以用简单的div 包含img的框架来实现，我们为他添加按钮，每个按钮对应不同的图片，那么，每点击一次，将要显示

待我称王封你为后i/ 2022年10月06日 00:48/ 0 赞/ 208 阅读

相关利用JS实现基本的图片轮播功能，包括鼠标的经过事件

注意：本代码只是参考代码，全是在本地的数据，并没有和后台服务器进行交互，不过有些地方还是一样的。可以作为参考 html部分： <div id="lb"

╰半夏微凉°/ 2022年06月17日 12:17/ 0 赞/ 114 阅读

相关利用vueJs实现图片轮播

最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播，便做个简单的记录以下只贴出carousel.vue代码，其他的省略 <template>

小咪咪/ 2022年06月15日 12:09/ 0 赞/ 183 阅读

相关 html js简单实现图片轮播功能

本章记录简单的图片轮播功能，需要html、js和css共同实现 1、html文件 <!DOCTYPE html> <html>

ゝ一纸荒年。/ 2022年06月11日 03:19/ 0 赞/ 192 阅读

相关实现鼠标经过,产品图片的局部放大功能

vue中实例：操作dom实现参考：https://blog.csdn.net/alightman/article/details/78074687 注意点： 1、小图、

た入场券/ 2022年05月23日 01:43/ 0 赞/ 256 阅读

相关原生js(JavaScript)实现图片轮播功能

先将目录结构图送上，然后再讲几个注意的地方。 ![70][] 其中最为关键的方法就是使用setInterval(fun,time)这个方法。其中该方法有两个参数，第一个参数

╰+攻爆jí腚メ/ 2022年05月20日 09:29/ 0 赞/ 196 阅读

相关 JS实现简单的图片轮播

看了很多大佬的博客，大佬们的博客写的都非常有水平，小菜鸡今天就用自己的理解方式，按照自己的思路整理一下学习笔记啦！！！轮播、轮播自然就是轮流着播放啦！图片轮播简单来

- 日理万妓/ 2022年05月17日 08:12/ 0 赞/ 174 阅读

相关利用js实现图片的轮播效果

每个三秒钟做一件事: window.setInterval()：按照指定周期（以毫秒计）来调用函数或计算表达式 setInterval("alert('123')",20...

红太狼/ 2020年06月06日 17:01/ 0 赞/ 738 阅读

相关利用js实现图片的轮播效果

利用js实现图片的轮播效果

朱雀/ 2020年05月10日 16:46/ 0 赞/ 983 阅读