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焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
随机推荐
- bootstrap中的.container类定义
bootstrap中的.container类定义 .container{ padding-right:15px; padding-left:15px; margin-right:auto; margi ...
- python基础知识总结（二）
基础数据类型初始: int(数字):+ 加 - 减 * 乘 / 除 % 取余数 str(字符串):python中凡是用引号引起来的都是字符串 可以相加,用来表示字符串的拼接 可以相乘,只能 ...
- Displaylink安卓驱动
Displaylink安卓驱动 2019年最新版V2.3.1
- 使用Pillow库 创建简单验证码
使用Pillow生成简单的验证码 本想做成字体各自按随机角度倾斜, 但没有在Pillow中找到相关的方法 import randomfrom PIL import Image, ImageDraw, ...
- 关于Hibernate级联更新插入信息时提示主键不为空的问题“org.hibernate.StaleStateException: Batch update returned unexpected row count from update: 0 actual row count: 0 expected: 1 ”
org.hibernate.StaleStateException: Batch update returned unexpected row count from update: 0 actual ...
- TabLayout下划线指示器自适应文字宽度
解决方案1: 更新design库到28.0.0-rc01 implementation 'com.android.support:design:28.0.0-rc01' 然后在TabLayout里设置 ...
- php中生成透明背景png缩略图程序
/** *$sourePic:原图路径 * $smallFileName:小图名称 * $width:小图宽 * $heigh:小图高 */function pngthumb($sourePic,$s ...
- JavaScript·DOM,BOM
YI.DOM 1.创建DOM 2.删除DOM 3.文档碎片 文档碎片可以提高DOM操作性能(理论上) 文档碎片(类似于一个口袋,先将多个元素放在口袋里,放完之后,再将口袋放到最终要插入的元素中): d ...
- element UI 下拉菜单滚动监听（vue指令）
直接看代码吧,可以直接粘贴此代码到你的编辑器中看效果. <template> <div class="page-component"> <div cl ...
- DatePickerAndroid用法
一.代码/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import ...