<!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. @Autowired注解与@Qualifier注解搭配使用

    问题:当一个接口实现由两个实现类时,只使用@Autowired注解,会报错,如下图所示 实现类1 实现类2 controller中注入 然后启动服务报错,如下所示: Exception encount ...

  2. elasticsearch5.0以上版本及head插件的安装

    本文转载至:https://www.cnblogs.com/hts-technology/p/8477258.html(针对5.0以上版本) 对于es5.0以下的版本可以参考:https://www. ...

  3. C#控制键盘按键(大小写按键等)的代码

    将代码过程较好的代码段做个记录,如下的资料是关于C#控制键盘按键(大小写按键等)的代码.using System;using System.Collections.Generic;using Syst ...

  4. shell练习题3

    需求如下: 请按照这样的日期格式(xxxx-xx-xx)每天生成一个文件,例如今天生成的文件为2018-10-19.log, 并把磁盘的使用情况入到这个文件,(不需要写cron,写脚本即可) 参考解答 ...

  5. for ，foreach ，map 循环的区别

    一.for循环 1.for - 循环代码块一定的次数 遍历数组最常用到的for循环,是最为熟知的一种方法 for (var i=0; i<5; i++) { x=x + "The nu ...

  6. 虚拟机 linux 没有分配id

    输入命令  $ vim /etc/sysconfig/network-scripts/ifcfg-ens33  将ONBOOT=no改为ONBOOT=yes  输入命令  $ :wq          ...

  7. elasticsearch(6) 映射和分析

    类似关系型数据库中每个字段都有对应的数据类型,例如nvarchar.int.date等等,elasticsearch也会将文档中的字段映射成对应的数据类型,这一映射可以使ES自动生成的,也是可以由我们 ...

  8. 为什么使用Nosql：Nosql和SQL的区别

    1.概念: SQL(Structured Query Language)数据库,指关系型数据库.主要代表:SQL Server.Oracle.MySQL.PostgreSQL. NoSQL(Not O ...

  9. 多渠道打包如何运行/debug指定的渠道

    如果配置了多渠道,像这里有3个,分别为flavor1,flavor2,flavor3 productFlavors { flavor1{ packageName "com.xxx.yymad ...

  10. Angular/cli 安装（windows环境）。

    1.卸载先前安装的Angular/cli npm uninstall -g angular-clinpm uninstall --save-dev angular-clinpm uninstall - ...