使用jq实现无缝轮播图,jq文件需要引入。目前效果实现,但是感觉中间逻辑关系还是有些问题,待完善
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图无缝</title>
<style>
* {
margin: 0;
padding: 0;
}
.slider {
height: 200px;
width: 400px;
margin: 100px auto;
border: 1px solid red;
position: relative;
overflow: hidden;
}
.slider-container {
width: 9999px;
position: absolute;
left: 0;
}
.slider-item {
width: 400px;
height: 200px;
float: left;
list-style: none;
text-align: center;
line-height: 200px;
}
.first {
background-color: red;
}
.slider-item:nth-child(2) {
background-color: yellow;
}
.slider-item:nth-child(3) {
background-color: blue;
}
.slider-item:nth-child(4) {
background-color: salmon;
}
.slider-indicator-wrap {
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%);
}
.slider-indicator {
list-style: none;
margin-right: 5px;
width: 20px;
height: 20px;
background-color: #a0e4ff;
border-radius: 50%;
float: left;
text-align: center;
line-height: 20px;
cursor: pointer;
}
.slider-item-active {
background-color: pink;
}
.slider-control {
display: block;
position: absolute;
height: 50px;
width: 25px;
background-color: rgba(0, 0, 0, .2);
text-decoration: none;
color: #fff;
font-size: 32px;
line-height: 50px;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
.slider-control-lf {
left: 0;
}
.slider-control-rt {
right: 0;
}
</style>
</head>
<body>
<div class="slider">
<ul class="slider-container">
<li class="slider-item first">我是第1张图片</li>
<li class="slider-item">我是第2张图片</li>
<li class="slider-item">我是第3张图片</li>
<li class="slider-item">我是第4张图片</li>
</ul>
<ol class="slider-indicator-wrap">
<li class="slider-indicator slider-item-active">1</li>
<li class="slider-indicator">2</li>
<li class="slider-indicator">3</li>
<li class="slider-indicator">4</li>
</ol>
<a href="javascript:void (0);" class="slider-control slider-control-lf"><</a>
<a href="javascript:void (0);" class="slider-control slider-control-rt">></a>
</div>
</body>
<script src="plug/jQ/jQuery3.5.1.js"></script>
<script>
var $items = $('.slider-item');
var $slider = $('.slider')
var $indicator = $('.slider-indicator');
var itemsWidth = $items.eq(0).width();
var $sliderContainer = $('.slider-container');
var curIndex = 0;
function getCorrectNum(index, maxNum) {
maxNum = maxNum || $items.length;
if (isNaN(Number(index))) return 0;
if (index < 0) return maxNum-1;
if (index > maxNum-1) return 0;
return index;
}
function changeIndicator(index) {
$indicator.removeClass('slider-item-active');
$indicator.eq(index).addClass('slider-item-active');
}
//初始化
function init(index) {
changeIndicator(index)
$sliderContainer.css('left', -index * itemsWidth);
$sliderContainer.append($items.eq(0).clone());
}
init(getCorrectNum(curIndex));
//左边
$slider.on('click', '.slider-control-lf', sliderLf= function () {
curIndex++
if (curIndex > $items.length) {
$sliderContainer.stop().animate({'left': -1*$items.length * itemsWidth + 'px'})
$sliderContainer.css('left',0);
curIndex=1;
}
$sliderContainer.stop().animate({'left': -1 * curIndex * itemsWidth + 'px'})
changeIndicator(getCorrectNum(curIndex));
})
//右边
.on('click', '.slider-control-rt', function () {
curIndex--;
if (curIndex<=-1){
$sliderContainer.css('left',-1*$items.length * itemsWidth)
curIndex=$items.length-1
}
$sliderContainer.stop().animate({'left': -1 * curIndex * itemsWidth + 'px'})
changeIndicator(getCorrectNum(curIndex));
})
$indicator.on('click',function () {
var index=$(this).index();
$sliderContainer.stop().animate({'left':-1*index * itemsWidth})
changeIndicator(index);
curIndex=index;
})
$slider.sliderTimer=setInterval(function () {
sliderLf();
},1000)
$slider.hover(function () {
clearInterval($slider.sliderTimer)
},function () {
$slider.sliderTimer=setInterval(function () {
sliderLf();
},1000)
})
</script>
</html>