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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 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程序?
2006/12/08 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
Python科学计算包numpy用法实例详解
2018/02/08 Python
python实现数据写入excel表格
2018/03/25 Python
python实现字符串加密成纯数字
2019/03/19 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
python 发送get请求接口详解
2020/11/17 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
公司捐书倡议书
2015/04/27 职场文书
党员公开承诺书2016
2016/03/24 职场文书
宪法宣传标语100条
2019/10/15 职场文书