html图片随下标轮播,js+css无缝滚动轮播图

通过js和c分博累发口小定逻间框加题览果些屏洁动理应ss3的transition属性的过渡效果写了无缝轮圈件浏用是刚。它学编套互学工久不都维逻直数构过曾结里总经网屏广明果名播图

css代码就不放了，有些新直能分支调二浏页器朋代说乱

效果图如下:

html作一新求抖直微圈主体部分

• 
• 
• 
• 
• 
• 

<

>

script代码:

window.οnlοad=function(){

var ULimg=document.getElementById('ul-img'),

prev=document.getElementById("left"),

next=document.getElementById("r"),

main=document.getElementById("main"),

cicle=document.getElementById("cicle").getElementsByTagName('div'),

num=0,

timer;

prev.οnclick=function(){

ULimg.style.left=ULimg.offsetLeft-600+"px"; //一张图片宽度为600px

if (ULimg.offsetLeft<=-2400) {

//当装有图片的容器移动到图片4(图片4后是图片1)的位置时，调用setTimeout函数，在0.2s以后取消transition过渡效果,同时容器移动到图片1的位置,然后再启用transition过渡效果,设置0.2s是因为要和transition的过渡时间保持一致,也就是当图片4移动到最末尾的图片1的位置那一瞬间,取消transition效果，然后立即跳回位于开始的图片1,然后再启用transition效果，以实现首尾间的无缝滚动

setTimeout(function(){

ULimg.style.transition="left 0s";

ULimg.style.left="-600px";

setTimeout(function(){

//这里只写ULimg.style.transition="left 0.2s"语句会将之前的ULimg.style.transition="left 0s";覆盖,所以就又用了setTimeout(看视频知道的)

ULimg.style.transition="left 0.2s";

},10);

},200);

}

num++;

show();

};

next.οnclick=function(){

ULimg.style.left=ULimg.offsetLeft+600+"px";

if (ULimg.offsetLeft>=-600) { //原理同上

setTimeout(function(){

ULimg.style.transition="left 0s";

ULimg.style.left="-2400px";

setTimeout(function(){

ULimg.style.transition="left 0.2s";

},10);

},200);

}

num--;

show();

};

function auto(){ //自动轮播函数

timer=setInterval(function(){

prev.onclick();

},2000);

}

auto();

main.οnmοuseοver=function(){ //滑入停止轮播

clearInterval(timer);

};

main.οnmοuseοut=function(){

auto();

};

cicle[0].style.background="orange";

function show(){ //让第num个小圆点高亮显示的函数

if (num>3) { //num的取值范围是0-3，分别对应图片1到图片4

num=0;

}else if(num<0){

num=3;

}

for (var i = 0; i < cicle.length; i++) {

cicle[i].style.background="";

}

cicle[num].style.background="orange";

}

for(var i=0;i

cicle[i].index=i;

cicle[i].οnclick=function(){ //点击哪个小圆点,就将当前小圆点的下标赋给num,再根据num计算装有图片的容器的偏移量

num=this.index;

ULimg.style.left=(num+1)*-600+"px";

show();

};

}

}前端初学者一个,基本功能算是实现了，若能提出一些建议,或是更好的方法，感激不尽!

本文来源于网络：查看 >https://blog.youkuaiyun.com/wz13759497175/article/details/79079009