先附图：

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. MQTT协议实现Eclipse Paho学习总结二

    一.概述 前一篇博客(MQTT协议实现Eclipse Paho学习总结一) 写了一些MQTT协议相关的一些概述和其实现Eclipse Paho的报文类别,同时对心跳包进行了分析.这篇文章,在不涉及MQ ...

  2. 12.Weblogic 弱口令 && 后台getshell漏洞

    利用docker环境模拟了一个真实的weblogic环境,其后台存在一个弱口令,并且前台存在任意文件读取漏洞. 分别通过这两种漏洞,模拟对weblogic场景的渗透. Weblogic版本:10.3. ...

  3. 7.30实习培训日志-SQL优化

    总结 今天早上考试,下午主要是老师引导我们学习SQL优化,晚上主要是同学的技术分享,杨松柏同学主要给我们分享了java的io的一些东西,c10k问题,bio(同步阻塞IO),NIO(同步非阻塞IO), ...

  4. Unity 分场景打包

    分场景打包步骤:导入unity中AB包后 1: 指定场景  2: 指定abname  3: 指定objinabname  4: 协同  5: 委托 void string unity 先引入命名空间  ...

  5. jquery事件之事件

    事件名 说明 语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器) blur() 获得失去鼠标光标焦点事件 jQueryObject.blur( [ ...

  6. [Xcode 实际操作]三、视图控制器-(12)在Storyboard中使用集合控件

    目录:[Swift]Xcode实际操作 本文将演示集合控件在故事板中的使用. 在控制器根视图上点击鼠标,以选择该根视图. 现在往根视图中添加一个集合视图. 点击[库面板]图标,打开控件库面板 在控件库 ...

  7. linux下oracle一些常用命令

    dbca 配置数据库netca 配置tnslsnrctl status tns状态lsnrctl stop TNS停止lsnrctl start TNS启动

  8. HDFS（Hadoop Distributed File System ）hadoop分布式文件系统。

    HDFS(Hadoop Distributed File System )hadoop分布式文件系统.HDFS有如下特点:保存多个副本,且提供容错机制,副本丢失或宕机自动恢复.默认存3份.运行在廉价的 ...

  9. 原生 Ajax 封装 和 Axios 二次 封装

    AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...

  10. 求最短路径(Bellman-Ford算法与Dijkstra算法)

    前言 Dijkstra算法是处理单源最短路径的有效算法,但它局限于边的权值非负的情况,若图中出现权值为负的边,Dijkstra算法就会失效,求出的最短路径就可能是错的.这时候,就需要使用其他的算法来求 ...