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 相关文章推荐
JavaScript获取路径设计源码
May 22 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
JavaScript基础之this详解
Jun 04 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 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
JS实现php的伪分页
2008/05/25 PHP
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
python接口自动化框架实战
2020/12/23 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
法制教育演讲稿
2014/09/10 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
React实现动效弹窗组件
2021/06/21 Javascript
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python