1，每次只显示一张图片其他的图片隐藏起来
2，每一次轮播 相应位置的小圆点跟着变色
3，鼠标移入小圆点时显示相应的图片
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="js/jquery-3.6.0.min.js">script>
<style>
*{
margin:0;
padding:0;
}
li{
list-style: none; //这一步很重要
}
#container{
width:900px;
height:400px;
position:relative;
overflow:hidden;
border-radius:10px;
}
.item{
position:absolute;
}
#tabs{
position:absolute;
left:300px;
bottom:20px;
}
.tab{
float:left;
margin-right:10px;
width:6px;
height:6px;
border:3px solid #FFFFFF;
border-radius:50%;
background:#fff;
cursor:pointer;
}
.active{
background:#4774B6 ;
border-color:#4774B6 ;
}
.btn{
position:absolute;
top:50%;
margin-top:-35px;
width:40px;
height:70px;
color:#d6d3d5;
font-size:36px;
line-height:70px;
text-align:center;
cursor:pointer;
}
.btn:hover{
background:rgba(127,120,125,0.8);
}
.prev{
position:absolute;
left:235px;
border-radius:0 5px 5px 0;
}
.next{
position:absolute;
right:0;
border-radius:5px 0 0 5px;
}
style>
head>
<body>
<div id="container">
<a class="item" href="#"><img src="images/banner1.jpg"/>a>
<a class="item" href="#"><img src="images/banner2.jpg"/>a>
<a class="item" href="#"><img src="images/banner3.jpg"/>a>
<a class="item" href="#"><img src="images/banner4.jpg"/>a>
<a class="item" href="#"><img src="images/banner5.jpg"/>a>
<ul id="tabs">
<li class="tab active">li>
<li class="tab">li>
<li class="tab">li>
<li class="tab">li>
<li class="tab">li>
ul>
div>
body>
<script>
$(document).ready(function(){
var i = 0 ;
var timer;
//用jquery方法设置第一张图片显示，其余隐藏
$('.item').eq(0).show().siblings('.item').hide();
//调用showTime()函数（轮播函数）
showTime();
//当鼠标经过下面的数字时，触发两个事件（鼠标悬停和鼠标离开）
$('.tab').hover(function(){
//获取当前i的值，并显示，同时还要清除定时器
i = $(this).index();
Show();
clearInterval(timer);
},function(){
showTime();
});
//定时器
timer = setInterval(function(){
//调用一个Show()函数
Show();
i++;
//当图片是最后一张的后面时，设置图片为第一张
if(i==5){
i=0;
}
},1000); //这里设置每张图片的轮播时间间隔
}
//创建一个Show函数
function Show(){
//在这里可以用其他jquery的动画
$('.item').eq(i).fadeIn(300).siblings('.item').fadeOut(300);
//给.tab创建一个新的Class为其添加一个新的样式，并且要在css代码中设置该样式
$('.tab').eq(i).addClass('active').siblings('.tab').removeClass('active');
}
});
script>
html>
如果出现运行时没有轮播效果记得检查自己是否引用js文件到位
如果出现没有图片就检查图片的路径是否写对
页面轮播时想更换小圆点的颜色只需要更改相对应的css属性即可
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）