用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. 工厂数字化转型离不开 MES 的原因是什么？

    工厂数字化转型是离不开 MES,首先得弄清楚什么是工厂数字化转型.什么是MES,它们的关系是怎样的. 数字化的主要含义是构建"业务数字化.数字资产化.资产服务化.服务业务化"闭环, ...

  2. C#-10 事件

    一 发布者和订阅者 很多时候都有这种需求,当一个特定的程序事件发生时,程序的其他部分可以得到该事件已经发生的通知. 发布者/订阅者模式可以满足这种需求. 发布者:发布某个事件的类或结构,其他类可以在该 ...

  3. 我操作MySQL的惊险一幕

    背景 前几天因工作需要,组长给我安排了一个数据清洗的任务. 任务:把 A 表的数据洗到 B 表. 我的第一反应,什么是「洗」?洗数据是什么?洗钱我倒是知道. 不过我不能慌啊,于是问了问组长. 我:组长 ...

  4. Java注解（2）：实现自己的ORM

    搞过Java的码农都知道,在J2EE开发中一个(确切地说,应该是一类)很重要的框架,那就是ORM(Object Relational Mapping,对象关系映射).它把Java中的类和数据库中的表关 ...

  5. 微信小程序制作日常生活首页

    1.手机上效果预览 不知道为啥上传后是如此的高糊画质(手机画质很好) 微信小程序日常生活首页手机效果演示 2.开发者工具效果图 3.真机调试 4.项目的目录结构 5.核心代码 5.1 app.json ...

  6. 齐博x1页面不直接报错,如何排查

    有的页面是不会直接报错的,比如像下面这个,这个时候需要你用谷歌或火狐浏览器打开,按F12键进入开发者模式,然后选择Network选项,刷新一下当前的网页,就会看到红色的请求.单独打开他.就可以看到错误 ...

  7. 齐博x1云市场注意事项

    安装云市场应用注意事项 大到频道,小到插件甚至钩子及风格都可以在线安装,在线升级. 但是有一个大家务必注意的地方,就是重装系统后,再安装有可能导致重复收费. 这个问题是可以解决的.当然如果不是重装系统 ...

  8. AI带你省钱旅游！精准预测民宿房源价格！

    作者:韩信子@ShowMeAI 数据分析实战系列:https://www.showmeai.tech/tutorials/40 机器学习实战系列:https://www.showmeai.tech/t ...

  9. Codeforces Round #831 (Div. 1 + Div. 2) A-E

    比赛链接 A 题解 知识点:数学. \(2\) 特判加 \(7\),其他加 \(3\) 直接偶数. 时间复杂度 \(O(1)\) 空间复杂度 \(O(1)\) 代码 #include <bits ...

  10. Abp.Zero 手机号免密登录验证与号码绑定功能的实现（一）：验证码模块

    这是一篇系列博文,我将使用Abp.Zero搭建一套集成手机号免密登录验证与号码绑定功能的用户系统: Abp.Zero 手机号免密登录验证与号码绑定功能的实现(一):验证码模块 Abp.Zero 手机号 ...