-淘宝-首页轮播-2.0
body
<div id="box">
<div class="player"></div>
<div class="control">
<span class="s">●</span>
<span>●</span>
<span>●</span>
<span>●</span>
</div>
</div>
<script src="/js/jquery-3.2.1.min.js"></script>
<script>
let items = [
{
imgUrl:"",//图片路径
href:""//图片链接
},//第一张和最后一张图片
{
imgUrl:"",
href:""
},//要插入的第四张图片
{
imgUrl:"",
href:""
},//要插入的第三张图片
{
imgUrl:"",
href:""
}//要插入的第二张图片
];
let as = []; index = 0; let timer;
//将模拟数据转换为页面标签元素
items.forEach(function (e, i) {
var item = `<a href="${e.href}"><img src="${e.imgUrl}"></a>`;
if (i == 0) {
as.push(item);
as.push(item);
} else {
as.splice(1, 0, item);
}
});
$(".player").html(as.join(""));
//封装自动轮播启动函数,定时器赋值timer
function start() {
timer = setInterval(() => {
var span = $(".control>span").eq(index == 4 ? 0 : index);
span.addClass("s");
span.siblings(".s").removeClass("s"); 00
if (index == 4) {
// span = $(".control>span").eq(0);
$(".player").css("transform", "translateX(-2080px)");
setTimeout(() => {
$(".player").css("transition", "none");
$(".player").css("transform", "translateX(0px)");
index = 1;
}, 500);
} else {
span = $(".control>span").eq(index);
$(".player").css("transition", "all 0.5s ease");
$(".player").css("transform", `translateX(${index * -520}px)`);
index++;
}
}, 3000);
}
//封装自动轮播关闭函数
function stop() {
clearInterval(timer);
}
//页面初始化启动自动轮播
start();
//鼠标移至control区域关闭自动轮播,启动手动点击播放
$(".control").hover(stop, start);
//点击control内控制点实现点击播放
$(".control>span").click(function () {
index = $(this).index();
$(this).addClass("s");
$(this).siblings(".s").removeClass('s');
$(".player").css("transform", `translateX(${-index * 520}px)`);
});
</script>