js实现轮播图

最新推荐文章于 2022-08-29 17:05:32 发布

玛丽大

最新推荐文章于 2022-08-29 17:05:32 发布

阅读量105

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_36937220/article/details/102554528

版权

HTML代码：

<!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 class="main">
		<!--轮播图-->
		<div id="banner">
			<a href="">
				<div class="banner-item active"></div>
			</a>
			<a href="">
				<div class="banner-item"></div>
			</a>
			<a href="">
				<div class="banner-item"></div>
			</a>
		</div>
		<!--左箭头-->
		<div id="prev" class="arrow prev"><span></span></div>
		<!--右箭头-->
		<div id="next" class="arrow next"><span></span></div>
		<!--圆点-->
		<ul id="dots" class="dots">
			<!-- <li></li> -->
		</ul>
	</div>
	<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

css代码：

*{
	padding:0;
	margin:0;
	list-style:none;
}
body{
	font-family: "微软雅黑";
	color:#14191e;
}
@font-face{
	font-family: "myfont";
	src:url('../img/font/iconfont.eot');
	src:url('../img/font/iconfont.eot#iefix') format('embedded-opentype'),
		url('../img/font/iconfont.woff') format('woff'),
		url('../img/font/iconfont.ttf') format('truetype'),
		url('../img/font/iconfont.svg#myfont') format('svg');
}
.main{
	width:1200px;
	height:460px;
	margin:10px auto;
	position: relative;
}
/*轮播图*/
#banner{
	width:1200px;
	height:460px;
	overflow:hidden;
}
#banner .banner-item{
	width:1200px;
	height:460px;
	display: none;
	position:absolute;
	left: 0;
	top:0;
	z-index:1;
}
#banner>a:nth-child(1) .banner-item{
	background:url('../img/bg1.jpg');
}
#banner>a:nth-child(2) .banner-item{
	background:url('../img/bg2.jpg');
}
#banner>a:nth-child(3) .banner-item{
	background:url('../img/bg3.jpg');
}
#banner .active{
	display:block;
}
/*箭头*/
.arrow{
	width:30px;
	height:80px;
	background:url('../img/arrow.png') no-repeat center center;
	z-index:10;
	position:absolute;
	right: 0;
	top:50%;
	margin-top:-40px;
	cursor: pointer;
}
.arrow:hover{
	background-color:rgba(0,0,0,.5);
}
.prev{
	left:0;
	transform:rotate(180deg);
}
.dots{
	position:absolute;
	bottom:10px;
	z-index:100;
	left:50%;
}
.dots li{
	width:15px;
	height:15px;
	background:#fff;
	border-radius:50%;
	box-shadow:0 0 0 2px rgba(0,0,0,.1) inset;
	cursor:pointer;
	float:left;
	margin:0 5px 0 0;
}
.dots li:last-child{
	margin-right:0;
}
/*移动到点上的背景变化和第一个li样式变化*/
.dots li.liActive,.dots li:hover{
	background:rgba(0,0,0,.1);
}

js代码：

var EventUtil ={
	addHandler:function(element,type,handler){  //element是元素,type是事件处理类型,handler是事件句柄（处理函数）
		if(element.addEventListener){
			//DOM2级事件，除IE8以下浏览器外的事件
			element.addEventListener(type,handler,false);
		}else if(element.attachEvent){
			//IE8以下浏览器的事件
			element.attachEvent("on"+type,handler);
		}else{
			//DOM0级事件
			element["on"+type] = handler;
		}
	}
}

var index = 0,  //index是索引
	banner = byId("banner"),
	prev = byId("prev"),
	next = byId("next"),
	dots = byId("dots"),
	pics = banner.getElementsByTagName("div"),
	lis = dots.getElementsByTagName("li"),
	size = pics.length,
	timer = null;
//图片定时自动切换
startAutoPlay();
//图片定时自动切换方法
function startAutoPlay(){
	timer = setInterval(function(){
		nextFunc();
	},1000)
}
//图片停止自动切换方法
function stopAutoPlay(){
	if(timer){
		clearInterval(timer);
	}
}
//按图片的张数添加圆点
for(var i=0;i<size;i++){
	var li = document.createElement("li");
	dots.append(li);
}
//让圆点居中
dots.style.marginLeft = -(15*size+(size-1)*5)/2+"px";
//给第一个li添加样式liActive
lis[0].className = "liActive";
//封装getElementById
function byId(id){
	return typeof(id)==="string"?document.getElementById(id):id;
}
//通过索引加减改变图片样式
function changeImg(index){
	//遍历所有的图片，将图片隐藏，将圆点的类清除
	for(var i=0;i<size;i++){
		pics[i].style.display = "none";
		lis[i].className = "";
	}
	//显示当前图片
	pics[index].style.display = "block";
	//当前圆点高亮显示
	lis[index].className = "liActive";
}
//点击按钮向右切换图片
function nextFunc(){
	index++;
	//当index>=图片的长度时，让index=0回到第一张图片的索引
	if(index>=size){
		index = 0;
	}
	changeImg(index);
}
//点击按钮向左切换图片
function prevFunc(){
	index--;
	//当index<0时，让index=size-1回到最后一张图片的索引
	if(index<0){
		index = size-1;
	}
	changeImg(index);
}
//添加向右切换图片事件
EventUtil.addHandler(next,"click",nextFunc);
//添加向左切换图片事件
EventUtil.addHandler(prev,"click",prevFunc);
//鼠标移入时图片停止切换
EventUtil.addHandler(banner,"mouseover",stopAutoPlay);
//鼠标移出时图片自动切换
EventUtil.addHandler(banner,"mouseout",startAutoPlay);
//点击圆点切换图片
for(var i=0;i<size;i++){
	lis[i].setAttribute("data-id",i);
	//添加点击圆点切换图片事件
	EventUtil.addHandler(lis[i],"click",function(){
		index = this.getAttribute("data-id");
		changeImg(index);
	});
}

具体代码项目链接如下：

https://download.csdn.net/download/qq_36937220/11863726

玛丽大

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现轮播图

HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" type="text/css" href="css/style.css">&...
复制链接

扫一扫