JS基础——实现图片轮播效果础_js图片轮播基础-优快云博客

本文链接：https://blog.youkuaiyun.com/ansheng02/article/details/78161396

本文分享了一个使用JavaScript实现的图片轮播效果案例，详细介绍了如何通过JS控制图片的自动轮播及鼠标悬停交互，并提供了完整的HTML和CSS代码。

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

目前还没有开始PHP的学习，最近在慕课网上的JS课程快听完了，国庆假期回去之后开始PHP学习进阶之路。在JS基础课程的最后要求实现一个图片轮播的效果，要求是打开后，隔1秒自动播放，鼠标滑过导航菜单，标题字会出现背景色，就像下图这样

我写的代码中，没有实现“点击标题切换到相应的图片”，这个应该是在JS中修改，哎~先把我的代码附上~

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实现图片轮播效果</title>
	<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
	<div id="main" class="main">
		<!--导航菜单-->
		<div class="menu" id="menu">
			<ul id="menu-ul">
				<li><a href="">首页</a></li>
				<li><a href="">点击查看</a></li>
				<li><a href="">会自动的</a></li>
				<li><a href="">我的网站</a></li>
			</ul>
		</div>
		<!--图片轮播-->
		<div class="banner"  id="banner">
			<a href="">
				<div class="banner-side slide1 slide-active"></div>
			</a>
			<a href="">
				<div class="banner-side slide2 "></div>
			</a>
			<a href="">
				<div class="banner-side slide3 "></div>
			</a>
			<a href="">
				<div class="banner-side slide4 "></div>
			</a>
		</div>
	</div>
	<script src="JavaScript/JAVASCRIPT.js"></script>
</body>
</html>

*{
	margin:0;
	padding: 0;
}


a{
	text-decoration: none;
}


ul{
	list-style:none;
}


body{
	font-family: "微软雅黑";
	color: #666;
}


.main{
	width: 1200px;
	height: 460px;
	margin:30px auto;
	position: relative;
	overflow:hidden;
}


.banner{
	width: 1200px;
	height: 460px;
	overflow:hidden;
	position: relative;
}


.banner-side{
	width: 1200px;
	height: 460px;
	background-repeat: no-repeat;
	float: left;
	display: none;
}


.slide-active{
	display: block;
}


.slide1{
	background-image:url(../img/1.jpg);
}


.slide2{
	background-image:url(../img/3.jpg);
}


.slide3{
	background-image:url(../img/4.jpg);
}


.slide4{
	background-image:url(../img/5.jpg);
}


/*导航菜单*/
.menu{
	width: 100%;
    height:40px;
}
.menu ul{
	width: 100%;
    height: 40px;
}
.menu ul li{
	float: left;
    width: 300px;
}
.menu-active{
	background-color:#ffcc00;
    font-weight:bold;
    border: transparent;
    border-radius: 10px;
}
.menu ul li a{
	display: inline-block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    line-height: 40px;
}

//封装一个代替getElementByID()的方法
function byId(id){
	return typeof(id) === "string"?document.getElementById(id):id;
}
//console.log(byId("main"));


//全局变量
var index = 0,
    timer = null,
    pics = byId("banner").getElementsByTagName("div"),
    menuUlli = byId("menu-ul").getElementsByTagName("a"),
    len = pics.length;


    
function slideImg(){
	var main = byId("main");
	//滑过清除定时器，离开继续
	main.onmouseover = function (){
		//滑过清除定时器
        if(timer)   clearInterval(timer);
	} 
	main.onmouseout = function (){
		timer = setInterval(function(){
			index++;
			if(index >= len){
                index = 0;
			}
			//console.log(index);
			//切换图片
			changeImg();
		},1000);
	}
//自动在main上触发鼠标离开的事件
main.onmouseout();


//点击文字，切换图片（遍历所有点击，且绑定点击事件，点击文字切换图片）
for(var m=0;m<len;m++){
	//alert(m);
    //给所有li添加一个id的属性，值为当前li的索引
    menuUlli[m].id = m;
    //console.log(m);
	menuUlli[m].onclick = function(){
	  //alert("hello");
	//改变index为当前li的id值
	index = this.id;
	console.log(this.id);
	this.className = "menu-active";
	//调用changeImg()，实现切换图片
	changeImg();
	}
  }
}




//切换图片
function changeImg(){
	//console.log(index);
	//遍历banner下所有的div，将其隐藏，遍历ul下的里将其清除
	for (var i=0;i<len;i++){
		pics[i].style.display = "none";
		menuUlli[i].className = "";
	}
	//根据index索引找到当前div，将其显示出来
    pics[index].style.display = 'block';
    menuUlli[index].className = "menu-active";
}


slideImg();