先附图：

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. 1.2 xss原理分析与剖析(3)

    0×01 第三方劫持 (外调J/C): 本方法是我看长短短贴代码时知晓的,这篇文章我只是把这个攻击手法整理了出来,来说明这个漏洞,这个攻击手法并不是我发现的,我也不是太清楚是谁.“第三方劫持”就是把资 ...

  2. redis学习总结2

    redis配置文件说明:以下这篇文章已经说明的很明白了.感谢~ http://blog.sina.com.cn/s/blog_636415010101970j.html

  3. Ubuntu12.04安装svn1.8

    先在终端执行sudo sh -c 'echo "# WANdisco Open Source Repo" >> /etc/apt/sources.list.d/WANd ...

  4. MVC下使用日期控件

    初学MVC,使用日期控件的时候发现不是特别理想,本来是想直接使用JQuery的日期控件的,发现支持的不是很好,type类型要改成date才能使用,而且编辑的时候使用@Html.EditFor也不能绑定 ...

  5. InnoDB信息说明

    InnoDB是MySQL数据库发展至今一款至关重要的数据库存储引擎,其不仅支持事务特性,并且具有丰富的统计信息,便于数据库管理人员了解最近InnoDB存储引擎的运行状态. 早期版本的InnoDB存储引 ...

  6. rxjs入门6之合并数据流

    一 concat,merge,zip,combineLatest等合并类操作符 以上操作符在版本6中已经只存在静态方法,不能在pipe中使用. import {concat,merge,zip,com ...

  7. Java之Spring Boot详解(非原创）

    文章大纲 一.Spring Boot 概述二.Spring Boot 入门案例三.Spring Boot核心功能代码实战四.项目源码与资料下载五.参考文章   一.Spring Boot 概述 1. ...

  8. 初识Composer

    关于vendor name和project name的区别? 包名(package name)包含了供应商名(vendor name)和项目名(project name)是为了避免命名冲突的 requ ...

  9. How to modify rosbag？如何修改rosbag？

    Ubuntu16.04,kinetic 本文示例修改使用rosbag中的frame id 在http://wiki.ros.org/bag_tools中,能找到 change_camera_info. ...

  10. 2018上海大都会邀请赛J（数位DP）

    #include<bits/stdc++.h>using namespace std;int num[20];//按位储存数字int mod;long long dp[20][110][1 ...