用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. NSIS隐藏窗口标题栏自带的按钮（最大化，最小化，关闭X)

    这个问题实在八月份逛csdn论坛的时候偶然遇到的,当时比较好奇楼主为啥要隐藏关闭按钮,就顺口问了下,结果楼主已经弃楼,未给出原因,猜着可能是为了做自定义页面美化,无法改变按纽外观之类的,后来琢磨了下, ...

  2. ASP.NET Core 中的模型绑定

    微软官方文档:ASP.NET Core 中的模型绑定 Route 是通过MVC Route URL取值. 如:http://localhost:5000/Home/Index/2,id取出的值就会是2 ...

  3. P2216 [HAOI2007]理想的正方形 方法记录

    [HAOI2007]理想的正方形 题目描述 有一个 \(a \times b\) 的整数组成的矩阵,现请你从中找出一个 \(n \times n\) 的正方形区域,使得该区域所有数中的最大值和最小值的 ...

  4. 『现学现忘』Git后悔药 — 33、revert撤销（二）

    目录 4.一次移除某几次提交 (1)git revert移除某几次提交的修改 (2)git revert 移除某几次连续的提交的修改 5.revert命令常用参数 6.git revert和git r ...

  5. Taurus.MVC 微服务框架 入门开发教程：项目部署：7、微服务节点的监控与告警。

    系统目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 开源地址:https://github.com/cyq1162/Taurus.MVC 本系列第一篇:Tauru ...

  6. MySQL之安装(linux两种版本版本安装)

    LinuxMySQL安装(Mysql5.5版本) 第一种 有安装包的安装方式 1.下载地址: http://dev.mysql.com/downloads/mysql 2.检查当前系统是否安装过mys ...

  7. Xray

    Xray基础操作 代理设置 运行xray.exe xray.exe genca 运行后会生成ca.crt和cr.key 浏览器导入证书 设置代理7777端口 第一次启动 xray 之后,当前目录会生成 ...

  8. 齐博x1如何取消禁止跨城市密码登录限制

    为安全起意见,只要用户绑定了手机,或者QQ登录,或者微信登录其中的一项,只要用户的IP所在城市变了,就会禁止密码登录.如下图所示 而必须选择绑定过的手机或QQ或微信其中一种方式登录.以避免密码被盗所带 ...

  9. DevOps｜从特拉斯辞职风波到研发效能中的不靠谱人干的荒唐事

    今天发生了一件大事特拉斯辞任英国首相,我想借着这件事情说下我看到的一件研发效能的荒唐事,这其中的关联也许就是「都用了不靠谱的人」. 两件事情 今儿一早就听到,2022年10月20日英国第78任首相伊丽 ...

  10. js 获取开始时间和结束时间相隔小时及分钟（时间戳操作）

    js 获取开始时间和结束时间相隔小时及分钟(时间戳操作) 场景描述:获取开始时间和结束时间相隔小时及分钟 实例: TimeOnConfirm(curDate) { if(this.pickernum ...