<!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. Android时间对话框TimePickerDialog介绍

    目前网上流行着很多对“时间对话框TimePickerDialog”的讲解文章,但感觉都不是很详细.这里详细对该方面的知识进行介绍,旨在帮助初学者能够快速掌握该项技术. 首先要做的是声明一个日历类的对象 ...

  2. HTML基础-第一讲

    转自:https://blog.csdn.net/likaier/article/details/326639?utm_source=blogxgwz9 HTML是网页主要的组成部分,基本上一个网页都 ...

  3. 学习笔记：Vue——动态组件&异步组件

    动态组件 01.在动态组件上使用keep-alive,保持组件的状态,以避免反复重渲染导致的性能问题. <!-- 失活的组件将会被缓存!--> <keep-alive> < ...

  4. 【Codeforces Round #450 (Div. 2) A】Find Extra One

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟. 看看Y左边或右边的点个数是否<=1 [代码] #include <bits/stdc++.h> using ...

  5. logback--How do I configure an AsyncAppender with code? 转载

    原文地址:https://github.com/tony19/logback-android/issues/54 Please provide an example of how to configu ...

  6. spyder结束死循环的方法

    Ctrl+C 用这个有时候也是不行的,因为如果一直有图片在闪,那么就是直接关了吧 之前记错了一直用ctrl+x不行 导致崩溃,不能重启spyder 但是没有敢再试

  7. Maven学习总结（16）——深入理解maven生命周期和插件

    在项目里用了快一年的maven了,最近突然发现maven项目在eclipse中build时非常慢,因为经常用clean install命令来build项目,也没有管那么多,但最近实在受不了乌龟一样的b ...

  8. 洛谷——P1011 车站

    https://www.luogu.org/problem/show?pid=1011#sub 题目描述 火车从始发站(称为第1站)开出,在始发站上车的人数为a,然后到达第2站,在第2站有人上.下车, ...

  9. PHP Web木马扫描器代码

    <?php header('content-type:text/html;charset=gbk'); set_time_limit(0);//防止超时 /** * * php目录扫描监控增强版 ...

  10. swift开发网络篇 - 用户登录POST JSON and header

    版权声明:本文为博主原创文章,未经博主允许不得转载. import UIKit import Alamofire class ViewController: UIViewController { va ...