<!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. 多线程之 Thread类

    一.多线程第一种方式的实现步骤(继承Thread类) 代码演示: 1.定义MyThread类,继承Thread类 2.重写了里面的run方法,在run方法中定义线程要执行的任务 public clas ...

  2. 俄罗斯方块win c 图形线程

    环境准备:visual stdio 2015,easyx, //

  3. angular 定时函数

    注入$interval,$timeout   服务 2.定义函数 var aa = $interval(function(){ $timout(function(){ ..... }) },,定时时间 ...

  4. Excel汉字转换拼音首字母缩写的函数

    打开Excel->工具->宏->Viaual Basic编辑器在弹出来的窗口中对着VBAproject点右键->插入->模块下面会出现一个名为"模块1" ...

  5. 对低开销的静态组件使用v-once

    <body> <div id="app"> <terms-of-service></terms-of-service> </d ...

  6. node.js学习5--------------------- 返回html内容给浏览器

    /** * http服务器的搭建,相当于php中的Apache或者java中的tomcat服务器 */ // 导包 const http=require("http"); cons ...

  7. centos7.4 调整根目录大小

    由于系统初始时根目录一般空间为50左右 有时会被占满,而/home目录却有大量空间 这里需要调整: 1.终止占用 /home 进程 fuser -m -v -i -k /home​ 2.备份/home ...

  8. python基础—字典的使用{}

    info = {'stu1':"lili", 'stu2':'yoyo', 'stu3':'dudu'}print(info)print(info['stu1'])info['st ...

  9. Delphi编程之爬取贴吧多页帖子图片

    接着上一篇文章说一下我们如何爬取多页帖子的图片. 第一步,还是随便找个贴吧,这次我们就找图片相对较少的射雕英雄传吧. 把页面拉到最底下,在页码区域单击右键,选择检查. 在这里我们看到了页码的代码区域, ...

  10. jq常用

    1.文本框.密码框.隐藏域.文本域(id换成对应的,value属性存在,才能利用attr(‘value’) 获取值,否则返回undefined): 1.1 获取—>$(“#text”).val( ...