CSS/HTML/ JAVASCRIPT-Html轮播图

最新推荐文章于 2025-04-20 16:47:23 发布

Coisini、

最新推荐文章于 2025-04-20 16:47:23 发布

阅读量592

点赞数 2

分类专栏： CSS/HTML Javascript 文章标签： CSS/HTMLJAVASCRIPT 前端 Html轮播

本文链接：https://blog.csdn.net/kclax/article/details/90750088

版权

CSS/HTML 同时被 2 个专栏收录

9 篇文章

订阅专栏

Javascript

4 篇文章

订阅专栏

该博客分享了如何使用HTML5、CSS3和JavaScript实现一个轮播图的详细步骤，包括源码的下载地址和各个部分的代码展示，适合前端开发者学习和参考。

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

源码下载地址：

链接：https://pan.baidu.com/s/1VbTArDAI6TWJsDh8vWI76Q
提取码：kg2u

Html代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>D轮播图</title>
	<link rel="stylesheet" type="text/css" href="style/style.css"/>
</head>
<body>
	<div class="main" id="main">
		<!--子菜单-->
		<div class="sub-menu hide" id="sub-menu">
			<!--手机配件-->
			<div class="inner-box">
				<div class="sub-inner-box">
					<div class="title">手机、配件</div>
					<div class="sub-row">
						<span class="bold mr10">手机通讯:</span>
						<a href="">手机</a>
						<span class="mr10 ml10">/</span>
						<a href="">手机维修</a>
						<span class="mr10 ml10">/</span>
						<a href="">以旧换新</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10">手机配件:</span>
						<a href="">手机壳</a>
						<span class="mr10 ml10">/</span>
						<a href="">手机存储卡</a>
						<span class="mr10 ml10">/</span>
						<a href="">数据线</a>
					</div>
				</div>
			</div>
			<!--电脑-->
			<div class="inner-box">
				<div class="sub-inner-box">
					<div class="title">电脑</div>
					<div class="sub-row">
						<span class="bold mr10">手外部产品:</span>
						<a href="">鼠标</a>
						<span class="mr10 ml10">/</span>
						<a href="">键盘</a>
						<span class="mr10 ml10">/</span>
						<a href="">U盘</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10">游戏设备:</span>
						<a href="">游戏机</a>
						<span class="mr10 ml10">/</span>
						<a href="">耳机</a>
						<span class="mr10 ml10">/</span>
						<a href="">游戏软件</a>
					</div>
				</div>
			</div>
			<!--家用电器-->
			<div class="inner-box">
				<div class="sub-inner-box">
					<div class="title">家用电器</div>
					<div class="sub-row">
						<span class="bold mr10">电视：</span>
						<a href="">国产品牌</a>
						<span class="mr10 ml10">/</span>
						<a href="">韩国品牌</a>
						<span class="mr10 ml10">/</span>
						<a href="">欧美品牌</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10">空调：</span>
						<a href="">显示器</a>
						<span class="mr10 ml10">/</span>
						<a href="">柜式</a>
						<span class="mr10 ml10">/</span>
						<a href="">中央 </a>
					</div>
				</div>
			</div>
			<!--家具-->
			<div class="inner-box">
				<div class="sub-inner-box">
					<div class="title">家具</div>
					<div class="sub-row">
						<span class="bold mr10">家纺： </span>
						<a href="">被子</a>
						<span class="mr10 ml10">/</span>
						<a href="">枕头</a>
						<span class="mr10 ml10">/</span>
						<a href="">四件套</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10">灯具： </span>
						<a href="">台灯</a>
						<span class="mr10 ml10">/</span>
						<a href="">顶灯</a>
						<span class="mr10 ml10">/</span>
						<a href="">节能灯</a>
					</div>
				</div>
			</div>
		</div>
		<!--主菜单-->
		<div class="menu-box"></div>
		<div class="menu-content" id="menu-content">
			<!--手机、配件-->
			<div class="menu-item" id="cartoon">
				<a href="">
					<span id="">手机、配件</span>
					<i>&#xe665;</i>
				</a>
			</div>
			<!--电脑-->
			<div class="menu-item">
				<a href="">
					<span id="">电脑</span>
					<i>&#xe665;</i>
				</a>
			</div>
			<!--家用电器-->
			<div class="menu-item">
				<a href="">
					<span id="">家用电器</span>
					<i>&#xe665;</i>
				</a>
			</div>
			<!--家具-->
			<div class="menu-item">
				<a href="">
					<span id="">家具</span>
					<i>&#xe665;</i>
				</a>
			</div>
		</div>
		<!--轮播图-->
		<div class="banner" id="banner">
			<a href="">
				<div class="banner-sidle sidle1 active"></div>
			</a>
			<a href="">
				<div class="banner-sidle sidle2 "></div>
			</a>
			<a href="">
				<div class="banner-sidle sidle3"></div>
			</a>
		</div>
		<!--左右剪头-->
		<a href="javascript:void(0)" class="botton ago" id="prev"></a>
		<a href="javascript:viod(0)" class="botton next"id="next"></a>
		
		<!--右下角小圆点-->
		<div class="dots" id="dots">
			<span class="active"></span>
			<span ></span>
			<span ></span>
		</div>
	</div>
	<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

css代码

//封装getElementById  注意getElementById为字符串
function byId(id){
	return typeof(id)=="string"?document.getElementById(id):id;
}
var index=0,
    timer=null,
    pics=byId("banner").getElementsByTagName("div"),
    dots=byId("dots").getElementsByTagName("span"),
    prev=byId("prev"),
    next=byId("next"),
    len =pics.length,
    menu=byId("menu-content"),
    subMenu=byId("sub-menu"),
    innerBox=subMenu.getElementsByClassName("inner-box");
    menuItem=menu.getElementsByClassName("menu-item");

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;
			}
			//切换图片
			changeImg(index);
		},3000);
	}
	main.onmouseout(); //自动轮播(方法)
	
	//遍历所有圆点，并绑定点击事件，点击圆点切换图片
	for (var d=0;d<len;d++){
		//给所有的span添加一个id的属性，值为d，作为当前span的索引
		dots[d].id=d;
		dots[d].onclick=function(){ 
			//改变index为当前span的索引（注意function会改变作用域）
			index=this.id;
			this.className="active";
			//调用changeImg，实现切换图片
			changeImg();
		}
	}
	//下一张
	next.onclick=function(){
		index++;
		if(index>=len)index=0;
		changeImg(index);
	}
	//上一张
	prev.onclick=function(){
		index--;
		if(index<0) index=len-1;
		changeImg(index);
	}
	//导航菜单
	//遍历主菜单，且绑定事件
	for(var m=0;m<menuItem.length;m++){
		//给每一个menu-item定义一个data-index属性作为索引（在dots中已经使用了id）
		menuItem[m].setAttribute("data-index",m);
		menuItem[m].onmouseover=function(){
			subMenu.className="sub-menu";
			var idx = this.getAttribute("data-index");
			//遍历所有的子菜单，将每个都隐藏
			for(var j=0;j<innerBox.length;j++){
			innerBox[j].style.display='none';
			menuItem[j].style.background='none';
			}
			menuItem[idx].style.background = "rgba(0,0,0,0.1)";
			innerBox[idx].style.display = 'block';
		}
	}
	//鼠标离开
	menu.onmouseout=function(){
		subMenu.className="sub-menu hide";
	}
	
	subMenu.onmouseover=function(){
		this.className="sub-menu";
	}
	subMenu.onmouseout=function(){
		this.className="sub-menu hide";
	}
}
//切换图片
function changeImg(){
	//遍历banner下所有的div和dots，将其隐藏
	for(var i=0;i<len;i++){
		pics[i].style.display="none";
		dots[i].className="";
	}
	//根据index找到其中的div和当前的span
	pics[index].style.display="block";
	dots[index].className="active";
}
slideImg();

JavaScript代码

*{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
}
@font-face {
	font-family: 'iconfont';
	src: url('../img/font/iconfont.eot'); 
    src: url('../img/font/iconfont.eot') format('embedded-opentype'),
    url('../img/font/iconfont.woff') format('woff'),
    url('../img/font/iconfont.ttf') format('truetype'),
    url('../img/font/iconfont.svg#iconfont') format('svg');
}
.main{
	position: relative;
	width:1200px;
	height:460px;
	overflow:hidden;/*隐藏超出部分*/
	margin: 0 auto;
	padding-top: 10px;
}

.banner-sidle{
	width:1200px;
	height:460px;
	position: absolute;
	display:none;  /*隐藏*/
}

.sidle1{
	background:url(../img/bg1.jpg) center center no-repeat;
}
.sidle2{
	background:url(../img/bg2.jpg) center  center no-repeat;
}
.sidle3{
	background:url(../img/bg3.jpg) center center no-repeat;
}
.active{
	display:block; /*显示*/
}

/*箭头*/
.botton{
	height: 80px;
    width: 40px;
	position: absolute;
    top: 50%;
    margin-top:-40px;
    background:url(../img/arrow.png) center center no-repeat;
}
.ago{
	left: 244px;
	transform:rotate(180deg); /*旋转*/
}
.next{
	right: 0px;
}

/*鼠标划过*/
.botton:hover{ 	
	background-color:#333;
	opacity: 0.8; /*透明度*/
	filter:alpha(opacity=80); /* 浏览器兼容*/
}

/*左下角小圆点*/
.dots{
	position: absolute;
	bottom: 24px;
	right: 0;
	text-align: right;
	padding-right: 24px;
	line-height: 12px;
}
.dots span{
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-left: 8px;
	background-color: rgba(7, 17, 27, 0.4);
	cursor: pointer;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}

/*不能写成.active
 * 由于在.bots span已经设置好了背景颜色
 * 按照继承关系，所以我们必须要设置成.bots span.active*/
.dots span.active{
	box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
	background-color: #ffffff;
}
/*导航菜单*/
.menu-box{
	width:244px;
	height: 460px;
	position: absolute;
	left:0 ;
	top:0;
	background: rgba(7,17,27,0.5);
	opacity: 0.5;
	margin-top:10px ;
	z-index: 1;
}
.menu-content{
	width:244px;
	height: 460px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	padding-top: 6px;
}
.menu-item{
	position: relative;
	height: 64px;
	line-height: 66px;
	font-size: 16px;
	padding: 0  24px;
}
/*a标签未被访问前的颜色和访问后的颜色*/
.menu-item a:link, .menu-item a:visited{
	color:#fff;
}

.menu-item a{
	display: block;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	padding: 0 8px;
	height: 63px;
}
.menu-item i{
	position: absolute;
	right: 32px;
	font-size:24px;
	top:2;
	font-family: "iconfont";
	font-style: normal;
	font-weight: normal;
	color: rgba(255,255,255,0.5);
}
.sub-menu{
	width: 730px;
	height: 458px;
	border: 1px solid #d9dde1;
	background: #fff;
	position: absolute;
	left: 244px;
	top:10;
	z-index: 999;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
}
.inner-box{
	width: 100%;
	height: 100%;
	background: url(../img/fe.png);
	display: none;
}
.sub-inner-box{
	width: 652px;
	margin-left:40px ;
	overflow: hidden;	/*隐藏超出部分*/
}
.title{
	color:red;
	font-size: 16px;
	line-height: 16px;
	margin: 28px 0 30px 0;
	font-weight: bold;	
}
.sub-row{
	margin-bottom: 25px;
}
.bold{
	font-weight: bold;
}
.mr10{
	margin-right: 10px;
}
.ml10{
	margin-left: 10px;
}
.hide{
	display: none;
}