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>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- JavaScript仿商城实现图片广告轮播实例代码
- javascript 超简单代码实现图片轮播功能
- 纯原生javascript实现图片轮播切换效果代码。
- JavaScript仿商城实现图片广告轮播实例代码
- 原生javascript实现图片轮播效果代码
- javascript实现图片循环渐显播放的代码(图片轮播)
- 原生javascript实现图片自动轮播和点击轮播代码
- 原生javascript实现图片自动轮播和点击轮播代码
- JavaScript实现图片轮播组件代码示例
- javaScript实现图片滚动及一个普通图片轮播的代码
- 原生javascript实现图片轮播效果
- javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版 原创
- Android实现图片轮播切换实例代码
- Javascript 网页水印(非图片水印)实现代码
- javascript图片轮播的简单实现
- jquery实现横向图片轮播特效代码分享
- Javascript实现图片轮播效果(二)图片序列节点的控制实现
- 由于自己的需要搜集的一些关于 “ javascript实现图片的不间断连续滚动” 的代码
- js实现图片轮播(根据同事代码整理而得)
- JavaScript学习第一弹:【图片轮播实现】