先附图：

CSS样式部分：

<style>

    *{margin:; padding:}

    body{font-family:'Microsoft YaHei';}

    .menu{margin:20px auto 0; width:550px; text-align: center;}

    .menu h4{font-weight:normal; line-height:50px;}

    #xh{margin: auto 30px;}

    #sx{margin: auto 30px;}

    #tab{width:550px; height:380px;border:10px solid darkgray; position:relative; margin:0 auto;}

    #tab a{width:40px; height:40px; background: black; color:white; position:absolute; top:160px; font-size: 28px;text-align:center;opacity:0.6; filter:alpha(opacity=60);}

    #tab a:hover{opacity:0.8; filter:alpha(opacity=80);}

    #spanID{width:550px;height:20px; line-height:20px;background:black; color: white; position:absolute; text-align:center; opacity:0.8; filter:alpha(opacity=80);}

    #prev{left:10px; cursor:pointer;}

    #next{right:10px; cursor:pointer;}

    #pId{width:550px;height:30px; line-height:30px; background:black; text-align:center;position:absolute; bottom:0px; color:white;opacity:0.8; filter:alpha(opacity=80);}

    #imgID{width:550px; height:380px;}

</style>

JS代码部分：

<script>

    var oXh = $('xh');

    var oSx = $('sx');

    var oText = $('text');

    var oSpanId = $('spanID');

    var oPrev = $('prev');

    var oNext = $('next');

    var oImgID = $('imgID');

    var OPId = $('pId');

    var arr = ['images/tab/1.jpg','images/tab/2.jpg','images/tab/3.jpg','images/tab/4.jpg'];

    var arrPid = ['这是第一张','这是第二张','这是第三张','这是第四张'];

    var num = 0;

    var onOff = true;

    //循环切换事件

    oXh.onclick = function () {

        onOff = true;

        oText.innerHTML = '图片循环切换';

        oText.style.color = 'red';

    }
　　//顺序切换事件

    oSx.onclick = function () {

        onOff = false;

        oText.innerHTML = '图片顺序切换';

        oText.style.color = 'blue';

    }

    //默认显示第一张图片

    function funTab(){

        oImgID.src = arr[num];

        OPId.innerHTML = arrPid[num];

        oSpanId.innerHTML = (num+1) +'/'+ (arr.length);

    }

    funTab();

    //下一张

    oNext.onclick = function(){

        num++;

        if(num == arr.length){

            if(onOff == true){

                num = 0;

            } else {

                num = arr.length-1;

                alert('已经到了最后一张了，~ ~!');

            }

        }

        funTab();

    }

    //上一张

    oPrev.onclick = function(){

        num--;

        if(num == -1){

            if(onOff == false){

                num = 0;

                alert('这已经是第一张了，~ ~!');

            } else{

                num = arr.length-1;

            }

        }

        funTab();

    }

    //ID调用通用函数

    function $(id){

        return document.getElementById(id);

    }

</script>

html部分：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="utf-8">

    <title>轮播切换</title>

</head>

<body>

    <div class="menu">

        <input id="xh" type="button" value="循环播放">

        <input id="sx"  type="button" value="顺序播放">

        <h4 id="text">请选择切换模式</h4>

    </div>

    <div id="tab">

        <span id="spanID">加载中......</span>

        <a id="prev" herf="javascript:;"><</a>

        <a id="next" herf="javascript:;">></a>

        <img id="imgID" src="图片加载中.....">

        <p id="pId">加载中......</p>

    </div>

</body>

</html>

JS案例练习：图片切换+切换模式的更多相关文章

  1. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  2. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  3. CSS3图片翻转切换案例及其中重要属性解析

    图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...

  4. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  5. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  6. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  7. js自增图片切换

    使用js自增进行图片的切换 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  8. 原生JS实现图片循环切换

    <!-- <!DOCTYPE html> <html> <head> <title>原生JS实现图片循环切换 —— 方法一</title&g ...

  9. 利用JS实现点击按钮后图片自动切换

    我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)< ...

随机推荐

  1. Entity Framework Code-First（9.8）：DataAnnotations - Column Attribute

    DataAnnotations - Column Attribute: Column attribute can be applied to properties of a class. Defaul ...

  2. 【转】‘svn’不是内部或外部命令，也不是可运行的程序

    解决方法:windows安装svn的时候默认是不安装 svn command line这个东西的,重新打开svn的安装exe,选择modify,将“command line client tools” ...

  3. 【Qt文档阅读】Window and Dialog Widgets

    Window and Dialog Widgets 没有嵌入到父控件中的控件(widget)称之为窗口(window).通常窗口带有边框和标题栏. Windows通常集成到桌面环境中,并且在某种程度上 ...

  4. 微信小程序自学第一课:工程目录结构与.json文件配置

    注册成为开发者 地址: https://mp.weixin.qq.com/cgi-bin/wx 开发者工具下载地址 https://mp.weixin.qq.com/debug/wxadoc/dev/ ...

  5. 【TMF eTOM】业务流程框架介绍

    TMF文档版权信息 Copyright © TeleManagement Forum 2013. All Rights Reserved. This document and translations ...

  6. 【Android-stdio-appdemo搭建记录】

    1-如何删除存在的工程 2-创建Android项目 next设置app兼容最低版本:api15--android 4.0以上 创建活动页面 设置活动页面的名称 创建成功项目以后会有最基本的layout ...

  7. Java学习笔记（一）语法

    基本语法 大小写敏感 类名:对于所有的类来说,类名的首字母应该大写 方法名:所有的方法名都应该以小写字母开头.如果方法名含有若干单词,则后面的每个单词首字母大写. 源文件名:源文件名必须和类名相同.当 ...

  8. Jupyter导出PDF从入门到绝望（已解决）

    Jupyter导出PDF从入门到绝望(已解决) 问题描述 我在使用jupyter lab的时候,想要把我的代码和结果导出成pdf格式的(由于里面有图片,所以不想导出成html).然后报错: 然后我用p ...

  9. k8s缩放应用程序

    参考:https://kubernetes.io/docs/tutorials/kubernetes-basics/ 步骤1:扩展部署 要列出部署,请使用GET部署命令:kubectl get dep ...

  10. hutool java工具架包功能介绍

    https://blog.csdn.net/lx1309244704/article/details/76459718