html+js 实现轮播图效果
在一个页面实现
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
/* 定一个要显示图片区域的大小 */
#box{
width:524px;
height:190px;
position:relative;
overflow:hidden;
}
/* 全局变量*/
.cont
{
width:524px;
height: 190px;
}
/* 第一个图片*/
.one{
background-image: url(images/ad-01.jpg);
}
/* 二*/
.two{
background-image: url(images/ad-02.jpg);
}
/* 三*/
.three{
background-image: url(images/ad-03.jpg);
}
/* 四*/
.four{
background-image: url(images/ad-04.jpg);
}
.slide{
width:524px;
height:190px;
position:absolute;
}
</style>
<script type="text/javascript">
onload=function(){
var arr = document.getElementsByClassName("slide");
for(var i=0;i<arr.length;i++){
arr[i].style.left = i*524+"px";
}
}
function LeftMove(){
var arr = document.getElementsByClassName("slide");//获取四个子div
for(var i=0;i<arr.length;i++){
var left = parseFloat(arr[i].style.left);
left-=2;
var width = 524;//图片的宽度
if(left<=-width){
left=(arr.length-1)*width;//当图片完全走出显示框，拼接到末尾
clearInterval(moveId);
}
arr[i].style.left = left+"px";
}
}
function divInterval(){
moveId=setInterval(LeftMove,1);//设置一个1毫秒定时器
}
timeId=setInterval(divInterval,2000);//设置一个2秒的图片停顿时间
function stop(){
clearInterval(timeId);
}
function start(){
clearInterval(timeId);
timeId=setInterval(divInterval,3000);//设置一个3秒的鼠标划出的响应时间
}
//页面失去焦点停止
onblur = function(){
stop();
}
//页面获取焦点时开始
onfocus = function(){
start();
}
</script>
</head>
<body>
<div id="box" onmouseover="stop()" onmouseout="start()">
<div id="" class="slide one cont"></div>
<div id="" class="slide two cont"></div>
<div id="" class="slide three cont"></div>
<div id="" class="slide four cont"></div>
</div>
</body>
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
