轮播图 html + css + js

轮播图
1、index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    	<div>
    		<ul>
    			<li><img src="images/a.jpg_q90_.webp.jpg" alt=""></li>
    			<li><img src="images/b.jpg" alt=""></li>
    			<li><img src="images/c.jpg" alt=""></li>
    			<li><img src="images/d.jpg" alt=""></li>
    			<li><img src="images/e.webp.jpg" alt=""></li>
    		</ul>
    		<ol>
    		<li class="current"></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		</ol>
    		<span class="left"> < </span>
    		<span class="right"> > </span>
    	</div>
    	<script src="js/jquery-3.3.1.js"></script>
    	<script src="js/my.js"></script>
    </body>
</html>

2、style.css

*{
	margin:0px;
	padding:0px;
	list-style:none;
}
div{
	width:520px;
	height:280px;
	/* background:red; */
	margin-left:auto;
	margin-right:auto;
	margin-top:100px;
	position:relative;
	overflow:hidden;

}
ul{
	width:99999px;
	/* transform:transalteX(-520px); */
}
ul li{
	float:left;
}
ol{
	position:absolute;
	bottom:10px;
	left:50%;
	transform:translateX(-50%);
	background:rgba(255,255,255,0.4);
	padding-top:2px;
	padding-bottom:2px;
	border-radius:30px;
}
ol li{
	width:8px;
	height:8px;
	float:left;
	background:#fff;
	margin-left:4px;
	margin-right:4px;
	border-radius:50%;
	cursor:pointer;

}
.current{
	background:#f60;
}
span{
	position:absolute;
	width:25px;
	height:25px;
	background:rgba(0,0,0,0.4);
	top:50%;
	transform:translateY(-50%);
	line-height: 20px;
	cursor:pointer;
	text-align:center;
	font-size:23px;
/* 	font-weight:bold; */
	color:#fefecc;
}
.left{
	left:0px;
	border-top-right-radius:12px;
	border-bottom-right-radius:12px;

}
.right{
	right:0px;
	border-top-left-radius:12px;
	border-bottom-left-radius:12px;
}

3、my.js

var n=0;
var timer;
function go(){
	timer=setInterval(function(){
	n=n+1
	if(n>4){
		n=0;
	}
	$('ul').css('transform',`translateX(${-520*n}px)`);
	$('ol li').eq(n).addClass('current');
	$('ol li').eq(n).siblings().removeClass('current');
},1000);
}
go();

$('div').hover(function(){
	clearInterval(timer);
},function(){
	go();
});

$('ol li').click(function(event){
	n=$(this).index();
	$('ul').css('transform',`translateX(${-520*n}px)`);
	$('ol li').eq(n).addClass('current');
	$('ol li').eq(n).siblings().removeClass('current');
});

$('.right').click(function(event){
	n=n+1;
	if(n>4){
		n=0;
	}
	$('ul').css('transform',`translateX(${-520*n}px)`);
	$('ol li').eq(n).addClass('current');
	$('ol li').eq(n).siblings().removeClass('current');
});

$('.left').click(function(event){
	n=n-1;
	if(n<0){
		n=4;
	}
	$('ul').css('transform',`translateX(${-520*n}px)`);
	$('ol li').eq(n).addClass('current');
	$('ol li').eq(n).siblings().removeClass('current');
});

4、效果图

在这里插入图片描述

轮播图 html + css + js

猜你喜欢