先附图：

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. CodeForces 279B Books (滑动窗口)

    题意:给定n本书的阅读时间,然后你从第 i 本开始阅读,问你最多能看多少本书在给定时间内. 析:就是一个滑动窗口的水题. 代码如下: #pragma comment(linker, "/ST ...

  2. jQuery插件AjaxFileUpload可以实现ajax文件上传

    http://blog.sina.com.cn/s/blog_55e42da60100ocvh.html

  3. [翻译]pytest测试框架（二）：使用

    此文已由作者吴琪惠授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 调用pytest 调用命令: python -m pytest [...] 上面的命令相当于在命令行直接调用 ...

  4. MySql中存储过程的理解

    到底什么是存储过程,又为什么需要使用存储过程? 存储过程简单来说,就是为以后的使用而保存的一条或多条MySQL语句的集合,可将其视为批文件,虽然它们的作用不仅限与批处理. 使用存储过程有3个主要的好处 ...

  5. 发邮件的python脚本

    1. 编写一个最简单的发邮件的python脚本   #coding: utf-8 import smtplib from email.mime.text import MIMEText from em ...

  6. 清北刷题冲刺 11-03 p.m

    三向城 #include<iostream> #include<cstdio> using namespace std; int n,x,y; int main(){ freo ...

  7. 清北刷题冲刺 10-30 a.m

    星空 #include<iostream> #include<cstdio> using namespace std; int n,m; int main(){ freopen ...

  8. 洛谷P1033 自由落体

    P1033 自由落体 题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,…．n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算公 ...

  9. 洛谷P3128 [USACO15DEC]最大流Max Flow

    P3128 [USACO15DEC]最大流Max Flow 题目描述 Farmer John has installed a new system of N-1N−1 pipes to transpo ...

  10. mybatis复习01

    1.mybatis的历史: mybatis是apache的一个开源项目,2010被google收购,转移到google code. mybatis是一个优秀的持久层框架,对jdbc操作进行了封装,是操 ...