javascript图片轮播代码,供大家参考,具体内容如下
因为自己是新手自学不久,所以代码有很多不规范的地方,请原谅。
html部分代码:
<div id="head"> <button id="prev" onmousedown="p()" onmouseout="cal()"><</button> <img height="500px" width="500px" src="/UploadFiles/2021-04-02/dell.jpg">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>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
最新资源
- 韩红2010-擦肩而过[央金玛][WAV+CUE]
- RiccardoTesi-UnballoLiscio,Vol.II(2024)[24-4
- 金池VS刘罡2009《双声情》[WAV+CUE]
- 冯奥迪《卄》[320K/MP3][67.08MB]
- 冯奥迪《卄》[FLAC/分轨][172.46MB]
- Merryland《Merryland》[320K/MP3][69.48MB]
- 苏芮.1991-停在我心里的温柔【福茂】【WAV+CUE】
- 苏慧伦.2020-面面Every.Side.of.Me【相信音乐】
- 群星.1991-不一样的感觉REMIX【宝丽金】【WAV+C
- 银霞.1983-《你那好冷的小手》珍藏纪念版[WAV分