幻灯片样式网页

幻灯片

1. 图片的结构

1.1 图片的元素显示

页面上显示图片元素

<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>

1.2 图片的样式结构

第一行 是大的图片

第二行 是四张小的图片

定义一个 class 控制图片的样式

<img src="img/1.jpg" class="big"/>
<img src="img/1.jpg" class="small"/>
<img src="img/2.jpg" class="small"/>
<img src="img/3.jpg" class="small"/>
<img src="img/4.jpg" class="small"/>

控制图片的基本结构和样式

<!-- 控制设置样式 -->
<style>
	.big{
		width: 615px;
		height: 300px;
	}
	.small{
		width: 150px;
        /*整体元素距离上部分的元素间距*/
		margin-top: 5px;
	}
</style>

<img src="img/1.jpg" class="big"/><br/>
<img src="img/1.jpg" class="small"/>
<img src="img/2.jpg" class="small"/>
<img src="img/3.jpg" class="small"/>
<img src="img/4.jpg" class="small"/>

2. 图片的切换

2.1 图片的自动切换

图片每隔 1s 自动切换一次

JS 中设置一个定时器

<!-- 控制设置样式 -->
<style>
	.big{
		width: 615px;
		height: 300px;
	}
	.small{
		width: 150px;
		/*整体元素距离上部分的元素间距*/
		margin-top: 5px;
	}
</style>

<!-- JS 的代码  页面脚本 -->
<script type="text/javascript">
	var i = 1;// 定义的 图片 src 的数字
	// 设置一个 1s 更换 src 数字的定时器
	// 参数1：匿名函数，调用的函数
	// 参数2：间隔的时间 时间单位是 毫秒
	setInterval(function(){
		if(i>4){ 
			// 控制 i 的最大值是 4
			i = 1;
		}
		// 获取页面的 img dom对象 
		// document.getElementById 通过ID 获取页面 DOM元素
		// i++ 自增
		document.getElementById("big").src ="img/"+(i++)+".jpg";
	},1000);
</script>

<img src="img/1.jpg" id="big" class="big"/><br/>
<img src="img/1.jpg" class="small"/>
<img src="img/2.jpg" class="small"/>
<img src="img/3.jpg" class="small"/>
<img src="img/4.jpg" class="small"/>

2.2 显示下面选定的图片

当鼠标滑过下面的图片时，上面的大图停止切换。

显示当前正在停留的这张图片

2.2.1 显示滑过的图片

<!-- 控制设置样式 -->
<style>
	.big{
		width: 615px;
		height: 300px;
	}
	.small{
		width: 150px;
		/*整体元素距离上部分的元素间距*/
		margin-top: 5px;
	}
</style>

<!-- JS 的代码  页面脚本 -->
<script type="text/javascript">
	var i = 1;// 定义的 图片 src 的数字
	// 设置一个 1s 更换 src 数字的定时器
	// 参数1：匿名函数，调用的函数
	// 参数2：间隔的时间 时间单位是 毫秒
	setInterval(function(){
		if(i>4){ 
			// 控制 i 的最大值是 4
			i = 1;
		}
		// 获取页面的 img dom对象 
		// document.getElementById 通过ID 获取页面 DOM元素
		// i++ 自增
		document.getElementById("big").src ="img/"+(i++)+".jpg";
	},1000);

	function changeImage(obj){
		// 把传入的 Obj 对象的 src 换给 第一个 大图片的 src 属性
		document.getElementById("big").src = obj.src;
		// 停止切换
	}
</script>

<img src="img/1.jpg" id="big" class="big"/><br/>
<img src="img/1.jpg" class="small" onmouseover="changeImage(this)" />
<img src="img/2.jpg" class="small" onmouseover="changeImage(this)"/>
<img src="img/3.jpg" class="small" onmouseover="changeImage(this)"/>
<img src="img/4.jpg" class="small" onmouseover="changeImage(this)"/>

2.2.2 停止定时切换

当鼠标移动到小图片上的时候，停止取消定时器

var i = 1;// 定义的 图片 src 的数字
// 设置一个 1s 更换 src 数字的定时器
// 参数1：匿名函数，调用的函数
// 参数2：间隔的时间 时间单位是 毫秒
// timeID 当前定时器的编号
var timeID = setInterval(function(){
	if(i>4){ 
		// 控制 i 的最大值是 4
		i = 1;
	}
	// 获取页面的 img dom对象 
	// document.getElementById 通过ID 获取页面 DOM元素
	// i++ 自增
	document.getElementById("big").src ="img/"+(i++)+".jpg";
},1000);

function changeImage(obj){
	// 把传入的 Obj 对象的 src 换给 第一个 大图片的 src 属性
	document.getElementById("big").src = obj.src;
	// 停止切换
	clearInterval(timeID);// 取消定时器
}

2.2.3 重新开始定时器

<!-- 控制设置样式 -->
<style>
	.big{
		width: 615px;
		height: 300px;
	}
	.small{
		width: 150px;
		/*整体元素距离上部分的元素间距*/
		margin-top: 5px;
	}
</style>

<!-- JS 的代码  页面脚本 -->
<script type="text/javascript">
	var timeID;// timeID 当前定时器的编号
	var i;// 定义的 图片 src 的数字

	startTimer();

	function changeImage(obj){
		// 把传入的 Obj 对象的 src 换给 第一个 大图片的 src 属性
		document.getElementById("big").src = obj.src;
		// 停止切换
		clearInterval(timeID);// 取消定时器
	}

	// 启动定时器的函数
	function startTimer(){
		i = 1;
		// 设置一个 1s 更换 src 数字的定时器
		// 参数1：匿名函数，调用的函数
		// 参数2：间隔的时间 时间单位是 毫秒
		timeID = setInterval(function(){
			if(i>4){ 
				// 控制 i 的最大值是 4
				i = 1;
			}
			// 获取页面的 img dom对象 
			// document.getElementById 通过ID 获取页面 DOM元素
			// i++ 自增
			document.getElementById("big").src ="img/"+(i++)+".jpg";
		},1000);
	}
</script>

<img src="img/1.jpg" id="big" class="big"/><br/>
<img src="img/1.jpg" class="small" onmouseout="startTimer()" onmouseover="changeImage(this)" />
<img src="img/2.jpg" class="small" onmouseout="startTimer()" onmouseover="changeImage(this)"/>
<img src="img/3.jpg" class="small" onmouseout="startTimer()" onmouseover="changeImage(this)"/>
<img src="img/4.jpg" class="small" onmouseout="startTimer()" onmouseover="changeImage(this)"/>

2.2.4 继续上一张变化

记录当前已经显示的是第几张

<!-- 控制设置样式 -->
<style>
    .big{
        width: 615px;
        height: 300px;
    }
    .small{
        width: 150px;
        /*整体元素距离上部分的元素间距*/
        margin-top: 5px;
    }
</style>

<!-- JS 的代码  页面脚本 -->
<script type="text/javascript">
    var timeID;// timeID 当前定时器的编号
    var i = 1;// 定义的 图片 src 的数字

    startTimer();

    function changeImage(obj,index){
        // 把传入的 Obj 对象的 src 换给 第一个 大图片的 src 属性
        document.getElementById("big").src = obj.src;
        // 停止切换
        clearInterval(timeID);// 取消定时器
        // 获取属性，当前是第几张
        i = ++index;
    }

    // 启动定时器的函数
    function startTimer(){
        // 设置一个 1s 更换 src 数字的定时器
        // 参数1：匿名函数，调用的函数
        // 参数2：间隔的时间 时间单位是 毫秒
        timeID = setInterval(function(){
            if(i>4){ 
                // 控制 i 的最大值是 4
                i = 1;
            }
            // 获取页面的 img dom对象 
            // document.getElementById 通过ID 获取页面 DOM元素
            // i++ 自增
            document.getElementById("big").src ="img/"+(i++)+".jpg";
        },1000);
    }
</script>

<img src="img/1.jpg" id="big" class="big"/><br/>
<img src="img/1.jpg" class="small" onmouseout="startTimer()" onmouseover="changeImage(this,1)" />
<img src="img/2.jpg" class="small" onmouseout="startTimer()" onmouseover="changeImage(this,2)"/>
<img src="img/3.jpg" class="small" onmouseout="startTimer()" onmouseover="changeImage(this,3)"/>
<img src="img/4.jpg" class="small" onmouseout="startTimer()" onmouseover="changeImage(this,4)"/>