<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
body,p{margin: 0;padding: 0;}
#content{
width:600px;
height: 400px;
background:#dedede url(img/jiazai.gif)no-repeat center;
margin: 30px auto;
position:relative;
border: 10px solid #2a3ce6;
}
#content a{
width: 50px;
height: 50px;
border: 5px solid #da3ef6;
position: absolute;
top:170px;
line-height: 50px;
font-size: 30px;
font-weight: bold;
text-decoration: none;
background: #2a3ce6;
text-align: center;
filter:alpha(opacity:60);
opacity:0.6;
color:#fff;
}
#content a:hover{
filter:alpha(opacity:90);
opacity:0.9;
}
#prve{
left:10px;
}
#next{
right: 10px;
}
#content p{
text-align: center;
width: 600px;/*为块元素设置绝对定位,会漂浮起来,如果不设置宽高,默认是内容撑开宽高!*/
height: 28px;
font: 16px/28px "微软雅黑";
color:#fff;
background: #000;
filter:alpha(opacity:60);
opacity:0.6;
position: absolute;
left:0px;
}
#p1{
top: 0;
}
#p2{
bottom: 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
// 查找元素
var oNext = document.getElementById('next');
var oPrve = document.getElementById('prve');
var oP1 = document.getElementById('p1');
var oP2 = document.getElementById('p2');
var oImg = document.getElementById('Img');
/* 此处声明变量并赋初值，声明的意思是在此作用域范围内，在内存中开辟一块空间给你定义的变量，
然后赋值——把你给的值放在这个变量空间中。如果不先声明，则无法存放数据。*/
var num=0;
// 添加图片和信息
var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg']
var arrP2 = ['图片1','图片2','图片3','图片4']
// 初使化内容
function funtab() {
oP1.innerHTML = num+1+'/'+arrUrl.length;
oP2.innerHTML = arrP2[num];
oImg.src = arrUrl[num];
}
funtab();//函数必须先调用再执行

// 上一张
oPrve.onclick = function () {
num --;
if(num==-1){
num=arrUrl.length-1;
}
funtab();
};
// 下一张
oNext.onclick = function () {
num ++;
if(num==arrUrl.length){
num=0;
}
funtab();
};
};
</script>
<body>
<div id="content">
<a id="prve" href="#"><</a>
<a id="next" href="#">></a>
<p id="p1">图片个数加载中</p>
<p id="p2">图片信息加载中</p>
<img id="Img" src=""/>
</div>
</body>
</html>

JS简单实现图片切换的更多相关文章

  1. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  2. JavaScript 最简单的图片切换

    使用前在文件外部要有1.jpg 2.jpg 只是简单的模仿flash图片切换,可在此基础上引申出各种不同的效果. 思路: 建立一个数组存放图片的src,然后调用setInterval周期性的调用cha ...

  3. jquery 实现的一款超简单的图片切换功能

    <html><head> <meta http-equiv="Content-Type" content="text/html; chars ...

  4. JS实现简单的图片切换效果

    使用图片进行点击切换效果 <!doctype html> <html lang="en"> <head> <meta charset=&q ...

  5. JS组件系列——图片切换特效：简易抽奖系统

    前言:前两天在网上找组件,无意中发现了我们儿时游戏机效果的“SlotMachine组件”,浏览一遍下来,勾起了博主小时候满满的回忆.于是下定决定要研究下这么一个东西,不得不再次叹息开源社区的强大,原来 ...

  6. js自增图片切换

    使用js自增进行图片的切换 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  7. 通过JS简单实现图片缩放

    ;display: none;cursor: pointer;} #FullScreenDiv{;display: none;background-color: #919191;filter: alp ...

  8. 如何用js代码实现图片切换效果

    通过点击按钮,实现图片的隐藏与显现,切换. 实现代码:<style> .a{ width: 300px; height: 300px; border: 1px solid black; } ...

  9. JS简单的图片左右滚动

    <div id="scroll" style="overflow:hidden;width:757px;"> <table cellpaddi ...

随机推荐

  1. 告诉你GetDC()没有释放造成的后果

    最近做的项目中需要显示视频监控窗口,从采集卡中读到图像的数据,需要实时显示出来,而且速度比较快. 由于比较简单,就直接使用了GDI画图,以前复杂的都用openGL啥的工具了,这次这个简单,就直接用GD ...

  2. 遍历std::list过程中删除元素后继续遍历过程

    std::list::erase Erase elements Removes from the list container either a single element (position) o ...

  3. 64位window7，php5.5.10 +IIS7 配置

    首先添加IIS. 控制面板-〉程序-〉打开或关闭Windows功能 1. 勾选“Internet 信息服务”   2. 勾选“IIS 管理控制台” Internet 信息服务-〉Web 管理工具   ...

  4. DEDE常见的错误（转）

    1:dedecms文章录入的时候,如何控制文章重复.   在dede/article_add.php里面,加入该程序就OK了    if($cfg_check_title == 'Y'){      ...

  5. 51单片机 Keil C 延时程序的简单研究

    应用单片机的时候,经常会遇到需要短时间延时的情况.需要的延时时间很短,一般都是几十到几百微妙(us).有时候还需要很高的精度,比如用单片机驱动DS18B20的时候,误差容许的范围在十几us以内,不然很 ...

  6. 【HDOJ】1493 QQpet exploratory park

    超水的动态规划.最后要对概率求Sigma. #include <cstdio> #include <cstring> #include <cstdlib> #def ...

  7. gcc编译时头文件库文件搜索顺序(转)

    原文: http://blog.csdn.net/silentfly1987/article/details/6119195

  8. Node开发入门

    介绍 Node.js采用google的V8虚拟机来解释和执行javascript,也就是允许脱离浏览器环境运行javascript代码. Hello World 婴儿说的第一个字一般是"妈& ...

  9. Ubuntu 14.04 64位安装Android Studio 和 genymotion （上）

    先说下,Ubuntu 上安装Android Studio真是一路坑阿,一路坑阿,加上天  朝 防火墙挡着,折腾了快一天才弄好阿 找了n多教程,md不是抄的就是转的,而且都没说清楚具体咋装阿,一个图一个 ...

  10. word-wrap: break-word 和 word-break: break-all 到底有啥区别？

    做项目改bug的时候,遇到过好多次,要么是文本超出文本区域,或者单词太长(一般是url链接中的一些鬼),把装它的标签强制撑大,导致一些响应式问题.除此之外,还有很多问题,每次都是恍然醒悟,然后又在网上 ...