用js，做图片切换

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	<style type="text/css">

			*{

				padding: 0;

				margin: 0px;

			}

			ul li{

				list-style: none;

			}

			.scroll_mid{

				background-color:#f2f2f3;

				border-left:solid 1px #d6d5d6;

				border-right:solid 1px #d6d5d6;

				width:533px;

				padding:5px 0px 5px 5px;

				margin: 0px auto;

				}

				#scroll_number{

					float: right;

					padding-right:10px ;

				}

			#dd_scroll{ /*FF*/

				float:none;

				}

			*html #dd_scroll{

				float:left; /*IE6*/

				}

			*+html #dd_scroll{

				float:left; /*IE7*/

				}

			#scroll_number{

				/* float:right; */

				padding-right:10px;

				}

			#scroll_number li{

				width:13px;

				height:13px;

				text-align:center;

				border:solid 1px #999;

				margin-top:5px;

				font-size:12px;

				line-height:16px;

				cursor:pointer;

				}

			.scroll_number_out{

				}

			.scroll_number_over{

				background-color:#F96;

				color:#FFF;

				}

			.scroll_end{

				background-image:url(../images/dd_scroll_end.gif);

				width:540px;

				height:8px;

				background-repeat:no-repeat;

				margin-bottom:10px;

				}

		</style>

		<script type="text/javascript">

			//当我们的页面加载完成之后才执行图片切换

			window.onload = init;

			var dd_scroll; //将其定义成全局变量

			//当页面加载完成执行init方法(函数)

			function init(){

				dd_scroll = document.getElementById("dd_scroll");

				调用定时器();

			}

			var time;

			//定时器方法

			function 调用定时器(){

				//执行一个周期性定时器

				time = setInterval("图片切换()",1000);

			}

			var i = 1;

			//图片切换的方法

			function 图片切换(){

				++i;

				//我们的图片一共只有6张,所以大于6之后就需要在从1开始

				if(i > 6){

					i = 1;  //如果大于6张,则图片从1开始从新切换

				}

				//修改元素对象中的src地址,实现我们的图片切换

//				dd_scroll.src = "img/dd_scroll_"+i+".jpg";

				dd_scroll.src = "img/图"+i+".jpg";

				//图片的自动增长

				//调用背景切换的方法

				背景颜色切换();

			}

			//当我们的鼠标移入到图片范围中时,自动的停止图片切换

			function stop(){

				clearInterval(time);

			}

			//当我们的鼠标移出图片范围时,自动开始图片切换

			function start(){

				调用定时器();

			}//背景颜色切换方法

			function 背景颜色切换(){

				//1. 获取所有的ul li取消每个li的背景颜色

				var scroll_number = document.getElementById("scroll_number");

				var lis = scroll_number.getElementsByTagName("li");

				//取消所有li的背景颜色

				var len = lis.length;

				for(var s=0; s<len; s++){

					//获取数组中每一个值,将背景色设置为空

					lis[s].style.background = "";

				}

				//设置对应图片的背景颜色

				var scroll_number_backg = document.getElementById("scroll_number_"+i);

				//设置对应li的背景颜色

				scroll_number_backg.style.background = "orange";

			}

		</script>

	</head>

	<body>

		<div class="scroll_mid">

		<img src="img/图1.jpg" onmouseout="start()" onmouseover="stop()" alt="轮换显示的图片广告" id="dd_scroll" width="398" height="163">

		<div id="scroll_number">

			<ul>

				<li  id="scroll_number_1" style="background-color: orange">1</li>

				<li  id="scroll_number_2" style="">2</li>

				<li  id="scroll_number_3" style="">3</li>

				<li  id="scroll_number_4" style="">4</li>

				<li  id="scroll_number_5" style="">5</li>

				<li  id="scroll_number_6" style="">6</li>

			</ul>

		</div>

	</div>

	</body>

</html>

　　

JS切换图片的更多相关文章

  1. js 切换图片

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  2. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  3. 一个简单且丑陋的js切换背景图片基础示例

    不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...

  4. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  5. jquery实现图片切换和js实现图片切换

    jquery实现图片切换: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  6. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...

  7. JS解决通过按钮切换图片的问题

    我是JS初学者,本想通过JS解决轮播图的特效,上网看了下:大部分都是JQ解决的,对于初学者的我来说理解上有点困难.于是我自己只做了一个不那么高大上的JS轮播图,下面我简单介绍下我的步骤:在HTML中创 ...

  8. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  9. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  10. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

随机推荐

  1. 学习ASP.NET Core Blazor编程系列五——列表页面

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  2. Python 实验报告（第三周）

    一.实验目的和要求 1.熟练运用常见选择结构: 2.熟练运用for循环和while循环: 3.理解带else语句的循环结构执行过程和break.continue语句在循环中的作用. 二.实验环境 软件 ...

  3. P7800 [COCI2015-2016#6] PAROVI 方法记录

    原题链接 桔梗花于此开放 [COCI2015-2016#6] PAROVI 题目描述 \(\text{Mirko}\) 和 \(\text{Slavko}\) 在玩一个游戏,先由 \(\text{Mi ...

  4. 关于javascript:void(0) 在不用的浏览器当中的表现

    原因在于三款浏览器,对三个属性的处理顺序不同. Chrome顺序:onclick -> href -> target IE和Firefox顺序:onclick -> target - ...

  5. 简析 Linux 的 CPU 时间

    从 CPU 时间说起... 下面这个是 top 命令的界面,相信大家应该都不陌生. top - 19:01:38 up 91 days, 23:06, 1 user, load average: 0. ...

  6. 检测 MySQL 服务是否存活 shell脚本

    #!/bin/bash # 检测 MySQL 服务是否存活 # host 为你需要检测的 MySQL 主机的 IP 地址,user 为 MySQL 账户名,passwd 为密码 # 这些信息需要根据实 ...

  7. KTV和泛型（3）

    泛型除了KTV,还有一个让人比较疑惑的玩意,而且它就是用来表达疑惑的:? 虽然通过泛型已经达到我们想要的效果了,例如: List<String> list = new ArrayList& ...

  8. [Mysql] 两段提交

    事务提交 Mysql 默认开启自动提交事务 两段提交 把一个事务分成两个阶段来提交,就是把redolog拆分成了prepare和commit两段 MySQL想要准备事务的时候会先写redolog.bi ...

  9. 安装与配置FTP服务器

    概:   文件传输协议 (File Transfer Protocol,FTP),用于在网络上进行文件传输的协议.如果用户需要将文件从本机发送到另一台计算机,可以使用FTP上传操作:反之,用户可以使用 ...

  10. 我用EasyExcel优化了公司的导出（附踩坑记录）

    背景介绍 最近要改一个导出的功能,在原有的基础上,在导出一份明细数据,要求导出内容加在原有 excel 的第二个 sheet 上.考虑到数据量还比较大,干脆引入阿里的 EasyExcel 来做. 下面 ...