js点击轮播或者自动轮播图代码

最新推荐文章于 2024-08-12 16:04:13 发布

林中明月间。

最新推荐文章于 2024-08-12 16:04:13 发布

阅读量2w

点赞数 2

文章标签： js点击轮播或者自动轮播

本文链接：https://blog.csdn.net/a772116804/article/details/78791551

版权

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="gbk">
<title>js点击轮播或者自动轮播</title>
<style>
#d{position: relative;top: -30px;}
label{margin: -5px;}
.one{width: 10px;height: 10px;border: 1px solid black; background-color: red;}
</style>

<script>
var n =0;//图片下标 label下标
var t=0;// 清除动画用

function init(){
//1.默认进来自动播放轮播图
switchImgs();

//2. 当鼠标移入移出不同的label切换不同的图片.
var img = document.getElementById("img");
var labels =document.getElementsByTagName("label");//拿到所有的label标签对象

for(var i=0;i<labels.length;i++){//给每个label标签注册一个hover事件
labels[i].οnmοuseοver=function(){
clearTimeout(t);//停止动画
var b= this.innerText*1;//拿到标签上的数字
img.src="images/photo_0"+b+".jpg";//显示对应的图片
clearStyle();//清除label上的样式
this.className="one";//让当前的label的样式变化
}

labels[i].οnmοuseοut=function(){//鼠标移出动画开始,动画从当前的图片开始动画
n=this.innerText*1;//获取当前label上的数字并转换成整型
switchImgs();
}
}

}

//默认动画,图片轮播,每个1秒切换
function switchImgs(){
n++;
if(n==7){n=1;}//到达末尾的时候跳转到第一张
var img = document.getElementById("img");
img.src="images/photo_0"+n+".jpg";
clearStyle();//当图片到第二张的时候,要把label1的样式清除,
document.getElementById("i"+n).className="one";
t=setTimeout("switchImgs()",1000);
}

//清除label的所有的样式
function clearStyle(){
var labels= document.getElementsByTagName("label");
for(var i=0;i<labels.length;i++){
labels[i].className="";//让label表的classname置为空
}
}

</script>
</head>
<body οnlοad="init()">
<div align="center">
<img src="images/photo_01.jpg" width="400" height="500" id="img">
<div id="d">
<label id="i1"> 1 </label>
<label id="i2"> 2 </label>
<label id="i3"> 3 </label>
<label id="i4"> 4 </label>
<label id="i5"> 5 </label>
<label id="i6"> 6 </label>
</div>
</div>
</body>

</html>

//自动轮播图代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="gbk">
<title>自动轮播图</title>
<style>
#div1{
width: 192px;
height: 120px;
border: 1px solid gray;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#div1 img{
position: absolute;
}
</style>
</head>
<body>
<div id="div1">
<img src="meinv.jpng" alt="" width="192"/>
<img src="44.jpg" alt="" width="192"/>
<img src="video.png" alt="" width="192"/>
<img src="images/4.jpg" alt="" width="192"/>
</div>
<div id="div2">

</div>
<script>
//获取页面元素
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var imgs = div1.getElementsByTagName('img');
//初始化页面图片的位置
window.οnlοad=function(){
for(var i=0; i<imgs.length; i++){
imgs[i].style.left = i*192 +'px'
}
};
//轮播移动的函数
function imgMove(){
var b1 = false;
for(var i = 0; i < imgs.length; i++) {
imgs[i].style.left = imgs[i].offsetLeft-1 + 'px';
if(imgs[i].offsetLeft==0){
b1=true;
if(i==0)
imgs[imgs.length-1].style='576px';
else
imgs[i-1].style.left='576px'
}
}
if(!b1)
setTimeout(imgMove,20);
else
setTimeout(imgMove,2000);
}
setTimeout(imgMove,3000);
</script>
</body>
</html>