js-图片轮播
<!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-图片轮播的更多相关文章
- js图片轮播效果实现代码
首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...
- JS图片轮播[左右轮播
直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- js 图片轮播简单版
<html> <head> <meta charset="utf-8" /> <title></title> <s ...
- js 图片轮播（一）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js 图片轮播代码编辑
图片轮播,将几张图片统一放在展示平台 banner上,通过banner移动将图片轮流播放. <script>// 取对象 var btn_l = document.getElementsB ...
- Js 图片轮播渐隐效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 非常简洁的js图片轮播
<div id="tupian"></div><script>var jpg =new Array();jpg[0]="url(c.j ...
- js图片轮播图
/*焦点图*/ var Box='.carousel';//盒子 var Menu=$(Box+' .l_cursor li');//圆点菜单 var Con ...
- angular js 图片轮播
搬运工: eg1: Build a Sweet AngularJS Photo Slider Pt 2 with ngTouch DEMO:http://paul-xiao.github.io/ang ...
- 最简单的JS图片轮播
var arr=new Array(); arr[1]="";//放图片地址 arr[2]=""; arr[3]=""; var no=0; ...
随机推荐
- MFC窗口位置和大小的获取
最近在做一个项目,需要控件随对话框大小的变化而变化,因此需要准确获取对话框窗口.控件的大小和位置. 经过好一番查寻.测试,终于看到了希望.下面是一些获取窗口位置和大小的函数,示例如下: 1.获取屏幕分 ...
- codeforces 数字区分 搜索
Jokewithpermutation Input file: joke.inOutput file: joke.outJoey had saved a permutation of integers f ...
- UI设计教程：如何在设计中运用颜色
灰度优先 我们习惯在设计阶段的早期就开始调整颜色和色调.但是,当你意识到自己花了3个小时来调整主色调的时候,你发现这种行为毫无帮助.虽然把玩颜色很有吸引力,但是你应该避免在设计初期进行这种行为. 相反 ...
- 学习第一天-JAVA
第一题打印1到1000的奇数 public class OneToThousandOdd{ public static void main(String[] args) { short num = 1 ...
- Spring Boot学习笔记：传统maven项目与采用spring boot项目区别
项目结构区别 传统的maven构建的项目结构如下: 用maven构建的采用springboot项目结构如下: 二者结构一致,区别如下:传统项目如果需要打成war包,需要在WEB-INF目录结构配置we ...
- Python 使用for...in...和 while 循环 实现8种格式的 九九乘法表
#九九乘法表 for...in .. #左下角 for i in range(1,10): for j in range(1,i+1): print(' %d×%d=%2d'%(j,i,i*j), e ...
- [C#.Net]启动外部程序的几种常用方法汇总
本文汇总了C#启动外部程序的几种常用方法,非常具有实用价值,主要包括如下几种方法: 1. 启动外部程序,不等待其退出. 2. 启动外部程序,等待其退出. 3. 启动外部程序,无限等待其退出. 4. 启 ...
- 20155312 2016-2017-2 《Java程序设计》第五周学习总结
20155312 2016-2017-2 <Java程序设计>第五周学习总结 课堂笔记 十个基本类型 命令:ascii打印ascii值, od -tx1 Test.java用十六进制查看代 ...
- 哈希与字典树与KMP
hash讲解 主要记录hash的公式: ; i<=len; i++) { Hash[i]=(Hash[i-]*)%mod)%mod; } 求hash的公式是这个,怎么求一小段的hash值呢? ; ...
- python学习 day08 (3月13日)----函数
函数 一.定义 def 关键字 函数名(): 函数体 函数 ---- 封装#def 关键字 # #定义后的函数就像变量 不调用是不执行的 # #函数名() ==函数的调用 def code(): ...