<!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);
自动播放效果
/**
* @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);
分享到：
相关推荐
在Android开发中，实现幻灯片效果是一种常见的需求，它广泛应用于应用介绍、产品展示、教程引导等场景。本文将详细讲解如何在Android平台上创建一个功能完善的幻灯片效果，结合"android-turnpage-master"这个项目的...
在Android开发中，实现幻灯片效果是一种常见的需求，它广泛应用于应用的引导页、产品展示或者用户教程等场景。本篇文章将详细讲解如何在Android中实现幻灯片效果，主要涉及以下几个方面： 1. **使用ViewPager实现...
Flash幻灯片效果是其特色功能之一，用于创建动态、互动的图像展示，为网页增添吸引力。本篇文章将深入探讨Flash幻灯片效果的原理、实现方式以及其在网页设计中的应用。 Flash幻灯片效果的核心是ActionScript，它是...
Unity3D幻灯片效果 切换的效果 幻灯片效果 切换横屏 源码 可根据需求扩展,可根据需求扩展,可根据需求扩展
在Web开发中，幻灯片效果是常见的功能之一，它能帮助用户以视觉吸引人的形式展示一系列图片或内容。本文将深入探讨如何使用JavaScript实现实用的幻灯片效果。 首先，我们需要了解幻灯片的基本原理。幻灯片效果通常...
在Android平台上，实现幻灯片效果是常见的需求，特别是在开发应用或者设计用户界面时。幻灯片效果可以为用户提供一种流畅、动态的交互体验，使信息展示更加吸引人。本篇将详细介绍如何在Android中创建一个简单的幻灯...
在Android开发中，实现幻灯片效果是一种常见的需求，尤其在制作应用的引导页、产品展示或者动态壁纸时。这个“android中实现幻灯片效果的demo”应该包含了一个简单的例子，展示了如何在Android平台上创建滑动切换的...
在JavaScript编程领域，实现幻灯片效果是一种常见的需求，它广泛应用于网站的首页展示、产品介绍等场景。本文将深入探讨如何使用纯JS实现这一功能，同时也会涉及到HTML和CSS的基础应用。 首先，幻灯片的基本结构...
【标题】"js事例幻灯片效果"指的是利用JavaScript技术实现的一种网页动态展示效果，通常用于网站的首页或产品展示区域，以吸引用户的注意力并提供互动体验。这种效果允许用户通过鼠标操作（如悬停、点击）来浏览一...
在网页设计中，动态展示内容的方式多种多样，其中幻灯片效果是一种常用且吸引人的手法。JS（JavaScript）作为客户端脚本语言，被广泛应用于实现这些动态效果，为用户提供更丰富的交互体验。本文将深入探讨几种好看的...
JavaScript幻灯片效果是网页设计中常见的一种动态展示方式，尤其在现代网页和移动应用中广泛应用。本项目基于jQuery库，旨在实现一个兼容电脑端和手机端的幻灯片切换功能，确保用户无论是在台式机还是移动设备上都能...
【标题】"360旅游首页JS幻灯片效果代码"是针对网页设计中的一个常见功能——幻灯片展示的实现方案。这种效果通常用于在网站的首页展示一系列的图片或者内容，通过动态切换的方式吸引用户的注意力，提高用户体验。360...
【标题】"superslide京东首页幻灯片效果"是一个基于JavaScript实现的动态展示效果，常见于电商网站的首页，用于吸引用户注意力并展示重要商品或活动。这种效果通过模拟真实的幻灯片翻页，带给用户流畅且引人入胜的...
本资源集包含了15个不同的JavaScript和Flash制作的幻灯片效果，它们能够为网站增添视觉吸引力，尤其适用于广告展示。下面我们将详细探讨这些技术及其在网页设计中的应用。 首先，JavaScript（JS）是一种轻量级的...
本教程将探讨如何利用 jQuery 实现一个漂亮的幻灯片效果，这通常用于网站的首页或者产品展示区域，以吸引用户注意力并提供信息。 首先，我们要了解jQuery库。jQuery是一个轻量级的JavaScript库，它简化了HTML文档...
JavaScript幻灯片效果是一种常见的网页动态展示技术，用于在网页上创建吸引人的图像或内容轮播。这种效果常被用于网站的头部展示，以吸引用户的注意力并提供信息。以下是对这个话题的详细解释： 1. **JavaScript...
在网页设计中，"Banner幻灯片效果"是一种常见的元素，用于吸引用户的注意力并展示重要的信息或促销内容。这种效果通常出现在网站的首页顶部，利用动态的图片切换来提升用户体验和视觉吸引力。以下是对这个主题的详细...
在JavaScript编程领域，模拟淘宝首页缓冲幻灯片效果是一项常见的任务，它涉及到网页动态交互设计，使得用户体验更加流畅和吸引人。在这个项目中，我们将深入探讨如何使用JS实现这一功能，以及涉及的关键技术和原理。...