<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

  <style rel="stylesheet" type="text/css">

  .expert{float:left;height:134px;width:300px;overflow:hidden;}

  .expert01,.expert02{float:left}

   .important{float:left;width:900%}/*备用宽度范围*/

  p{display:inline-block;}

  .mainimage{float:left;}

.mainimage img{width:700px;height:300px;display:inline-block;}

  </style>

 </head>

 <body>

 <!--图片滚动-->

  <div class="expert">

  <div class="important">

  <div class="expert01">

  <p><img src="hospital/image/20140500003.jpg"/></p>

    <p><img src="hospital/image/20140500004.jpg"/></p>

    <p><img src="hospital/image/20140500005.jpg"/></p>

  </div>

  <div class="expert02"></div>

</div>

  </div>

  <br/>

<div style="clear:both;"></div>

  <br/>

  <!--图片轮播-->

<div class="mainimage" onmouseover = "clr()" onmouseout="rset()">

<a href="#"><img class="cap01"  style="display:inline-block;" src="hospital/image/caption01.jpg" alt="caption01"/></a>

<a href="#" ><img class="cap02"  style="display:none;" src="hospital/image/caption02.jpg" alt="caption02"/></a>

<a href="#"><img class="cap03"  style="display:none;" src="hospital/image/caption03.jpg" alt="caption03"/></a>

<a href="#"><img class="cap04"  style="display:none;" src="hospital/image/caption04.jpg" alt="caption04"/></a>

</div>

 </body>

</html>

<script>//图片滚动

var speed=10; //数字越大速度越慢

var tab=document.getElementsByClassName("expert")[0];

var tab1=document.getElementsByClassName("expert01")[0];

var tab2=document.getElementsByClassName("expert02")[0];

tab2.innerHTML=tab1.innerHTML;//注意把该script放在后边，因为调用了innerHTML属性，需要等全部文档加载完成才行

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft<=0)

	{tab.scrollLeft-=tab1.offsetWidth;

	}

else{

tab.scrollLeft++;

}

}

var MyMar=setInterval("Marquee()",speed);

tab.onmouseover=function() {clearInterval(MyMar)};//简单的事件触发函数

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

//图片轮播

var i = 0;

	function switchimg(){

		i++;

	var a = document.getElementsByClassName("cap01")[0];

	var b = document.getElementsByClassName("cap02")[0];

	var c = document.getElementsByClassName("cap03")[0];

	var d = document.getElementsByClassName("cap04")[0];

	if(i == 4){

	i = 0;

	}

	switch(i){

	case 0:

	a.style.display = "inline-block";

	b.style.display = "none";

	c.style.display = "none";

	d.style.display = "none";

	break;

	case 1:

	a.style.display = "none";

	b.style.display = "inline-block";

	c.style.display = "none";

	d.style.display = "none";

	break;

	case 2:

	a.style.display = "none";

	b.style.display = "none";

	c.style.display = "inline-block";

	d.style.display = "none";

	break;

	case 3:

	a.style.display = "none";

	b.style.display = "none";

	c.style.display = "none";

	d.style.display = "inline-block";

	break;

		}

		};

	var swimg = setInterval("switchimg()",2000);

	function clr(){clearInterval(swimg);}

	function rset(){

		swimg =setInterval("switchimg()",2000);

		}

 </script>

　　

javaScript实现图片滚动及一个普通图片轮播的代码的更多相关文章

  1. hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果

    hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/  查找和下载. hamme ...

  2. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  3. 自适应图片宽度的jQuery焦点幻灯轮播代码

    自适应图片宽度的jQuery焦点幻灯轮播代码 注意要1.7.2版本的jq才支持点击后显示点击的图片,不然就是一直顺序播放 演示   XML/HTML Code <div id="sli ...

  4. 基于jquery带时间轴的图片轮播切换代码

    基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="decoroll2 ...

  5. Taro -- Swiper的图片由小变大3d轮播效果

    Swiper的图片由小变大3d轮播效果 this.state = ({ nowIdx:, swiperH:'', imgList:[ {img:'../../assets/12.jpg'}, {img ...

  6. SuperIndicator 一个专用打造轮播的类库

    Github地址:https://github.com/hejunlin2013/SuperIndicator,欢迎fork,star.著名Android-Universal-Image-Loader ...

  7. jquery做一个小的轮播插件---有BUG，后续修改

    //首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...

  8. C#跑马灯，图片滚动，后台获取图片地址。动态绑定图片，imag显示文字

    下面附下载地址. http://download.csdn.net/download/njxiaogui/10002058 1.跑马灯效果,图片连续循环滚动,图片下面并可附文字描述,图片是从数据库中获 ...

  9. 使用JavaScript制作一个好看的轮播图

    目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...

随机推荐

  1. 微信支付v2开发(10) 全网发布

    关键字:微信公众平台 微信支付 全网发布 作者:方倍工作室 原文:http://www.cnblogs.com/txw1958/p/wxpay-publish.html 在这篇微信公众平台开发教程中, ...

  2. React-怎么写好组件-简单

    数据层:用来决定按钮的个数以及按钮是否选择. 表现层(展示层):按钮使用现有的ui 组件. 逻辑层(业务层):按钮事件等逻辑处理.

  3. 【河南省多校脸萌第六场 A】巴什博弈？

    [链接]http://acm.nyist.me/JudgeOnline/problem.php?cid=1013&pid=5 [题意] 在这里写题意 [题解] 0..a-1 YES a..a+ ...

  4. 编程——C语言的问题,堆栈

    堆和栈的区别一.预备知识—程序的内存分配一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结 ...

  5. Python中的Sets数据结构

    Python的set和其他语言类似,是一个无序不重复元素集,基本功能包括关系测试和消除重复元素.集合对象支持union(联合),intersection(交),difference(差)和sysmme ...

  6. BigBoss按键映射

    // BigBoss: SBSettings Toggle Spec 按键映射 http://thebigboss.org/guides-iphone-ipod-ipad/sbsettings-tog ...

  7. Visual studio编译器窗体重置

    针对vs2003: 第一种方法 在"工具"->"选项"对话框里面:  在"选项"以下的"常规"有个"重置 ...

  8. 中间件、服务器和Web服务器三者的区别

    相信很多的Web安全初学者和我一样,对中间件和服务器的认识不够深刻,对两者的概念可能会有所混淆. 正好今天在学习的时候突然想到了这个问题,粗略百度了一下,似乎网上对这个问题的解释不多,那么就由我来为大 ...

  9. 【例题5-8 UVA - 400】Unix ls

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 设n个字符串中出现的最长的为len; 最后一列能容纳len个字符,然后前面的列能容纳len+2个字符. 每行最多60个字符. 按照这 ...

  10. [RxJS] AsyncSubject: representing a computation that yields a final value

    This lesson will teach you about AsyncSubject, another type of Subject with some replaying logic ins ...