<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul { padding:0; margin:0; }
li { list-style:none; }
body { background:#333; }
.pic { width:400px; height:500px; position:relative; margin:0 auto;}
.pic img { width:400px; height:500px; }
.pic ul { width:40px; position:absolute; top:0; right:-50px; }
.pic li { width:40px; height:40px; margin-bottom:4px; background:#666; }
.pic .active { background:#FC3; }
.pic span { top:0; }
.pic p { bottom:0; margin:0; }
.pic p,.pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
.btn{
width: 24px;
height: 24px;
background: rgba(0,0,0,0.5);
position: absolute;
top: 250px;
text-align: center;
line-height: 24px;
text-decoration: none;
color: #fff;
}
.pic .next{
right: 0;
}
</style>

</head>

<body>

<div id="pic" class="pic">
<img src="" />
  <span>数量正在加载中……</span>
  <p>文字说明正在加载中……</p>
  <ul></ul>
  <a href="javascript:;" class="btn next">></a>
  <a href="javascript:;" class="btn prev"><</a>
</div>

<script>

var oPic = document.getElementById("pic")

var oImg = oPic.getElementsByTagName("img")[0]
var oSpan = oPic.getElementsByTagName("span")[0]
var oP = oPic.getElementsByTagName("p")[0]
var oUl = oPic.getElementsByTagName("ul")[0]
var oA = oPic.getElementsByTagName("a")
var oLi = oUl.getElementsByTagName("li")
var num = 0
var arrUrl = ["img/1.png","img/2.png","img/3.png","img/4.png"]
var arrText = ["1","2","3","4"]

function tab(){

oSpan.innerHTML = num+1+"/"+arrUrl.length
oP.innerHTML = arrText[num]
oImg.src = arrUrl[num]
}
tab()

for (var i=0;i<arrUrl.length;i++) {
oUl.innerHTML += "<li></li>"
}

oLi[0].className = "active"

for (var i=0;i<oLi.length;i++) {
oLi[i].index = i
oLi[i].onclick = function(){
num = this.index
for (var i=0;i<oLi.length;i++) {
oLi[i].className = ""
}

oLi[num].className = 'active'
tab()
}
}


oA[0].onclick = function(){

num++

if(num>arrUrl.length-1){
num = 0
}

for (var i=0;i<oLi.length;i++) {
oLi[i].className = ""
}
oLi[num].className = 'active'
tab()

}

oA[1].onclick = function(){

num--

if(num<0){
num = arrUrl.length-1
}

for (var i=0;i<oLi.length;i++) {
oLi[i].className = ""
}
oLi[num].className = 'active'
tab()

}




</script>

</body>
</html>

js-图片轮播的更多相关文章

  1. js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...

  2. JS图片轮播[左右轮播

    直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  3. js 图片轮播简单版

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  4. js 图片轮播（一）

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. js 图片轮播代码编辑

    图片轮播,将几张图片统一放在展示平台 banner上,通过banner移动将图片轮流播放. <script>// 取对象 var btn_l = document.getElementsB ...

  6. Js 图片轮播渐隐效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. 非常简洁的js图片轮播

    <div id="tupian"></div><script>var jpg =new Array();jpg[0]="url(c.j ...

  8. js图片轮播图

    /*焦点图*/        var Box='.carousel';//盒子        var Menu=$(Box+' .l_cursor li');//圆点菜单        var Con ...

  9. angular js 图片轮播

    搬运工: eg1: Build a Sweet AngularJS Photo Slider Pt 2 with ngTouch DEMO:http://paul-xiao.github.io/ang ...

  10. 最简单的JS图片轮播

    var arr=new Array(); arr[1]="";//放图片地址 arr[2]=""; arr[3]=""; var no=0; ...

随机推荐

  1. linux如何查询系统驱动是否支持该型号显卡

    操作系统在做硬件适配时,经常会检查系统内核是否支持硬件的显卡:如果不支持,则一般是通过升级内核或者该型号对应品牌的显卡驱动来解决(开源或者闭源): 操作流程如下 1> 查询本机的显卡型号 因显卡 ...

  2. 洛谷2971 [USACO10HOL]牛的政治Cow Politics

    原题链接 假设只有一个政党,那么这题就退化成求树的直径的问题了,所以我们可以从此联想至\(k\)个政党的情况. 先处理出每个政党的最大深度,然后枚举每个政党的其它点,通过\(LCA\)计算长度取\(\ ...

  3. AppStore企业账号打包发布APP流程详解

    一.通过企业账号申请证书 1 Certificate Signing Request (CSR)文件 在Mac系统中进入“钥匙串访问”,选择“钥匙串访问”-“证书助理”-“从证书颁发机构请求证书…”, ...

  4. Linux下通过brctl配置网桥

    什么是网桥 网桥是一种在链路层实现中继,对帧进行转发的技术,根据MAC分区块,可隔离碰撞,将网络的多个网段在数据链路层连接起来的网络设备. 简单的理解就是交换机. Linux下配置网桥主要用 brct ...

  5. for 循环分解

    for (expression1; expression2; expression3) { statement; } statement称为循环体 expression1为初始化部分,只在循环开始前执 ...

  6. swift 要点

    swift 基本语法注意点 通常来说,编程语言教程中的第一个程序应该在屏幕上打印“Hello, world”.在 Swift 中,可以用一行代码实现 print("Hello, world! ...

  7. PostThreadMessage

    PostThreadMessage是一个Windows API函数.其功能是将一个队列消息放入(寄送)到指定线程的消息队列里,不等待线程处理消息就返回.

  8. .NET获取城市信息（将三字代码转换成城市名）

    整理代码,发现有一个从两张表里读取城市列表,然后linq和lambda表达式来获取城市名的函数,代码如下: public static string GetCityHotelText(string c ...

  9. 2017/2/8 hibernate + oracle 实现id的自增 同时 hibernate项目跑起来 会自己增加字段的原因 oracle触发器的使用

    hibernate + oracle 实现id的自增 1.在oracle中先创建一个序列 : 序列语法 如下 create  sequence   (序列名称)seq_student_id minva ...

  10. Java第14章笔记

    Java 中无参无返回值和带参带返回值习题 编写一个 Java 程序,实现输出学生年龄的最大值 要求: 1. 要求通过定义无参带返回值的方法来实现,返回值为最大年龄 2. 方法中将​学生年龄保存在数组 ...