您的位置:首页 > Web前端 > JavaScript

javascript实现图片轮播代码

2019-07-09 15:41 1661 查看

javascript图片轮播代码,供大家参考,具体内容如下

因为自己是新手自学不久,所以代码有很多不规范的地方,请原谅。

html部分代码:

<div id="head">
<button id="prev" onmousedown="p()" onmouseout="cal()"><</button>
<img height="500px" width="500px" src="image/dell.jpg" alt="Dell">
<button id="next" onmousedown="n()" onmouseout="cal()">></button>
</div>

CSS部分代码:

<style type="text/css">

*
{
margin: 0;
padding: 0;
}

#head
{
width:800px;
height:500px;
border-radius: 5px;
border: 2px solid pink;
margin: 200px auto;
text-align: center;
}

#prev
{
width: 30px;
height: 30px;
border: 0px;
border-radius: 5px;
background-color:white;
color: black;
position: relative;
margin-top: 250px;
float: left;
}

#next
{
width: 30px;
height: 30px;
border: 0px;
border-radius: 5px;
background-color:white;
color: black;
position: relative;
margin-top: 250px;
float: right;
}

</style>

javascript部分代码:

<script>

var prev=document.getElementById("prev");
var next=document.getElementById("next");
var img=document.getElementsByTagName("img")[0];
var imgArr=["image/dell.jpg/dell.jpg","image/dell.jpg/sony.jpg","image/dell.jpg/费列罗.jpg","image/dell.jpg/Nike.jpg"];
var index=0;

//点击左箭头,切换上一张
function p(){

if(index==0)
{
index=imgArr.length;
}

index--;

img.src=imgArr[index];

}
//点击右箭头,切换下一张
function n(){

if(index==imgArr.length)
{
index=0;
}

img.src=imgArr[index];

index++;

}
//设置自动播放
time=setInterval("p()",2000);

//鼠标移入箭头内,停止自动播放
function cal(){
clearInterval(time);
}

</script>

以上就是本文的全部内容,希望对大家的学习有所帮助

您可能感兴趣的文章:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  js 图片轮播