<!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制作图片切换的更多相关文章

  1. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...

  2. jquery实现图片切换和js实现图片切换

    jquery实现图片切换: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  3. JS美女图片切换带视觉差

    使用JS实现,多张图片动态切换查看效果:http://hovertree.com/texiao/js/21/ 效果图: 转自:http://hovertree.com/h/bjaf/iamhxcyk. ...

  4. js手风琴图片切换实现原理及函数分析

    关键词: js手风琴 js百叶窗 js百页窗 实现原理解读 使用两层for循环实现, 第一层有三个功能,分别给第个li: 添加索引 预设位置 添加事件 第二层有两个功能,整理图片位置: 鼠标的li,以 ...

  5. js 插入图片切换,innerHTML

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  6. Node.js制作图片下载爬虫的一般步骤

    图片下载爬虫分两部分:爬页面和下载图片. 爬页面时先看网址是https还是http的,然后选择不同的内置对象: 其次看编码,如果是charset=gb2312的网页就需要iconv帮忙转码,好在大部分 ...

  7. flash8中利用遮罩制作图片切换效果

    http://www.56.com/w73/play_album-aid-8642763_vid-NDY5ODU2Mzg.html

  8. js简单图片切换

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

  9. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

随机推荐

  1. java 秒时间格式化

    public static String durationFormat(Integer totalSeconds) { if (totalSeconds == null || totalSeconds ...

  2. MySQL行转列、列转行

    一.行转列 有如图所示的表,现在希望查询的结果将行转成列 建表语句如下: CREATE TABLE `TEST_TB_GRADE` ( `ID` int(10) NOT NULL AUTO_INCRE ...

  3. unigui的页面布局使用

    (unigui的页面布局还是很强大的,基本什么的排版都能搞好.前面部分为原文章翻译,翻译不一定很准确,就能看吧,后面有使用说明,有什么不明白的欢迎加我QQ(910300653)一起交流学习) 一.布局 ...

  4. pytest自动化4:fixture之yield实现teardown

    出处:https://www.cnblogs.com/yoyoketang/p/9401554.html 前言: 上一篇介绍了fixture通过scope参数控制setup级别,我们一起来温故下fix ...

  5. selenium中切换浏览器不同tab 的操作

    from selenium import webdriverimport timedriver=webdriver.Chrome()driver.get('http://ui.imdsx.cn/uit ...

  6. KendoUi 学习笔记一

    本系列主要是记录KendoUI的学习过程. KendoUi的特点有以下特点: 1. 70+UI控件 控件有DataGrids,DropDowns,Menus和Buttons,还有一些商业的控件,比如C ...

  7. c/c++ 栈与队列实现车库的出入与收费

      /* 设停车场是一个可停放n辆车的狭长通道,且只有一个大门可供汽车进出.汽车在停车场内按车辆到达时间的先后顺序,依次由北向南排列 (大门在最南端,最先到达的第一辆车停放在车场的最北段),若停车厂内 ...

  8. 修改权限linux

    1.更改目录所有者命令:chown -R 用户名称 目录名称2.更改目录权限命令:chmod -R 755 目录名称 nginx在不同目录下需要给与全部权限才可以

  9. Redis学习笔记一

    Redis 与其他 key - value 缓存产品有以下三个特点:    Redis支持数据的持久化,可以将内存中的数据保存在磁盘中,重启的时候可以再次加载进行使用.    Redis不仅仅支持简单 ...

  10. Datediff的使用(统计本日,昨日,本周,本月)

    //统计本日,昨日,本周,本月添加的产品总数 //日期            DateTime DT = DateTime.Now;            string day=DT.Date.ToS ...