<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>Document</title>
????<script?src="jquery-3.5.1.min.js"></script>
????<style>
????????*{margin:?0;padding:?0;}
????????ul,li{list-style:?none;}
????????.lbt{width:?600px;height:?400px;overflow:?hidden;margin:100px?auto;box-shadow:?0?0?10px?green;position:?relative;}
????????.lbt?.warp{width:?2400px;height:?400px;position:?absolute;top:?0;left:?0;}
????????.lbt?ul?li?img{width:?600px;height:?400px;}
????????.lbt?ul?li{float:?left;position:?relative;}
????????.lbt?ul?li?span{color:?red;font-size:?15px;position:?absolute;left:?20px;top:?20px;}
????????.btn{top:?42%;?cursor:?pointer;text-align:?center;display:?none;position:?absolute;font-size:?35px;color:?green;width:?50px;height:?50px;background:?#ccc;border-radius:?10px;}
????????.next{right:?0;}
????????.icon-list{position:?absolute;bottom:?10px;left:?45%;}
????????.icon-list?li{float:?left;margin:?0?5px;height:?10px;width:?10px;border-radius:?50%;background:?#ccc;cursor:?pointer;}
????????.icon-list?.active{background:?sienna;}
??</style>
??<script>
?????????$(function(){
?????????????var?index=0;
?????????????var?time=null;
?????????????//實現(xiàn)下一張輪播圖
?????????????$(".next").click(function(){
?????????????????next();
?????????????})
?????????????//實現(xiàn)上一張輪播圖
?????????????$(".prev").click(function(){
?????????????????prev();
?????????????})
?????????????function?next(){
?????????????????index++;
?????????????????if(index>2){
?????????????????????//如果為最后一張輪播圖則跳轉(zhuǎn)到第一張圖
?????????????????????$(".warp").animate({left:-index*600},1000)
?????????????????????index=0;
?????????????????????$(".warp").animate({left:0},0);
?????????????????}
?????????????????$(".warp").animate({left:-index*600},1000)
?????????????????//圓點的索引值
?????????????????suoying(index);
?????????????}?
?????????????function?prev(){
?????????????????index--;
?????????????????if(index<0){
?????????????????????//如果為索引值為-1則跳轉(zhuǎn)到最后一張圖
?????????????????????index=2;
????????????????????$(".warp").animate({left:-(index+1)*600},0)
?????????????????}
?????????????????$(".warp").animate({left:-index*600},1000)
?????????????????suoying(index);
?????????????}
?????????????//用時間函數(shù)實現(xiàn)自動輪播圖片
?????????????function?auto(){
?????????????????time=setInterval(function(){
?????????????????????next();
?????????????????????suoying(index);
?????????????????},3000)
?????????????}
?????????????auto();
?????????????//當(dāng)鼠標(biāo)移上去時停止自動輪播并顯示左右箭頭
?????????????$(".lbt").mouseover(function(){
?????????????????clearInterval(time);
?????????????????$(".btn").fadeIn("swing")
?????????????})
?????????????//當(dāng)鼠標(biāo)移下來時繼續(xù)自動輪播并隱藏左右箭頭
?????????????$(".lbt").mouseleave(function(){
?????????????????auto();
?????????????????$(".btn").fadeOut("swing")
?????????????})
?????????????//當(dāng)鼠標(biāo)移到圓點上跳轉(zhuǎn)到改圓點索引值對應(yīng)的輪播圖
?????????????$(".icon-list?li").mouseover(function(){
????????????????var?index=$(this).index();
????????????????$(".warp").animate({left:-index*600},1000);
????????????????suoying(index);
?????????????})
?????????????//為圓點添加樣式使效果更加明顯
?????????????function?suoying(index){
?????????????????$(".icon-list?li").eq(index).addClass("active").siblings().removeClass("active");
?????????????}
?????????})
??</script>
</head>
<body>
????<div?class="lbt">
????????<ul?class="warp">
????????????<li><img?src="https://img-blog.csdn.net/2018053016383964"><span>第一張圖</span></li>
????????????<li><img?src="https://img-blog.csdn.net/20180530163942895"><span>第二張圖</span></li>
????????????<li><img?src="https://img-blog.csdn.net/20180530164014725"><span>第三張圖</span></li>
????????????<li><img?src="https://img-blog.csdn.net/2018053016383964"><span>第一張圖</span></li>
????????</ul>
????????<div?class="btn?next">></div>
????????<div?class="btn?prev"><</div>
????????<ul?class="icon-list">
????????????<li?class="active"></li>
????????????<li></li>
????????????<li></li>
????????</ul>
????</div>
</body>
</html>
