<!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. Swift学习之道

    Swift是苹果公司2014年推出的,用来撰写OSX和iOS应用程序的 2014年在Apple WWDC发布 可以与OC互相调用. Swift的特点:让应用开发简单,更加稳定,但是和OC的语法不是一般 ...

  2. centos7 eclispe 编译C++遇到的问题总结

    最近由于工作的需要,又开始回归之前已经遗忘了的技术.arm嵌入式这个古老的名词. 开始选择了linuxminit,开始的linuxminit17以前还可以,可是用了一下linuxminit19,发现r ...

  3. Ubuntu16.04安装MongoDB的Ruby驱动

    背景: 1. ruby的安装方式:sudo apt-get install ruby 2. mongod服务已开启 3. ruby版本:2.3, gem已安装 安装驱动的步骤: 1. gem inst ...

  4. Vmware Vsan 部署中如何将非SSD 硬盘标识为SSD

    通过SSH 登录ESXi主机 # esxcli storage nmp device list #查询ESXI 发现的存储设备 #   esxcli storage nmp satp rule add ...

  5. SpringCloud系列------Config-Server

    关于Config-Server的那些事&踩过的坑! 一.概述 在一个相对成熟,高可用的Spring cloud项目中,都会配置一个配置中心去管理各个服务的配置文件,而往往配置文件不会放到本地配 ...

  6. 责任链模式（Chain of Responsibility)

    定义:为一个请求定义含有链状关系的接受对象,基于请求的类型,松耦合发送者和接受者之间的关系. 实现方式: 首先定义一个抽象类,包括一个公共抽象行为和决定子类链状关系的属性,然后创建一系列对象继承这个抽 ...

  7. Liunx find/locate/whereis/which 总结

    一.locate 命令 是一个文件查找命令,命令所属软件包 mlocate 不同于 find 命令的是,find命令在整块磁盘中搜索:而 locate命令 在数据路库文件中搜索,当天创建的文件第二天才 ...

  8. 使用VMware 虚拟linux系统环境

    操作步骤说明: https://jingyan.baidu.com/album/f71d603782e70e1ab641d1da.html?picindex=1 vmware 克隆多个系统: http ...

  9. java 每间隔一段时间执行一段代码

    Java中java.util.Timer类中有若干个schedule的重载方法,其中 void schedule(TimerTask task, long delay, long period ) 安 ...

  10. 从网络上获取图片，并写入excel文件

    package com.weChat.utils; import com.manage.utils.DateUtil;import com.manage.utils.MD5Util;import or ...