html京东自动轮播,js 京东首页轮播图实现（透明度切换）-CSDN博客

思路：

1、定义图片和图片轮播dot初始下标 index为0，并为第一张轮播图和第一个dot赋予状态

2、切换到下一张图片函数moveNext ，函数内将当前下标index的图片和dot恢复原来状态，index自增1，将自增后下标的图片和dot赋予状态

3、切换到上一张图片函数movePrev，与步骤2类似

4、定义计时器，每隔三秒执行一次切换到下一张图片函数 moveNext

5、下一张按钮点击函数函数内清除所有计时器，并执行切换到下一张图片函数 moveNext ， ,然后继续自动播放

6、定义上一张按钮点击函数，函数内清除所有计时器，并执行切换到上一张图片函数 movePrev ,然后继续自动播放

7、遍历dot并为每个dot定义点击函数，函数内首先清除所有计时器，上一个dot恢复原来状态，获取当前点击dot下标，为当前下标dot赋予状态,然后继续自动播放

js代码

//获取元素

var box=document.querySelector(".box");

var imgs=document.querySelectorAll(".box img");

var left_btn=document.querySelector(".left");

var right_btn=document.querySelector(".right");

var lis=document.querySelectorAll(".point li");

//声明计时器变量

var timer;

/声明图片和图片轮播dot初始下标

var indexshow=0;

//图片轮播dot第一个初始为点亮状态

lis[indexshow].className='active';

//初始状态第一张轮播图自动加入，实现透明度到1的动画，动画结束后，开始计时器自动播放开始(每隔三秒切到下一张)

animate(imgs[indexshow],

{'opacity':1},function(){

timer=setInterval(function(){

moveNext();

},3000)

});

//定义切换到下一张图片函数

function moveNext(){

//令上一张图片和上一个dot恢复原来状态

imgs[indexshow].className='';

imgs[indexshow].style.opacity=0.02;

lis[indexshow].className='';

//下标自增1

indexshow++;

//临界值判断

if(indexshow==imgs.length){

indexshow=0;

}

//当前下标的状态

lis[indexshow].className='active';

imgs[indexshow].className='show';

//当前下标图片实现透明度到1动画

animate(imgs[indexshow],{

'opacity':1

})

}

//定义切换到下一张图片函数

function movePrev(){

// console.log(123);

imgs[indexshow].className='';

lis[indexshow].className='';

imgs[indexshow].style.opacity=0.02;

indexshow--;

if(indexshow==-1){

indexshow=imgs.length-1;

}

lis[indexshow].className='active';

imgs[indexshow].className='show';

animate(imgs[indexshow],{

'opacity':1

})

}

//定义上一张按钮点击函数

left_btn.οnclick=function(){

//清除所有计时器

clearInterval(timer);

clearInterval(imgs[indexshow].timer);

//触发切换到上一张函数

movePrev();

//继续执行计时器自动播放

timer=setInterval(function(){

moveNext();

},3000)

}

//定义下一张按钮点击函数

right_btn.οnclick=function(){

clearInterval(timer);

clearInterval(imgs[indexshow].timer);

moveNext();

timer=setInterval(function(){

moveNext();

},3000)

}

//定义轮播图dot点击函数

for(var i=0;i

// 获取当前点击dot下标并保存

lis[i].index=i;

lis[i].οnclick=function(){

//清除所有计时器

clearInterval(timer);

clearInterval(imgs[this.index].timer);

//上一个dot恢复原来状态

imgs[indexshow].className='';

lis[indexshow].className='';

imgs[indexshow].style.opacity=0.02;

//获取当前下标并赋予状态

indexshow=this.index;

lis[indexshow].className='active';

imgs[indexshow].className='show';

animate(imgs[indexshow],{

opacity':1

})

//继续自动播放

timer=setInterval(function(){

moveNext();

},3000)

}

动画过渡函数animate封装

function animate(dom, obj, callback) {

for (var o in obj) {

if (o == "opacity") {

var current = parseInt(getComputedStyle(dom, null)[o] * 100);

var target = obj[o] * 100;

} else if (o.indexOf("scroll") !== -1) {

var current = dom[o];

var target = obj[o];

} else {

var current =parseInt(getComputedStyle(dom, null)[o]);

var target = obj[o];

}

obj[o] = {

'current': current,

'target': target

};

}

clearInterval(dom.timer);

dom.timer = setInterval(function () {

for (var o in obj) {

var target = obj[o].target;

var current = obj[o].current;

var speed = (target - current) / 10;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if (Math.abs(target - current) <= Math.abs(speed)) {

if (o == "opacity") {

dom.style[o] = target / 100;

} else if (o.indexOf("scroll") !== -1) {

dom[o] = target;

} else {

dom.style[o] = target + "px";

}

delete obj[o];

for (var i in obj) {

return;

}

clearInterval(dom.timer);

typeof callback === 'function' ? callback() : '';

} else {

obj[o].current += speed;

if (o == "opacity") {

dom.style[o] = obj[o].current / 100;

} else if (o.indexOf("scroll") !== -1) {

dom[o] = obj[o].current;

} else {

dom.style[o] = obj[o].current + "px";

}

}, 20);

}

Love

Haha

Wow

Sad

Angry