简易javascript图片轮播代码

javascript图片轮播代码

因为自己是新手自学不久，所以代码有很多不规范的地方，请原谅。

html部分代码：

<div id="head"> <button id="prev" onmousedown="p()" onmouseout="cal()"><</button><img height="500px" width="500px" src="data: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图片轮播代码相关推荐

html图片轮播replace,JavaScript图片轮播代码分享
为大家分享的JavaScript图片轮播代码如下无标题文档 .img-div img{display:none;} 1 2 3 4 5 var zBase= { $id:function(id){r ...
html+轮播图下标跳转代码,最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: 最简单的轮播广告 body, div, ul, li { margin: ; padding: ; } ul { list-style-t ...
详细简单的php图片轮播,最简单的JavaScript图片轮播代码(两种方法)_javascript技巧...
通过改变每个图片的opacity属性: 素材图片: 代码一: 最简单的轮播广告代码二: 首先第一步,下载好一个jquery库的插件,jquery.js 网上很多随处可以下载．下载的插件要放在目录下． ...
html图片快速轮播特效代码,轻松实现javascript图片轮播特效
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下还是先来看一看效果图: 具体代码: 一.HTML代码分析 A版是一款手机DOTA应用,它涵盖了 ...
基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览源码下载实现的代码: <div id= ...
自动图片轮播php源码,js实现自动图片轮播代码
本文实例为大家分享了轮播的具体代码,自动轮播,居中显示,供大家参考,具体内容如下 #div1{ width: 192px; height: 120px; border: 1px solid gray; ...
Swiper全屏自适应图片轮播代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
php中实现图片自动轮播,轻松实现javascript图片轮播特效_javascript技巧
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下还是先来看一看效果图: 具体代码: 一.HTML代码分析此效果的层次结构比较清楚: 1. c ...
html 图片放大缩小轮播,jQuery左右滚动支持图片放大缩略图图片轮播代码分享
本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播 ...

简易javascript图片轮播代码

简易javascript图片轮播代码相关推荐

最新文章

热门文章