效果圖
功能：1、幻燈片自動切換；2、點擊下方小圓點切換對應幻燈片；3、點擊左右兩側耳朵控制幻燈片切換至上一張或下一張；4、鼠標懸停幻燈片上時，幻燈片停止切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<link rel="stylesheet" href="../css/reset.css">
<script src="./jquery-3.4.1.min.js"></script>
<style type="text/css">
#box{
width: 100%; height: 350px;
margin-top: 100px;
}
.bg0{background: #0D2736;}
.bg1{background: #0F0909;}
.bg2{background: #283F75;}
.bg3{background: #405CDA;}
#slide{
width: 800px; height: 350px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#zxw{
width: 4000px; height: 35px;
position: absolute; top: 0; left: 0px;
}
#zxw li{
float: left;
}
#zxw li a{
display: block; width: 800px; height: 350px;
position: relative;
}
#zxw li a img{
width: 100%; height: 100%;
}
/* --------- */
#zxw li a span{
font-size: 150px; text-align: center;
position: absolute; color: #fff;top: 100px; left: 350px;
}
/* ----------- */
#nav{
width: 160px; height: 20px;
position: absolute; bottom: 10px; left: 50%;
margin-left: -80px;
}
#nav li{
width: 20px; height: 20px;
border-radius: 50%;
background: #ccc;
float: left;
margin: 0 10px;
cursor: pointer;
}
#nav .active{
background: blue;
}
#prev, #next{
width: 25px; height: 50px;
background: #fff;
position: absolute; top: 150px;
cursor: pointer;
}
#prev{
left: 10px;
}
#next{
right: 10px;
}
#prev img, #next img{
width: 100%; height: 100%;
}
</style>
<script>
$(function(){
// 全局變量
var c = 0;
var zxw = $("#zxw li");
var nav = $("#nav li");
// 定義幻燈片自動切換效果
function ziDongQieHuan(){
c++; //c = 1 2
if(c == zxw.length){
c = 1;
$("#zxw").css({left:0});
}
$("#zxw").animate({left:c*-800+"px"}, 500);
// 定義小圓點和背景顏色自動切換效果
if(c == nav.length){
$("#nav li").eq(0).addClass("active").siblings("li").removeClass("active");
$("#box").attr("class", "bg0")
}else{
$("#nav li").eq(c).addClass("active").siblings("li").removeClass("active");
$("#box").attr("class", "bg"+c);
};
};
// 定義點擊小圓點切換效果
function dianJiQieHuan(obj){
// 獲取當前點擊對象的下標值
c = obj.index();
$("#nav li").eq(c).addClass("active").siblings("li").removeClass("active");
$("#zxw").animate({left:c*-800+"px"}, 500);
$("#box").attr("class", "bg"+c);
};
// 定義點擊左耳朵切換效果
function prev(){
c--;
if(c<0){
c = nav.length-1;
};
$("#nav li").eq(c).addClass("active").siblings("li").removeClass("active");
$("#zxw").animate({left:c*-800+"px"}, 500);
$("#box").attr("class", "bg"+c);
};
// 定義點擊右耳朵切換效果
function next(){
c++;
if(c > nav.length-1){
c = 0;
};
$("#nav li").eq(c).addClass("active").siblings("li").removeClass("active");
$("#zxw").animate({left:c*-800+"px"}, 500);
$("#box").attr("class", "bg"+c);
};
// 定時器，每2秒執行一次
var time = setInterval(ziDongQieHuan, 2000);
// 鼠標移入#box元素中，停止定時器
$("#slide").mouseenter(function(){
clearInterval(time);
});
// 鼠標移出#box元素後，開始定時器
$("#slide").mouseleave(function(){
//鼠標移出時，開始定時器，並將定時器賦值給time變量，而當鼠標再次移入時，則剛好刪除上次的定時器，不會累加
time = setInterval(ziDongQieHuan, 2000);
});
// 定義小圓點點擊事件
$("#nav li").click(function(){
// $(this):當前點擊的對象
dianJiQieHuan($(this));
});
// 定義左耳朵點擊事件
$("#prev").click(function(){
prev();
});
// 定義右耳朵點擊事件
$("#next").click(function(){
next();
});
});
</script>
</head>
<body>
<!-- 最外層盒子開始 -->
<div id="box" class="bg0">
<!-- 幻燈片盒子開始 -->
<div id="slide">
<!-- 幻燈片開始 -->
<ul id="zxw">
<li><a href="#">
<img src="https://www.51zxw.net/NewAn/UploadFiles/20200609/202006090520504133.jpg">
<span>0</span>
</a></li>
<li><a href="#">
<img src="https://www.51zxw.net/NewAn/UploadFiles/20200608/202006080410588630.jpg">
<span>1</span>
</a></li>
<li><a href="#">
<img src="https://www.51zxw.net/NewAn/UploadFiles/20200608/202006080408097382.jpg">
<span>2</span>
</a></li>
<li><a href="#">
<img src="https://www.51zxw.net/NewAn/UploadFiles/20200624/202006240832286533.jpg">
<span>3</span>
</a></li>
<li><a href="#">
<img src="https://www.51zxw.net/NewAn/UploadFiles/20200609/202006090520504133.jpg">
<span>4</span>
</a></li>
</ul>
<!-- 幻燈片結束 -->
<!-- 小圓點開始 -->
<ul id="nav">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 小圓點結束 -->
<!-- 左右兩側耳朵開始 -->
<div id="prev"><img src="./prev.png"></div>
<div id="next"><img src="./next.png"></div>
<!-- 左右兩側耳朵結束 -->
</div>
<!-- 幻燈片盒子結束 -->
</div>
<!-- 最外層盒子結束 -->
</body>
</html>
reset.css
*{margin: 0; padding: 0; box-sizing: border-box;}
body{font-size:16px; font-family:"微軟雅黑"; color: #333;}
b{font-weight: normal;}
i{font-style: normal;}
a, a:hover, a:active{text-decoration: none; color: #333;}
input,textarea,select{outline: none;}
img{border: none; vertical-align: middle;}
li{list-style-type: none;}
.fl{float: left;}
.fr{float: right;}
.cl{clear: both;}
.clearfix::after{
content: "";
display: table;
clear: both;
}