案例:
html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2190750_08paqwohkjrl.css">
<link rel="stylesheet" href="">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<ul class="imgbox">
<li><img src="images/01.png"></li>
<li><img src="images/02.jpg"></li>
<li><img src="images/03.jpg"></li>
<li><img src="images/04.png"></li>
<li><img src="images/01.png"></li>//实现无缝轮播的关键
</ul>
<div class="leftButton"><i class="icon iconfont icon-jiantou"></i></div>
<div class="rightButton"><i class="icon iconfont icon-jiantou1"></i></div>
<div class="points">
<ul class="lis">
<li class="active item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>
</div>
<script src="jquery-3.5.1的副本.js"></script>
<script src="jquery.js"></script>
</body>
</html>
css代码
*{
margin:0;
padding:0;
list-style:none;
font-size:0;
}
.wrapper{
position:relative;
height:202px;
width:459px;
margin:100px auto;
overflow:hidden;
}
.wrapper .imgbox{
height:100%;
width:2295px;
position: absolute;
top:0;
left:0;
}
.wrapper .imgbox li,.wrapper .imgbox img{
height:100%;
width:459px;
}
.wrapper .imgbox li{
float:left;
}
.leftButton,.rightButton{
display:none;
position:absolute;
top:50%;
margin-top:-20px;
height:40px;
width:40px;
background-color:rgba(0,0,0,0.5);
line-height:40px;
text-align: center;
cursor:pointer;
}
.leftButton{
border-radius: 0 25px 25px 0;
left:0;
}
.rightButton{
right:0;
border-radius:25px 0 0 25px;
}
i{
color:#fff;
font-size:14px;
}
.points{
height:20px;
width:100%;
position: absolute;
bottom:20px;
text-align: center;
}
.points ul{
height:20px;
display:inline-block;
line-height: 20px;
background-color: rgba(100,100,100,0.5);
border-radius: 10px;
line-height: 20px;
cursor:pointer;
}
.points ul li{
height:15px;
width:15px;
margin:0 10px;
border-radius: 50%;
background-color: #fff;
display:inline-block;
vertical-align: middle;
}
.points ul li.active{
background-color: #faa;
}
jquery代码
var index=0,
len=$('.item').length-1,
owidth=$('.wrapper').width(),
flag=true,
timer=null;
function init(){
allEvent();
autoMove();
}
function allEvent(){
$('.leftButton').add($('.rightButton')).add($('.item')).click(function(){
if($(this).attr('class')=='leftButton'){
move('left');
}else if($(this).attr('class')=='rightButton'){
move('right');
}else{
index=$(this).index()
move(index);
}
changeOrderStyle(index);
});
$('.wrapper').add($('.imgbox')).add($('.points'))
.mouseenter(function(){
$('.leftButton').add($('.rightButton')).css({display:'block'});
clearTimeout(timer);
})
.mouseleave(function(){
$('.leftButton').add($('.rightButton')).css({display:'none'});
clearTimeout(timer);
autoMove();
})
$('.leftButton').add($('.rightButton')).add($('.lis li'))
.mouseenter(function(){
$('.leftButton').add($('.rightButton')).css({display:'block'});
clearTimeout(timer);
autoMove();
})
}
function move(direction){
clearTimeout(timer);
if(flag){
flag=false;
if(direction=='left'){
if(index==0){
$('.imgbox').css({left:-(len+1)*owidth});
index=len;
}else{
index--;
}
$('.imgbox').animate({left:-index*owidth},function(){
autoMove();
flag=true;
});
}else if(direction=='right'){
if(index==len){
$('.imgbox').animate({left:-(len+1)*owidth},function(){
$('.imgbox').css({left:0});
autoMove();
flag=true;
});
index=0;
}else{
index++;
$('.imgbox').animate({left:-index*owidth},function(){
autoMove();
flag=true;
});
}
}else{
$('.imgbox').animate({left:-direction*owidth},function(){
index=direction;
autoMove();
flag=true;
})
}
}
}
function autoMove(){
timer=setTimeout(function(){
move('right');
changeOrderStyle(index);
},2000)
}
function changeOrderStyle(index){
$('.active').removeClass('active');
$('.item').eq(index).addClass('active');
}
init();