[JavaScript学习]幻灯片效果

最新推荐文章于 2024-09-21 11:34:18 发布

imp_lc

最新推荐文章于 2024-09-21 11:34:18 发布

阅读量780

点赞数

分类专栏： JavaScript 文章标签： javascript 幻灯片

本文链接：https://blog.csdn.net/u011832520/article/details/17002643

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

近期在学习JavaScript，这算是一个基础效果实现的小练习吧，把想法和实现方法记录在这里，作为学习笔记吧。

目标：实现图片渐隐渐显切换的幻灯片效果。

想法：

图片切换通过改变图片url来实现；
渐隐渐显效果通过定时改变图片透明度来实现，整个过程为：图片透明度定时降低为0->更改图片url->图片透明度定时增加到100；
通过列表按钮对应图片，当鼠标指向不同的列表按钮，图片进行切换；
图片定时自动切换；
当鼠标在图片区域时，停止自动切换；

实现：

HTML：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<link href="opacity.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="opacity.js" ></script>
</head>
<body>
<div id="box">
	<img id="curImg" src="img/1.jpg" />
	<ul id="button">
		<li >1</li>
		<li >2</li>
		<li >3</li>
		<li >4</li>
		<li >5</li>
	</ul>
</div>
</body>

</html>

CSS：

@charset "UTF-8"
*{
	border: 0;
	padding: 0;
	margin: 0;
	text-decoration: none;;
}

div{
	width:470px;
	height: 150px;
	margin: 0 auto;
	position: relative;
	border: 1px solid;
}

img{
	position: absolute;
	filter:alpha(opacity=100);
	z-index: -1;
	opacity: 1;
	display: none;
}

#curImg{
	display:block;
}

ul{
	padding: 112px 0 0 340px;
}

li{
	width: 16px;
	height: 16px;
	margin-right: 10px;
	float: left;
	list-style-type: none;
	background:#ccc;
	text-align: center;
	line-height: 16px;
	font-size: 12px;
	color: gray;
}

JavaScript：

window.onload = function(){

var oImg = document.getElementById('curImg');
var oLi = document.getElementsByTagName('li');
var oDiv = document.getElementById('box');
var timer = null;
var tabTimer = null;
var alpha = null;
var now = 0;

	//给每个list按钮加个索引值
	for(var j = 0; j < oLi.length; j++ ){
		oLi[j].index = j;
	}
	//打开网页时，默认第一个按钮高亮
	oLi[0].style.background = "white";

	//给每个list按钮加上onmouseover事件
	for(var i = 0; i < oLi.length; i++){
		oLi[i].οnmοuseοver= function(){
			//检测当前图片是否对应当前list按钮，如果是的话直接返回，否则进行图片切换
			if(now == this.index){
				return;
			}
			now = this.index;
			changeImage();
		}
	}

	//幻灯片自动换页
	clearInterval(tabTimer);
	tabTimer = setInterval(tab, 3000);

	//当鼠标悬停到图片上时停止自动换页
	box.onmouseover = function(){
		clearInterval(tabTimer);
	}

	//鼠标离开图片区域，重新开启自动换页
	box.onmouseout = function(){
		tabTimer = setInterval(tab,3000);
	}


//获取传入对象元素的当前属性值
function getStyle(obj, attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr];
	}else{
		return getComputedStyle(obj, false)[attr];
	}
}

//改变对象元素的透明度，可以控制透明度的程度和变化速度
function changeOpacity(obj, iTarget, speed){
	alpha = getStyle(obj, "opacity")*100;
	if (Math.abs(alpha - iTarget) < Math.abs(speed)){
		alpha = iTarget;
	}else{
		alpha += speed;
	}
	obj.style.fileter = "alpha(opacity="+alpha+")";
	obj.style.opacity = alpha/100;
}

//实现幻灯片自动换页效果
function tab(){
	if (now == 4) {
		now = 0;
	}else{
		now++;
	}
	changeImage();
}

//使图像透明度渐变为0，然后更换图片，再把透明度渐变为1
function changeImage(){
	for (var j = 0; j < oLi.length; j++) {
		oLi[j].style.background = "#ccc";
	}
	oLi[now].style.background = "white";
	clearInterval(timer);
	timer = setInterval(function(){
		changeOpacity(oImg, 0, -10);
		alpha = getStyle(oImg, "opacity");
		if(alpha == 0){
			clearInterval(timer);
			oImg.src = "img/"+(now+1)+".jpg";
			timer = setInterval(function(){
				changeOpacity(oImg, 100, 10);
				alpha = getStyle(oImg, "opacity");
				if(alpha == 100){
					clearInterval(timer);
				}
			},30);
		}
	}, 30);
}
}