<!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. PHP include 和 require

    PHP include 和 require 语句 在 PHP 中,您可以在服务器执行 PHP 文件之前在该文件中插入一个文件的内容. include 和 require 语句用于在执行流中插入写在其他 ...

  2. （六）Angularjs - 启动引导

    自动引导 AngularJs 通过 ng-app 指令进行自动引导 手工引导启动框架 如果一个HTML文件中 有多个ng-app,AngularJS只会自动引导启动它找到的第一个ng-app应用,这是 ...

  3. web项目环境搭建（1）：建立一个maven项目

    一.maven简介以及常用概念 1.Maven是一个项目管理和整合的工具.Maven为开发者提供了一套完整的构建生命周期框架.开发团队基本不用花多少时间就能自动完成工程的基础构建配置,因为Maven使 ...

  4. gui界面2048小游戏

    坑的地方 JLabel色块要调透明 方向键要用press方法 主界面 package game; import java.awt.BorderLayout; import java.awt.Event ...

  5. UVA 305 Joseph （约瑟夫环 打表）

     Joseph  The Joseph's problem is notoriously known. For those who are not familiar with the original ...

  6. Mysql 5.7.9 cmake boost.cmake 处理

    环境Centos 6.7 x64 mininal 今天突然编译Mysql 5.7.9 按之前的cmake .的方式 发现报错了..提示 需要boost -- BOOST_INCLUDE_DIR /us ...

  7. javascript 滚动条下拉导航fixed

    <!doctype html> <html> <style> body{ margin:; padding:; } #top{ background:#; widt ...

  8. Python自动化运维之3、函数、lambda、递归

    一.函数 函数的基础概念: 函数是python为了代码最大程度地重用和最小化代码冗余而提供的基本结构 函数是一种设计工具,它能让程序员将复杂的系统分解为可管理的部件 函数用于将相关功能打包并参数化 在 ...

  9. P1337 fibonacci数列（tyvj）

    http://www.tyvj.cn/p/1337 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 著名的斐波那契数列f[n]=1               ...

  10. 【转】关于FPGA中建立时间和保持时间的探讨

      时钟是整个电路最重要.最特殊的信号,系统内大部分器件的动作都是在时钟的跳变沿上进行, 这就要求时钟信号时延差要非常小, 否则就可能造成时序逻辑状态出错:因而明确FPGA设计中决定系统时钟的因素,尽 ...