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焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
随机推荐
- rtp传输音视频(纯c代码)
参考链接: 1. PES,TS,PS,RTP等流的打包格式解析之RTP流 https://blog.csdn.net/appledurian/article/details/73135343 2. ...
- Hello vue.js的随笔记录
数据双向绑定的script在组件定义位置后面才顶用. 使用它的话,引用js就好,比较简单. 声明一个vm对象,new Vue({}).这个构造里传一个对象,包含el:界面元素,data:数据,meth ...
- Python字典的使用与处理
在Python中,字典{dict}是比较常用的一个数据类型,使用键-值(key-value)存储 与列表[list]相比,字典具有极快的查找和插入速度,不会随着key-value的增加而变慢,但是相应 ...
- 后台管理系统之“图片上传” --vue
图片上传(基于vue) 相信上传图片是所有系统必备的功能吧,工作中的第一个管理系统就在上传图片的功能上卡顿了一整天. 当时用的elementUI组件,但是由于样式和设计图样式差别较大再加上原生相较好理 ...
- Hyperledger Fabric channel配置交易
一个超级账本区块链网络里每个channel的共享配置都是存储在一个配置交易里.每个配置交易通常被简称为configtx. Channel 配置有以下重要属性: 1.有版本标识:配置里的所有元素都有一个 ...
- 微信小程序scroll-view滚动一次多次触发的问题解决方案
最近使用微信小程序开发的时候,需要用scroll-view的bindscrolltolower事件,控制加载下一页的内容.但是发现在ios里,下拉滚动一次,事件触发两次,导致重复加载数据. 经过百度和 ...
- 虚机配置vip命令行配置
测试脚本:import osimport re import urllib from BaseHTTPServer import HTTPServer, BaseHTTPRequestHandler ...
- 命令行窗口中使用pip安装第三方库成功之后，在pycharm中仍不能使用
在学习廖老师的Python教程的时候,遇到命令行窗口中使用pip安装第三方库成功之后,在pycharm中仍不能使用的情况, 这种情况可能是由于在本地安装了多个Python版本的缘故(只是可能的情况之一 ...
- 高性能JavaScript（1）
---------------------------------------------------------------------------------------------------- ...
- 两种语言实现设计模式（C++和Java）（三：策略模式）
策略模式是指定义一系列的算法,把它们一个个封装起来,并且使它们可相互替换.本模式使得算法可独立于使用它的客户而变化.也就是说这些算法所完成的功能一样,对外的接口一样,只是各自实现上存在差异.用策略模式 ...