<!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. ibatis.net调用oracle存储过返回游标SYS_REFCURSOR结果集

    最近在用ibatis.net框架和oracle 11g开发一套程序.其中有一个需求就是通过存储过程,查询指定条件的数据集. 但是在开发的过程中遇到了问题,问题如下: 1.如何通过ibatis.net执 ...

  2. C语言初学 给已知公式求圆周率

    公式: 圆周率=1-1/3+1/5-1/7+......+1/(4n-3)-1/(4n-1) #include<stdio.h> #include<math.h> main() ...

  3. Spark学习笔记--Graphx

    浅谈Graphx: http://blog.csdn.net/shangwen_/article/details/38645601 Pregel: http://blog.csdn.net/shang ...

  4. Solr 单机配置

    一. 准备软件 提前安装好Java1.8和Tomcat9 下载Solr6.1,官网位置:http://mirrors.tuna.tsinghua.edu.cn/apache/lucene/solr/6 ...

  5. codevs 3223 素数密度

    题目描述 Description 给定区间[L, R](L <= R <= 2147483647,R-L <= 1000000),请计算区间中素数的个数. 输入描述 Input De ...

  6. 在iOS开发中使用FMDB－备用

    SQLite (http://www.sqlite.org/docs.html) 是一个轻量级的关系数据库.iOS SDK很早就支持了SQLite,在使用时,只需要加入 libsqlite3.dyli ...

  7. 转：MFC文件操作

    讲到文件操作我们会联想到自己手动操作文件会涉及到哪些内容.很容易想到的是查看文件(文件夹)是否存在,创建,复制,删除,剪切文件(文件夹).另外就是设置文件的属性. 那MFC中一些操作文件的类也差不多是 ...

  8. 为什么c程序里一定要写main函数

    一. 学习过程 编写程序f.c: 对其进行编译,正常通过,再对其进行连接,出现错误: 显示的出错信息为: 翻译成中文是:在c0s模块没有定义符号’_main’. 那么这个错误信息可能与文件c0s.ob ...

  9. bootstrap 动态添加验证项和取消验证项

    bootstrap 中的bootstrapValidator可以对前端的数据进行验证,但是有的时候我们需要动态的添加验证,这样需要我们动态的对bootstrapValidator的内容做修改. 传统的 ...

  10. HDOJ 1397 Goldbach's Conjecture(快速筛选素数法)

    Problem Description Goldbach's Conjecture: For any even number n greater than or equal to 4, there e ...