老师帮忙看下，该怎么改？我这个实现的效果不太理想。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>.ui-slider{width: 545px;height: 414px;position: relative;overflow: hidden;}
.ui-slider-wrap{width: 3000px;height: 414px;position: absolute;left: 0;transition: all .5s;}
.ui-slider-wrap a.item{display: block;float: left;width: 545px;height: 414px;}
.ui-slider-arrow{width: 544px;height: 40px;margin-top: -20px;position: absolute;top: 50%;}
.ui-slider-arrow .item{display: block;width: 40px;height: 40px;position: absolute;top: 0;
background: url(img/ui-slider-arrow.png) no-repeat;}
.ui-slider-arrow .left{left: 0;}.ui-slider-arrow .right{right: 0;background-position-x: -40px;}
.ui-slider-process{width: 100%;height: 12px;text-align: center;position: absolute;left: 0;bottom: 20px;}
.ui-slider-process .item{display: inline-block;width: 16px;height: 16px;
background: url(img/ui-slider-process.png) no-repeat;}
.ui-slider-process .item_focus,.ui-slider-process .item:hover{background-position-x: -23px;}</style>
</head>
<body>
<div class="banner-slider ui-slider">
<div class="ui-slider-wrap">
<a href="#0" class="item"><img src="img/banner_1.jpg" alt="banner-1"></a>
<a href="#0" class="item"><img src="img/banner_2.jpg" alt="banner-2"></a>
<a href="#0" class="item"><img src="img/banner_3.jpg" alt="banner-3"></a>
<a href="#0" class="item"><img src="img/banner_1.jpg" alt="banner-1"></a>
</div>
<div class="ui-slider-arrow">
<a href="#1" class="item left"></a>
<a href="#1" class="item right"></a>
</div>
<div class="ui-slider-process">
<a href="#1" class="item item_focus"></a>
<a href="#1" class="item"></a>
<a href="#1" class="item"></a>
</div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$.fn.UiSlider = function(){
var ui = $(this),
sliderWidh = ui.width(),
btns = $('.ui-slider-arrow',ui),
tips = $('.ui-slider-process',ui),
wrap = $('.ui-slider-wrap',ui),
index = 0,
timer = null;
//i.切换图片，进度点联动
function changeImg(i){
wrap.css('left', -sliderWidh * i );
$('.item',tips).eq(i).css('background-position-x',-23)
.siblings().css('background-position-x',0);
}
//ii.自动轮播，定时增加索引值
function autoPlay(){
if(timer) return;
timer = setInterval(() => {
if( index===3 ){
index = 0;
wrap.css('transition', 'none' );
changeImg(index);
}else{
wrap.css('transition', 'left .5s' );
index++;
changeImg(index);
}
}, 2000);
}
//iii.点击翻页改变index
btns.on('click',e=>{
var target = e.target;
if(target.nodeName!=='A') return;
$(target).is('.left') && (index===0 ? index = 2:index--);
$(target).is('.right') && (index===2 ? index = 0:index++);
changeImg(index);
return false;
});
//iv.点击进度点，获得index
tips.on('click',e=>{
index = $(e.target).index();
changeImg(index);
return false;
});
//v.进入页面,自动轮播
autoPlay();
//vi.鼠标进入slider停止自动轮播，移出后重新轮播
ui.on({
mouseenter:()=>{
clearInterval(timer);
timer = null;
return false;
},
mouseleave:()=>{
autoPlay();
return false;
}
})
};
$('.ui-slider').UiSlider();
</script>
</body>
</html>正在回答
同学你好，参考如下修改：
$.fn.UiSlider = function() {
var ui = $(this),
sliderWidh = ui.width(),
btns = $('.ui-slider-arrow', ui),
tips = $('.ui-slider-process', ui),
wrap = $('.ui-slider-wrap', ui),
index = 0,
timer = null;
//i.切换图片，进度点联动
function changeImg(i) {
wrap.css('left', -sliderWidh * i);
// 把判断放在这里，即播放到最后一张的时候，就立马把位置改为0，回到第一张
if (i == 3) {
i = 0;
// 但是注意要放在定时器中，否则前面设置的位置会被覆盖
setTimeout(function() {
index = 0;
wrap.css('transition', 'none');
wrap.css('left', 0);
},100)
}else{
wrap.css('transition', 'left .5s');
}
$('.item', tips).eq(i).css('background-position-x', -23)
.siblings().css('background-position-x', 0);
}
//ii.自动轮播，定时增加索引值
function autoPlay() {
if (timer) return;
timer = setInterval(() => {
// if (index === 3) {
// index = 0;
// wrap.css('transition', 'none');
// changeImg(index);
// } else {
// wrap.css('transition', 'left .5s');
// index++;
// changeImg(index);
// }
// wrap.css('transition', 'left .5s');
index++;
changeImg(index);
}, 2000);
}
//iii.点击翻页改变index
// btns.on('click', e => {
// var target = e.target;
// if (target.nodeName !== 'A') return;
// $(target).is('.left') && (index === 0 ? index = 2 : index--);
// // $(target).is('.right') && (index === 2 ? index = 0 : index++);
// $(target).is('.right') && (index === 3 ? index = 0 : index++);
// changeImg(index);
// return false;
// });
btns.on('click', e => {
var target = e.target;
if (target.nodeName !== 'A') return;
// $(target).is('.left') && (index === 0 ? index = 2 : index--);
// $(target).is('.right') && (index === 2 ? index = 0 : index++);
if ($(target).is('.right')) {
index++
console.log(index);
}
if ($(target).is('.left')) {
index--
if (index === -1) {
index = 3
wrap.css('transition', 'none');
wrap.css('left', -sliderWidh * index);
setTimeout(function () {
index = 2
wrap.css('transition', 'left .5s');
wrap.css('left', -sliderWidh * index);
$('.item', tips).eq(2).css('background-position-x', -23)
.siblings().css('background-position-x', 0);
}, 100)
return
}
}
changeImg(index);
return false;
});
//iv.点击进度点，获得index
tips.on('click', e => {
index = $(e.target).index();
changeImg(index);
return false;
});
//v.进入页面,自动轮播
autoPlay();
//vi.鼠标进入slider停止自动轮播，移出后重新轮播
ui.on({
mouseenter: () => {
clearInterval(timer);
timer = null;
return false;
},
mouseleave: () => {
autoPlay();
return false;
}
})
};
$('.ui-slider').UiSlider();
另外，无缝滚动目前课程是不涉及的，且达到更好效果会涉及到同学没有学过的知识点，所以建议同学这块简单的练习一下即可。学习时，合理安排时间，先完成课内知识的练习。等以后技术提升了，再去扩展其他的，就能轻松独立的完成了。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星