<!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></title>
<style>
/* div img {
width: 300px;
height: 180px;
} */
#banner {
width: 1010px;
max-height: 455px;
border: 2px solid red;
position: relative;
}
img {
display: none;
}
.start {
display: block;
}
ul {
position: absolute;
right: 0;
bottom: 0;
}
li {
float: left;
margin-left: 40px;
color: white;
font-size: 30px;
/* 透明度 */
opacity: 0.5;
/* 让元素鼠标放置上为小手 */
cursor: pointer;
}
#banner .arrow {
position: absolute;
top: 35%;
color: yellow;
padding:0px 14px;
border-radius: 50%;
font-size: 50px;
z-index: 2;
display: none;
}
#banner .arrow_left {
left: 10px;
}
#banner .arrow_right {
right: 10px;
}
#banner:hover .arrow {
display: block;
}
#banner .arrow:hover {
background-color: rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div id="banner">
<img src="ad1.jpg" class="start">
<img src="ad2.jpg">
<img src="ad3.jpg">
<img src="ad4.jpg">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:;" class="arrow arrow_left"><</a>
<a href="javascript:;" class="arrow arrow_right">></a>
</div>
</body>
</html>
<script src="jQuery-3.5.1.min.js"></script>
<script>
$("li").first().css("opacity", 1);
$(".arrow_left").click(function(){
var i = $("img:visible").index();
// 得知轮播图有几个
var imgLen = $("img").length;
// 计算上一个图片的下标（当前显示的图片下标-1）
if(i >= 1){
var prev = i-1;
}else{
var prev = 0;
}
if(i == 3){
prev = 0;
}
// 让所有图片暂时隐藏
$("img").hide();
$("li").css("opacity", 0.5);
if(prev<=imgLen){
$("img").eq(prev).show();
// 让指示点显示
$("li").eq(prev).css("opacity", 1);
}else{;
$(".start").show();
// 让指示点显示
$("li").first().css("opacity", 1);
}
});
$(".arrow_right").click(function(){
var i = $("img:visible").index();
// 得知轮播图有几个
var imgLen = $("img").length;
// 计算下一个图片的下标（当前显示的图片下标+1）
var next = i+1;
// 让所有图片暂时隐藏
$("img").hide();
$("li").css("opacity", 0.5);
// 判断：+1后不能超过总长度，10个元素，最后一个下标为9
if(next<imgLen){
$("img").eq(next).show();
// 让指示点显示
$("li").eq(next).css("opacity", 1);
}else{;
$(".start").show();
// 让指示点显示
$("li").first().css("opacity", 1);
}
// });
$("li").hover(
function() {
// 获取当前鼠标放置的li的下标
var i = $(this).index();
// 让对应的图片进行显示
$("img").hide();
$("img").eq(i).show();
// 去掉点的透明样式
$("li").eq(i).css("opacity", 1);
// 清除定时器
clearInterval(scrollImg);
},
function() {
// 获取当前鼠标放置的li的下标
var i = $(this).index();
// 增添透明样式
$("li").eq(i).css("opacity", 0.5);
// 定时器继续
scrollImg = setInterval(scrollImgFun, 2000);
}
);
function scrollImgFun() {
// 找到当前显示的图片的下标
var i = $("img:visible").index();
// 得知轮播图有几个
var imgLen = $("img").length;
// 计算下一个图片的下标（当前显示的图片下标+1）
var next = i+1;
// 让所有图片暂时隐藏
$("img").hide();
// 增添透明样式
$("li").css("opacity", 0.5);
// 判断：+1后不能超过总长度，10个元素，最后一个下标为9
if(next<imgLen){
$("img").eq(next).show();
// 让指示点显示
$("li").eq(next).css("opacity", 1);
}else{;
$(".start").show();
// 让指示点显示
$("li").first().css("opacity", 1);
}
}
scrollImg = setInterval(scrollImgFun, 2000);
</script>