<!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 ...