<!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. 独家！DevExpress VCL Controls 2019发展路线图（No.1）

    [DevExpress VCL Controls下载] 根据调查结果和反馈,DevExpress官方团队最终确定了DevExpress VCL Controls 2019年的路线图. 关于调查结果的重 ...

  2. DAY:3 列表

    列表元素提取 mes = ["北京","哈尔滨","长春","沈阳","天津"] print(mes ...

  3. L360 Most People Spend Their Time in Just 25 Places

    Some people are always out on the town, going to concerts, restaurant openings, you name it. They're ...

  4. better-scroll

    better-scroll会将默认事件阻止掉,如果自己写的部分需要有点击事件,需要在参数里加上click:true. 同时,在PC上或某些手机端,由于未成功将touchend事件move掉,点击事件会 ...

  5. CenOS 更换yum源

    说明: 更换CentOS yum源既是修改配置文件/etc/yum.repos.d/CentOS-Base.repo. 目前有很多公司都提供yum源文件的下载,所以我们可以不需要去修改这个文件,直接从 ...

  6. python笔记2——关于列表的使用

      一.列表的一些基本用法 names=["XiaoNaiyou", "XiaoNan", "WeiZhen", "WuCheng ...

  7. Supervisor使用(启动nginx/tomcat/redis)

    官方文档:http://supervisord.org/   一.安装 yum install -y supervisor   二.开机自启动 执行以下命令: systemctl enable sup ...

  8. Neural Network Programming - Deep Learning with PyTorch - YouTube

    百度云链接: 链接:https://pan.baidu.com/s/1xU-CxXGCvV6o5Sksryj3fA 提取码:gawn

  9. unzip解压war包并覆盖

    unzip -o blog.war -d BLOG 参数: -o 不进行询问直接覆盖 -d 压缩文件解压到BLOG文件夹下 详细使用语法: unzip [-Z] [-opts[modifiers]] ...

  10. CSS盒子内容

    内边距 内边距(padding):内容与边框之间的距离 注意:padding 只能移动盒子的内容 padding属性联写: padding: 10px: 内边距的上下左右都移动 padding: 10 ...