<!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. js面向对象1----了解构造函数

    一.构造函数与实例的区别 1 构造函数  构造函数主要是一种用于生成对象的饼干模具,这些对象具有默认属性和属性方法,它可以创建多个共享特定特性和行为的对象.  构造函数只是一个函数,但当函数遇到了ne ...

  2. python一切皆对象的理解

    min_error=pls(x_train, x_test, y_train, y_test) #这里我之前写的是error,但是前面有一个定义的error函数.所以导致出现了警告. 可能是因为pyt ...

  3. JS学习笔记 - fgm练习 - 输入法下拉框 三元表达式

    <script> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; va ...

  4. [算法系列之二十七]Kruskal最小生成树算法

    简单介绍 求最小生成树一共同拥有两种算法,一个是就是本文所说的Kruskal算法,还有一个就是Prime算法. 在具体解说Kruskal最小生成树算法之前,让我们先回想一下什么是最小生成树. 我们有一 ...

  5. [Ramda] Pluck & Props: Get the prop(s) from object array

    Pluck: Get one prop from the object array: R.pluck(}, {a: }]); //=> [1, 2] R.pluck()([[, ], [, ]] ...

  6. [array] leetCode-1-Two Sum-Easy

    leetCode-1-Two Sum-Easy descrition Given an array of integers, return indices of the two numbers suc ...

  7. GAS Syntax

    GAS or GNU as syntax is a different form of syntax for assembly language files, known also as AT& ...

  8. hdu Minimum Transport Cost(按字典序输出路径)

    http://acm.hdu.edu.cn/showproblem.php? pid=1385 求最短路.要求输出字典序最小的路径. spfa:拿一个pre[]记录前驱,不同的是在松弛的时候.要考虑和 ...

  9. 算法练习--二分搜索哈希表-JS 实现

    1. 以哈希KEY的值建立二叉哈希表 2. 依据传入的哈希值使用二分法搜索 详细实现例如以下: function binarySearchTable(comp){ this.comp = comp; ...

  10. Android 图片压缩，基于比例和质量压缩

    package cc.util.android.image; import java.io.ByteArrayOutputStream; import java.io.File; import jav ...