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 浮动广告实现代码
Dec 25 Javascript
jquery 获取json数据实现代码
Apr 27 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
PHP 图像尺寸调整代码
2010/05/26 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
基于python 字符编码的理解
2017/09/02 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
大学共青团员个人自我评价
2014/04/16 职场文书
党务公开方案
2014/05/06 职场文书
团日活动总结书
2014/05/08 职场文书
总经理任命书范本
2014/06/05 职场文书
学校节能减排方案
2014/06/13 职场文书
校本课程教学计划
2015/01/19 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
总结高并发下Nginx性能如何优化
2021/11/01 Servers