用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. 陆地观测卫星数据服务（CRESDA）订单ftp地址错误—已解决不能下载问题

    陆地观测卫星数据服务订单ftp地址错误 问题:本人在陆地观测卫星数据网站上申请GF1-WFV10幅数据,订单完成后返回的FTP地址出现无法连接服务器现象.(数据订单申请已通过) 一.情况介绍: ​ 我 ...

  2. 京东云TiDB SQL优化的最佳实践

    京东云TiDB SQL层的背景介绍 从总体上概括 TiDB 和 MySQL 兼容策略,如下表: SQL层的架构 用户的 SQL 请求会直接或者通过 Load Balancer 发送到 京东云TiDB ...

  3. Dubbo 02: 直连式

    直连式 需要用到两个相互独立的maven的web项目 项目1:o1-link-userservice-provider 作为服务的提供者 项目2:o2-link-consumer 作为使用服务的消费者 ...

  4. 1、在SrpingBoot的环境当中使用JSP及相关功能

    创建webapp目录 由于SpringBoot项目不建议直接访问jsp页面,但是我现在要做的事情需要去访问,那么我就需要在原有的项目基础上为访问jsp页面进行一个调整 首先在项目当中,java和res ...

  5. 创建外部表步骤及解决ORA-29913:执行ODCIETTABLEOPEN调出时出错

    创建外部表步骤 建立目录对象(用sys用户创建.授权) 外部表所在路径一定要写对!!! create directory ext_data as 'D:\ORACLE'; grant read,wri ...

  6. UBOOT编译--- make xxx_deconfig过程详解(一)

    make xxx_deconfig过程详解 1. 前言 2. 概述 3. build变量的定义 4. 目标%config的定义 4.1 依赖 scripts_basic 4.1.1 语句$(if $ ...

  7. MFC 学习笔记

    MFC 学习笔记 一.MFC编程基础: 概述: 常用头文件: MFC控制台程序: MFC库程序: 规则库可以被各种程序所调用,扩展库只能被MFC程序调用. MFC窗口程序: 示例: MFC库中类的简介 ...

  8. git pull与git pull --rebase

    aliases: [] tags: [git] link: date: 2022-08-30 目录 git pull --rebase 等效命令 总结 参考文章 git pull --rebase 在 ...

  9. c语言内存四区、数据存储范围和内存存储方向

    (1)代码区通常是共享只读(代码无法修改)的,即可以被其他的程序调用,例如运行两个qq,除了数据不一样,代码都是一样的, 每次运行qq,都会将代码和数据加载到内存中,除了数据,每次加载的代码都是一样的 ...

  10. ssh明文密码小工具：sshpass

    Xshell 远程时可以用如下方式进行明文密码免交互登陆: ssh 用户:密码@ip 可换到linux时,就不行了,在某些不适合使用公钥免密的情况下,到底该怎样免交互登陆? 于是我找到了sshpass ...