dw图片轮播代码是什么

发布网友发布时间：2022-03-23 20:45

我来回答

共3个回答

热心网友时间：2022-03-23 22:15

html部分：

</div>

css部分：

#box{

width:100px;

height:100px;

border:1px solid black;

position:relative;

}

.slide{

width:100px;

height:100px;

position:absolute;

}

#box{

width:100px;

height:100px;

border:1px solid black;

position:relative;

overflow:hidden;

}

JS部分：

onload=function(){

var arr = document.getElementsByClassName("slide");

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

arr[i].style.left = i*100+"px";

}

function LeftMove(){

var arr = document.getElementsByClassName("slide");

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

var left = parseFloat(arr[i].style.left);

left-=2;

var width = 100;//图片的宽度

if(left<=-width){

left=(arr.length-1)*width;//当图片完全走出显示框，拼接到末尾

}

arr[i].style.left = left+"px";

}

moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器，并给自己取名

if(left<=-width){

left=(arr.length-1)*width;//当图片完全走出显示框，拼接到末尾

clearInterval(moveId);

}

function divInterval(){

moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器

}

timeId=setInterval(divInterval,3000);//设置一个3秒的定时器。

function stop(){

clearInterval(timeId);//鼠标停留关闭B定时器

}

function start(){

clearInterval(timeId);//重新打开一个定时前，先关闭之前定时器。

timeId=setInterval(divInterval,2000);//重启一个定时器

}

//页面失去焦点定时器停止

onblur = function(){

stop();

}

//页面获取焦点时重启定时器

onfocus = function(){

start();

}

扩展资料：

代码解析：

为整个页面添加onload加载完成事件，当浏览器打开并加载完并自动执行事件中的代码块。这部分js代码写在刚才css下面即可，保持同级结构。

当页面加载完全，三个div应该并列在一起。

接下来，需要实现将这三个div整体向左移动，使用定时器，即前面的定时器A。

为了解决当鼠标悬停在轮播图，轮播图停止轮播效果，需要在box上添加鼠标移入和移出事件。

当浏览器窗口切出或页面切换到其他页面一段时间再回来时，轮播效果会有短暂加速（随切出时间加长而加长）。

主要是因为虽然窗口切出去了，定时器依然在执行，但页面却没有将效果显示，所以切回来后会将之前的效果显示出来而加速轮播图。所以添加页面焦点事件。

热心网友时间：2022-03-23 23:33

热心网友时间：2022-03-24 01:07

全部栏目

dw图片轮播代码是什么