<!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. 1.Dubbo教程

    转自:https://blog.csdn.net/hellozpc/article/details/78575773 2. 什么是dubbo 2.1. 简介 DUBBO是一个分布式服务框架,致力于提供 ...

  2. 微信支付v2开发(9) 标记客户投诉处理状态

    本文介绍微信支付中如何标记客户投诉的处理状态. 一.API Api 的 url 为: https://api.weixin.qq.com/payfeedback/update?access_token ...

  3. PatentTips - Adaptive algorithm for selecting a virtualization algorithm in virtual machine environments

    BACKGROUND A Virtual Machine (VM) is an efficient, isolated duplicate of a real computer system. Mor ...

  4. 深度学习利器： TensorFlow系统架构及高性能程序设计

    2015年11月9日谷歌开源了人工智能平台TensorFlow,同时成为2015年最受关注的开源项目之一.经历了从v0.1到v0.12的12个版本迭代后,谷歌于2017年2月15日发布了TensorF ...

  5. Javascript和jquery事件--滚动条事件和自定义滚动条事件样式

    很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默 ...

  6. 2013腾讯编程马拉松初赛第〇场(HDU 4503) 湫湫系列故事——植树节

    http://acm.hdu.edu.cn/showproblem.php?pid=4503 题目: 已知湫湫的班里共有n个孩子,每个孩子有Bi个朋友(i从1到n),且朋友关系是相互的,如果a小朋友和 ...

  7. 数据结构-堆实现优先队列(java)

    队列的特点是先进先出.通常都把队列比喻成排队买东西,大家都非常守秩序,先排队的人就先买东西. 可是优先队列有所不同,它不遵循先进先出的规则,而是依据队列中元素的优先权,优先权最大的先被取出. 这就非常 ...

  8. js进阶 12-14 jquery的事件触发函数是哪两个

    js进阶 12-14 jquery的事件触发函数是哪两个 一.总结 一句话总结:trigger和triggerHandler 1.trigger传额外参数时候的注意事项是什么? 注意样例中是三个参数 ...

  9. vagrant 的安装与使用

    1. 安装 ubuntu 安装vagrant过程 ubuntu 安装 vagrant 时需要首先安装 virtualbox: (1)下载安装与当前 ubuntu 版本相适应的 virtualbox 安 ...

  10. 连接mongodb，kafka异步处理代码

    1. mongodb异步处理 依赖: <dependencies> <dependency> <groupId>org.mongodb</groupId> ...