幻灯片效果

最新推荐文章于 2010-09-24 16:51:00 发布

iteye_1458

最新推荐文章于 2010-09-24 16:51:00 发布

阅读量141

点赞数

分类专栏： JS-3 文章标签： Safari HTML SUN

本文链接：https://blog.csdn.net/iteye_1458/article/details/81616411

版权

JS-3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>A</title>
		<link href="photoslide.css" rel="stylesheet" type="text/css">

		<script src="../../lib/ApqHelp.js"></script>

		<script src="photoList.js"></script>
	</head>
	<body>
		<h1>Lazy animals in the Aegean Sun</h1>
		<ul class="slides">
			<li><img src="images/cat2.jpg" alt="Lazy Cat" /></li>
			<li><img src="images/dog10.jpg" alt="Dog using the shade" /></li>
			<li><img src="images/dog12.jpg" alt="Squinting Dog" /></li>
			<li><img src="images/dog63.jpg" alt="Dog cooling off in the sand" /></li>
			<li><img src="images/dog7.jpg"  alt="Very flat dog" /></li>
			<li><img src="images/donkeyeating.jpg" alt="Hay-eating Donkey" /></li>
			<li><img src="images/kittenflat.jpg" alt="Ginger and White Cat" /></li>
		</ul>
	</body>
</html>


*{ margin:0; padding:0; }
body{ font-family:Arial,Sans-Serif; color:#666; padding:2em; background:#fff; }
h1{ font-size:1em; padding:.5em 0 }

/* slides */
.slides, .slides li{
	margin:0;
	padding:5px;
	list-style:none;
}

.slides img{
	display:block;
}

.slides{
	background:#ccc;
	width:440px;
	float:left;
}

.slides li{
	float:left;
}

/* dynslides */
.dynslides{
	margin:0;
	padding:0;
	width:210px;
	border:1px solid #000;
	background:#eee;
}

.dynslides li{
	display:none;
	margin:0;
	padding:2px;
}

.dynslides img{
     display:block;
}

.dynslides li.show{
	display:block;
}

.hide{
	visibility:hidden;
}

p.slidecounter{
	color:#333;
	background:url(images/gradient.gif) bottom left repeat-x #fff;
	font-family:arial,sans-serif;
	font-size:.8em;
	margin:0 0 .5em 0;
	width:210px;
	border:1px solid #000;
	border-top:none;
	text-align:center;
}

p.slidecounter a img{
	border:none;
	vertical-align:bottom;
}

p.slidecounter a{
	text-decoration:none;
	color:#000;
}

p.slidecounter span{
	padding:0 5em;
}


/**
 * @author Apq整理
 */

photoList = {
	slideClass: 'slides',

	dynamicSlideClass: 'dynslides',

	showClass: 'show',

	slideCounterClass: 'slidecounter',

	hideLinkClass: 'hide',

	forwardsLabel: '<img src="images/control_fastforward_blue.png" alt="next" />',

	backwardsLabel: '<img src="images/control_rewind_blue.png" alt="previous" />',

	counterLabel: '# of %', 

	init: function() {
		var uls = document.getElementsByTagName("ul");
		for (var i = 0; i < uls.length; i++) {
			if(!DOMHelp.cssjs("check", uls[i], photoList.slideClass)) { continue; }
			DOMHelp.cssjs("swap", uls[i], photoList.slideClass, photoList.dynamicSlideClass);
			uls[i].currentSlide = 0;
			photoList.initSlideShow(uls[i]);
		}
	},

	initSlideShow:function(o) {
		var p,temp,count;

		//添加统计条p
		p = document.createElement("p");
		DOMHelp.cssjs("add", p, photoList.slideCounterClass);
		o.parentNode.insertBefore(p, o.nextSibling);

		//创建向后的按钮(默认隐藏).
		//<p id="统计条"><a id="向后的按钮"><img /></a></p>
		o.rew=DOMHelp.createLink("#", " ");
		o.rew.innerHTML = photoList.backwardsLabel;
		EventHelp.addSimpleEvent(o.rew, "click", photoList.showSlide);
		DOMHelp.cssjs("add", o.rew, photoList.hideLinkClass);
		p.appendChild(o.rew);

		//添加图片计数器的span元素
		o.count = document.createElement("span");
		temp = photoList.counterLabel.replace(/#/, o.currentSlide + 1);
		temp = temp.replace(/%/, document.getElementsByTagName("li").length);
		o.count.appendChild(document.createTextNode(temp));
		p.appendChild(o.count);

		//创建向前的按钮
		o.fwd=DOMHelp.createLink("#", " ");
		o.fwd.innerHTML = photoList.forwardsLabel;
		EventHelp.addSimpleEvent(o.fwd, "click", photoList.showSlide);
		p.appendChild(o.fwd);

		//默认显示第一张照片
		temp=o.getElementsByTagName("li")[o.currentSlide];
		DOMHelp.cssjs("add", temp, photoList.showClass);

		//解决safari单击bug
		o.fwd.onclick = EventHelp.safariClickFix;
		o.rew.onclick = EventHelp.safariClickFix;
	},

	showSlide:function(e) {
		var action;

		//获取事件目标对象
		var t = EventHelp.getTarget(e);
		while(t.nodeName.toLowerCase() != "a" && t.nodeName.toLowerCase() != "body") {
			t = t.parentNode;
		}

		//如果按扭已经隐藏了, 什么也不做
		if(DOMHelp.cssjs("check", t, photoList.hideLinkClass)) { return; }

		//获取ul对象
		var parentList=DOMHelp.getClosestSibling(t.parentNode, -1);

		//获取count和图片的数量
		var count = parentList.currentSlide;
		var photoCount = parentList.getElementsByTagName("li").length - 1;

		//通过移除show类来隐藏前一张显示的图片
		var photo = parentList.getElementsByTagName("li")[count];
		DOMHelp.cssjs("remove", photo, photoList.showClass);

		//如果t等于向前的按钮count+1, 否则count - 1
		count = (t == parentList.fwd) ? count + 1 : count - 1;

		//只要count>0, 就一直显示向后的按钮，否则隐藏
		action = (count > 0) ? "remove" : "add";
		DOMHelp.cssjs(action, parentList.rew, photoList.hideLinkClass);

		//只要count<photoCount, 就一直显示向前的按钮，否则隐藏
		action = (count < photoCount) ? "remove" : "add";
		DOMHelp.cssjs(action, parentList.fwd, photoList.hideLinkClass);

		//重新设置图片计数器, 用新的图片数字替换第一个数字.
		//接下来, 设置parentList的currentSlide属性
		var counterText=parentList.count.firstChild;
		counterText.nodeValue=counterText.nodeValue.replace(/\d/, count+1);
		parentList.currentSlide = count;

		//通过添加show类来显示当前的图片
		photo=parentList.getElementsByTagName("li")[count];
		DOMHelp.cssjs("add", photo, photoList.showClass);

		//关闭a元素的链接
		EventHelp.cancelClick(e);
	}
}

EventHelp.addSimpleEvent(window, "load", photoList.init);

[b]自动播放效果[/b]


/**
 * @author Apq整理
 */
autoSlides = {
    slideClass: "slides",

    dynamicSlideClass: "dynslides",

    showClass: "show",

    slideCounterClass: 'slidecounter',

    playLabel: "<img src='images/control_play_blue.png' alt='play' />",

    stopLabel: "<img src='images/control_stop_blue.png' alt='stop' />",

    counterLabel: "# of %",

    delay: 1000,

	init: function() {
		if(!DOMHelp.isDOM()) { return; }

		var uls=document.getElementsByTagName("ul");
		autoSlides.slideLists=new Array();
		for(var i=0;i<uls.length;i++){
			if(!DOMHelp.cssjs('check',uls[i],autoSlides.slideClass)){continue;}
			DOMHelp.cssjs('swap',uls[i],autoSlides.slideClass,autoSlides.dynamicSlideClass);
			uls[i].currentSlide=0;	
			uls[i].showIndex=i; // 0
			uls[i].photoCount=uls[i].getElementsByTagName('li').length; //7
			autoSlides.initSlideShow(uls[i]);
			autoSlides.slideLists.push(uls[i]);
		}
	},

	initSlideShow: function(o) {
		var p,temp;	

		//添加统计条p
		p=document.createElement('p');
		DOMHelp.cssjs('add', p, autoSlides.slideCounterClass);
		o.parentNode.insertBefore(p, o.nextSibling);
                  //DOMHelp.insertAfter(p, o);

		//添加播放按钮(o.play)和图片计数器(o.count)
		o.play = DOMHelp.createLink("#", " ");
		o.play.innerHTML = autoSlides.playLabel;
		EventHelp.addSimpleEvent(o.play, "click", autoSlides.playSlide);
		o.count = document.createElement("span");
		temp = autoSlides.counterLabel.replace(/#/, o.currentSlide + 1);
		temp = temp.replace(/%/, o.getElementsByTagName("li").length);
		o.count.appendChild(document.createTextNode(temp));
		p.appendChild(o.count);
		p.appendChild(o.play);

		//默认显示第一张照片
		temp = o.getElementsByTagName("li")[o.currentSlide];
		DOMHelp.cssjs("add", temp, autoSlides.showClass);

		o.play.onclick = EventHelp.safariClickFix;
	},

	playSlide: function(e) {
		//获取事件目标对象
		var t = EventHelp.getTarget(e);
		while(t.nodeName.toLowerCase() != "a" && t.nodeName.toLowerCase() != "body") {   
            t = t.parentNode;   
        }

		//获取ul对象
		var parentList=DOMHelp.getClosestSibling(t.parentNode, -1);
		//
		if (!parentList.loop) {
			var loopCall = "autoSlides.showSlide('" + parentList.showIndex + "')";
			parentList.loop = window.setInterval(loopCall, autoSlides.delay);
			t.innerHTML = autoSlides.stopLabel;
		}else {
			window.clearInterval(parentList.loop);
			parentList.loop = null;
			t.innerHTML = autoSlides.playLabel;
		}

		EventHelp.cancelClick(e);

	},

	showSlide: function(showIndex) {
		//获取ul对象
		var oUL = autoSlides.slideLists[showIndex];
		var count = oUL.currentSlide;
		//图片的最大数量
		var max = oUL.getElementsByTagName("li").length;
		var photo = oUL.getElementsByTagName("li")[count];
		DOMHelp.cssjs("remove", photo, autoSlides.showClass);

		count++;
		if(count == max) { count = 0; }
		photo = oUL.getElementsByTagName("li")[count];
		DOMHelp.cssjs("add", photo, autoSlides.showClass);

		//重新设置图片计数器, 用新的图片数字替换第一个数字
		var counterText = oUL.count.firstChild;
		counterText.nodeValue=counterText.nodeValue.replace(/\d/, count+1);

		oUL.currentSlide = count;
	}
}

EventHelp.addSimpleEvent(window, "load", autoSlides.init);