javascript实现图片轮播代码


Posted in Javascript onJuly 09, 2019

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 相关文章推荐
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 #Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 #Javascript
Vue 实现前端权限控制的示例代码
Jul 09 #Javascript
微信小程序文章详情页跳转案例详解
Jul 09 #Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 #Javascript
js实现无缝滚动双图切换效果
Jul 09 #Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 #Javascript
You might like
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
Augularjs-起步详解
2016/07/08 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
Python排序算法实例代码
2017/08/10 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
wxPython色环电阻计算器
2019/11/18 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
销售部主管岗位职责
2013/12/18 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
MySQL触发器的使用
2021/05/24 MySQL
Python中else的三种使用场景
2021/06/16 Python
Redis性能监控的实现
2021/07/09 Redis
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技