<!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. 纯C++实现的HTTP请求封装（POST/GET）

    纯C++实现的HTTP请求(POST/GET),支持windows和linux, 进行简单的封装, 方便调用.实现如下: #include "HttpConnect.h" #ifd ...

  2. JQuery源码解析 目录

    1. a.$查询符号就是放在沙盒里面的: window.jQuery = window.$ = jQuery; b.一个jQuery对象无 new 构造: eg: $("#text" ...

  3. 使用Docker来运行WebApp

    原文:使用Docker来运行WebApp (作者:陈玓玏) 1.加载镜像到容器并运行webapp脚本 先进入管理员模式: su root 然后使用已有的webapp镜像来练习在docker上运行web ...

  4. 洛谷 P2969 [USACO09DEC]音符Music Notes

    P2969 [USACO09DEC]音符Music Notes 题目描述 FJ is going to teach his cows how to play a song. The song cons ...

  5. [Angular] Protect The Session Id with https and http only

    For the whole signup process. we need to Hash the password to create a password digest Store the use ...

  6. uva 10098 Generating Fast(全排列)

    还是用的两种方法,递归和STL,递归那个是含有反复元素的全排列,这道题我 没有尝试没有反复元素的排列,由于从题目上并没有发现一定是有反复元素的() 贴代码: <span style=" ...

  7. echarts+百度地图+vue 填坑记（一）（百度地图、鼠标移入移出标注,信息框会产生闪烁）

    大概七月底开始实习,到现在经历了两个完整的项目(c2b). 因为开发时间紧,任务重,所以在开发过程踩到的坑都没时间去记录. 现在在开发一个某链运输监控系统,到了收尾阶段,有时间写博客了!开心! 一.鼠 ...

  8. 关于python的拷贝

    https://blog.csdn.net/koukehui0292/article/details/82993958 Python的 深度拷贝: import copy d=copy.deepcop ...

  9. ganglia错误解决

    1.      运行: 解决: 这时重新启动gmetad,输入命令: service gmetad stop 显示: Shutting down GANGLIA gmetad:             ...

  10. 步步为营（十五）搜索（一）DFS 深度优先搜索

    前方大坑预警! 先讲讲什么是搜索吧. 有一天你去一个果园摘梨子,果农告诉你.有一棵树上有一个金子做的梨子,找到就是你的,你该怎么找? 地图例如以下: S 0 0 0 0 0 0 0 0 0 0 0 0 ...