先附图：

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. C#对图片进行切割

    C#实例代码: /// <summary> /// 切割图片 /// </summary> /// <param name="sourceBitmap" ...

  2. .Net Core 扩展使用Refit

    .Net Core 扩展使用Refit 标签(空格分隔): 未分类 在.net core 2.1当中,目前可以是用HttpClientFactory进行Http的调用,它的使用方法我不再多说,具体参见 ...

  3. Boost Python学习笔记（二）

    你将学到什么 如何在Python中调用C++代码 如何在C++中调用Python代码 在Python中调用C++代码 首先定义一个动物类(include/animal.h) #pragma once ...

  4. 【转】vs发布msi程序详解

    源地址:http://wenku.baidu.com/link?url=MV1Mf7IukCZ0cab8AzXQoQ3MAXeUAHGz5b2IuUL4Kw-hCI90ZyBKXwKeQA3t3-SV ...

  5. 2017-10-15 NOIP模拟赛

    Stack #include<iostream> #include<cstdio> #define mod 7 using namespace std; ][],n; int ...

  6. 关于Android模块化我有一些话不知当讲不当讲

    关于Android模块化我有一些话不知当讲不当讲 最近公司一个项目使用了模块化设计,本人参与其中的一个小模块开发,但是整体的设计并不是我架构设计的,开发半年有余,在此记录下来我的想法. 关于Andro ...

  7. spring boot 使用WebSocket与前端进行byte字节数组交互

    一.装逼前先热热身 无论是比较传统的 web项目 还是近几年流行的前后端分离,后端只独立提供数据交互接口服务的项目,都避免不了数据之间交互格式的选择. 从很早之前的 xml 格式 到现在最火热的jso ...

  8. Nginx停止服务和各种命令

    1.停止Nginx服务的四种方法 从容停止服务这种方法较stop相比就比较温和一些了,需要进程完成当前工作后再停止. nginx -s quit 立即停止服务这种方法比较强硬,无论进程是否在工作,都直 ...

  9. P2746 [USACO5.3]校园网Network of Schools

    传送门 把所有学校的关系构成一个图,显然一个强联通分量的所有学校只要有一个有新软件,其他学校也都会有 考虑缩点,发现入度为 0 的块一定要给,因为没有其他人给它 入度不为 0 的块一定有其他人给,我们 ...

  10. P2062 分队问题(贪心orDP）

    题目描述 给定n个选手,将他们分成若干只队伍.其中第i个选手要求自己所属的队伍的人数大等于a[i]人. 在满足所有选手的要求的前提下,最大化队伍的总数. 注:每个选手属于且仅属于一支队伍. 输入输出格 ...