用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. 分布式存储系统之Ceph集群部署

    前文我们了解了Ceph的基础架构和相关组件的介绍,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16720234.html:今天我们来部署一个ceph集群: 部 ...

  2. scss的使用方法

    引用scss文件--看上一篇的less使用,里面的Koala,一样的原理!!! 方法一: scss: /**定义变量 */$width:404px;$color:green;$font-size:20 ...

  3. ARC148游记

    A - mod M 题目链接 这道题我们可以首先对于所有的数 $%2$ ,可以证明出答案最多不超过 $2$ ,此时我们就可以把问题转化为:是否存在一个数使得序列 $a$ 中所有元素减去这个数之后的最大 ...

  4. Netty 学习（十）：ChannelPipeline源码说明

    Netty 学习(十):ChannelPipeline源码说明 作者: Grey 原文地址: 博客园:Netty 学习(十):ChannelPipeline源码说明 CSDN:Netty 学习(十): ...

  5. Docker | dockerfile构建centos镜像，以及CMD和ENTRYPOINT的区别

    构建自己的centos镜像 docker pull centos下载下来的镜像都是基础版本,缺少很多常用的命令功能,比如:ll.vim等等, 下面介绍制作一个功能较全的自己的centos镜像. 步骤 ...

  6. SSM框架整合图书管理项目

    SSM框架整合 1.建立简单的maven项目 2.导入依赖 <?xml version="1.0" encoding="UTF-8"?> <p ...

  7. MassTransit | .NET 分布式应用框架

    引言 A free, open-source distributed application framework for .NET. 一个免费.开源的.NET 分布式应用框架. -- MassTran ...

  8. 1.-Django项目结构

    一.Django简介 Django是一个开放源代码的Web应用框架,由Python写成.采用了MTV的框架模式,即模型M,视图V和模版T.   Django基本组件: 1.基本配置文件/路由系统 2. ...

  9. 用 VS Code 搞 Qt6：信号、槽，以及QObject

    Qt 里面的信号(Signal)和槽(Slot)虽然看着像事件,但它实际上是用来在两个对象之间进行通信的.既然是通信,就会有发送者和接收者. 1.信号是发送者,触发时通过特有的关键字"emi ...

  10. .net core Blazor+自定义日志提供器实现实时日志查看器

    场景 我们经常远程连接服务器去查看日志,比较麻烦,如果直接访问项目的某个页面就能实时查看日志就比较奈斯了,花了1天研究了下.net core 日志的原理,结合blazor实现了基本效果. 实现原理 自 ...