JS制作图片切换
<!DOCTYPE html>
<html>
<head>
<title>纯JS制作简单的图片切换</title>
<meta charset="utf-8">
<!-- <link rel="stylesheet" href="css/reset.css"> -->
<style>
*{
margin:0;
padding:0;
list-style:none;
}
#row{
position:relative;
width:500px;
height:350px;
/*background-color:pink;*/
margin:50px auto;
}
#row #btn{
display:flex;
width:100%;
height:50px;
/*background-color:#484a19;*/
}
#row #btn span{
width:80px;
height:50px;
margin-right:5px;
background-color:#010000;
line-height:50px;
text-align:center;
color:#fff;
cursor:pointer;
}
#row #btn span.active{
background-color:#f60;
}
#nav{
position:relative;
width:500px;
height:300px;
/*background-color:#fab000;*/
}
#nav .pic{
position:relative;
width:100%;
height:100%;
}
#nav .pic img{
position:absolute;
display:none;
top:0;
left:0;
width:100%;
height:100%;
}
#nav .pic img.out{
display:block;
}
#row #nav p{
position:absolute;
height:25px;
background-color:rgba(0,0,0,.5);
line-height:25px;
text-align:center;
color:#fff;
font-size:12px;
}
#row #nav p.top{
top:0;
width:100%;
}
#row #nav p.bottom{
bottom:0;
width:100%;
}
#row #nav p.left{
top:50%;
left:0;
cursor:pointer;
}
#row #nav p.right{
top:50%;
right:0;
cursor:pointer;
}
</style>
</head>
<body>
<div id='row'>
<div id='btn'>
<span class='active'>循环切换</span>
<span>单边切换</span>
</div>
<div id='nav'>
<div class='pic'>
<img src="data:images/k1.jpg" class='out'>
<img src="data:images/k2.jpg">
<img src="data:images/k3.jpg">
<img src="data:images/k4.jpg">
<img src="data:images/k5.jpg">
<img src="data:images/k6.jpg">
</div>
<p class='top'><span>1</span>/6</p>
<p class='bottom'>第<span>一</span>张图片</p>
<p class='left click'>上一张</p>
<p class='right click'>下一张</p>
</div>
</div>
</body>
<script>
var tab = document.querySelectorAll("#row #btn span"),
imgs = document.querySelectorAll("#row #nav .pic img"),
right = document.querySelector("#row #nav p.right"),
left = document.querySelector("#row #nav p.left"),
oTop = document.querySelector("#row #nav .top span"),
oBottom = document.querySelector("#row #nav .bottom span"),
arr = ["一","二","三","四","五","六"],//底部文字数组
flag = true;//标记,当前处于哪个模式(循环/单边)
index = 0;//下标 tab[0].onclick = function(){
this.className = 'active';
tab[1].className = '';
flag = true;
}
tab[1].onclick = function(){
this.className = 'active';
tab[0].className = '';
flag = false;
}
right.tabs = true;//自定义属性
right.onclick = tabImg; left.tabs = false;//自定义属性
left.onclick = tabImg;
/*function(){
imgs[index].className = '';//清空原来的class
index--;
if(index < 0){
index = 5;
}
imgs[index].className = 'out';//给下一个img元素赋class值
oTop.innerHTML = index + 1;//顶部数字变化
oBottom.innerHTML = arr[index];//底部文字变化
}*/ function tabImg(){
imgs[index].className = '';
if(this.tabs){//当点击上一张或者下一张时,判断boolean是否为真,如果是假执行else语句
index++;
if(index > 5){
if(flag){//如果是真,index值为0
index = 0;
}else{
index--;//阻止index++
alert("已经是最后一张图片!");
}
}
}else{
index--;
if(index < 0){
if(flag){
index = 5;
}else{
index++;//阻止index--
alert("已经是第一张图片不能在切换了!")
}
}
}
imgs[index].className = 'out';//给下一个img元素赋class值
oTop.innerHTML = index + 1;//顶部数字变化
oBottom.innerHTML = arr[index];//底部文字变化
}
</script>
</html>
JS制作图片切换的更多相关文章
- 前端设计——js实现图片切换的淡入淡出
1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...
- jquery实现图片切换和js实现图片切换
jquery实现图片切换: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- JS美女图片切换带视觉差
使用JS实现,多张图片动态切换查看效果:http://hovertree.com/texiao/js/21/ 效果图: 转自:http://hovertree.com/h/bjaf/iamhxcyk. ...
- js手风琴图片切换实现原理及函数分析
关键词: js手风琴 js百叶窗 js百页窗 实现原理解读 使用两层for循环实现, 第一层有三个功能,分别给第个li: 添加索引 预设位置 添加事件 第二层有两个功能,整理图片位置: 鼠标的li,以 ...
- js 插入图片切换，innerHTML
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- Node.js制作图片下载爬虫的一般步骤
图片下载爬虫分两部分:爬页面和下载图片. 爬页面时先看网址是https还是http的,然后选择不同的内置对象: 其次看编码,如果是charset=gb2312的网页就需要iconv帮忙转码,好在大部分 ...
- flash8中利用遮罩制作图片切换效果
http://www.56.com/w73/play_album-aid-8642763_vid-NDY5ODU2Mzg.html
- js简单图片切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
随机推荐
- Curve 曲线 工具
最近研究了曲线绘制的工具,主要是2D方程的绘制.综合了许多工具,完成了一下两个脚本. 绘制的工具: using UnityEngine; using System.Collections; using ...
- 使用MockMvc测试controller
之前我们测试controller的时候仅仅是作为一个pojo来进行简单的测试,spring3.2后我们可以按照控制器的方式来测试Spring MVC的controller了,这样的话在测试控制器的时候 ...
- react native获取组件高度，宽 度等
import React,{Component} from 'react'import { View, Text, Image, StyleSheet, TouchableHighlight, Tou ...
- Sharepoint 2016 配置FBA（三）配置Sharepoint
编辑已经创建好的Web Applicaiton, SharePoint Central Administration -> Application Management -> Manage ...
- ln语法
Linux文件系统中,有所谓的链接(link),我们可以将其视为档案的别名,而链接又可分为两种 : 硬链接(hard link)与软链接(symbolic link),硬链接的意思是一个文件可以有多个 ...
- html页面原生video标签隐藏下载按钮
在写web项目的时候,遇到简介页面有一个单独的简介视频,只有这一个短短的视频所以没有使用任何video组件,所以运用原生video标签就想解决问题. 虽然简介视频是非付费的,但也不希望会有下载按钮或者 ...
- 如何删除新添加的项目Module
今天 new 了一个Module ,使用的是library,发现不是我想要的,于是果断删除它 但是如何删除呢,却一直找不到这个删除的delete 后来发现在这里可以删除 打开 file -> ...
- C#引用C++的DLL方案(C#调用非托管动态链接库)
SocketClientInit是C++里面定义的方法,通过EntryPoint = "?SocketClientInit@@YAHHHPAD@Z"指出这个函数的真正入口处,方法是 ...
- 清除cookie
function clearCookie(){ if(document.cookie.length < 2048){ return; } //cookie大于2kb,清除cookie var c ...
- 使用nginx反向代理实现多端口映射（未解决）
问题: 想实现访问在同一个主机上实现多个域名访问, 如用 blog.xxx.com访问博客(使用8000端口), app.xxx.com访问其他应用(使用8080端口): 不同的服务用URL区分,不用 ...