<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Show Pictures </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<center>
<h1>Ajax无刷新实现图片切换特效</h1>
<hr >
<br >
<h5>效果如下</h5>
<div class="mod" id="mod_album" xmlns="">
<center class="modhead">
<span class="phpage">
<a href="#" onclick="previous();return false;"><img border="0" align="absmiddle" width="60" height="60" src="previous.png" title="lastone" alt="lastone"onmouseover="" onmouseout="" /> </a>
<a href="#" onclick="PlayControl();return false;"><img border="0" align="absmiddle" width="60" height="60" src="pause.png" title="pause" onmouseover="m_over(this)" onmouseout="m_out(this)" id="playControlImg" /></a>
<a href="#" onclick="next();return false;"><img border="0" align="absmiddle" width="60" height="60" src="next.png" title="nextone" alt="nextone"onmouseover="" onmouseout="" /> </a>
</span>
</center>
<div id="m_album" class="modbox">
<div style="" class="image" id="imgArea">
<center id="picdiv"></center>
</div>
</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var nowid=0;
var pNum=0;
var time=3000;
var starting;
var isPlaying=true;
var playContrlImg=$("playControlImg");
var picdiv=$("picdiv");
var photoIndexs=[];
for(var i=0;i<64;i++){
photoIndexs[i]='IMG_'+(i+1)+'.JPG';
}
pNum=photoIndexs.length;
if(0!=pNum){
$("imgArea").style.display='';
picdiv.innerHTML='<img src="'+photoIndexs[0]+'"border="0" /></a>';
starting=setInterval("rockPhoto()",time);
}
function m_over(ele){
if(isPlaying) ele.src="play.png";
else ele.src="pause.png";
}
function m_out(ele){
if(isPlaying) ele.src="pause.png";
else ele.src="play.gif";
}
function playControl(){
clearInterval(starting);
if(isPlaying){
isPlaying=false;
playControlImg.src="play.png";
playControlImg.title="start play";
}
else{
starting=setInterval('rockPhoto()',time);
isPlaying=true;
playControlImg.src="pause.png";
playControlImg.title="pause";
}
}
function rockPhoto(){
nowid++;
if(nowid>=pNum) nowid=0;
picdiv.innerHTML='<img src="'+photoIndexs[nowid]+'"border="0" />';
}
function next(){
rockPhoto();
}
function previous(){
nowid--;
if(nowid<0) nowid=pNum-1;
picdiv.innerHTML='<img src="'+photoIndexs[nowid]+'"border="0" />';
}
</script>
</div>
</center>
</BODY>
</HTML>
分享到：
相关推荐
JavaScript实现图片切换，主要用到setInterval()函数和clearInterval()函数，前者功能是开启动画，后者功能则为清除动画（可理解为使动画停止），为了使动画停止，则需要定义全局变量作为标志，标志返回setInterval...
使用JavaScript实现图片切换，无需额外的插件支持，且对移动设备友好。常见的JavaScript图片切换库有jQuery、React、Vue等框架提供的方法。例如，可以使用CSS3的transition和animation属性配合JavaScript事件来实现...
本文将详细介绍JavaScript实现图片切换的相关知识点，并探讨如何在实际项目中应用这些技术。 一、JavaScript 图片切换基础 1. DOM（Document Object Model）操作：JavaScript 可以通过 DOM API 来操作HTML元素，...
JavaScript实现图片切换功能主要依赖于DOM操作和事件处理来实现前后图片的切换。这篇文章通过具体的实例代码，介绍了如何使用JavaScript中的数组来存储图片地址，然后利用按钮点击事件来实现图片的前后切换。 知识...
本文将深入探讨JavaScript实现图片切换的各种方法和技术。 首先，我们需要了解基本的HTML结构，它包括一个包含多张图片的`<div>`容器，每张图片作为`<img>`元素嵌入。例如： ```html <!-- 更多图片... --> ...
本文实例为大家分享了JavaScript实现图片切换效果，自定义属性的应用 供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>图片切换实例</...
在实现图片切换效果时，我们通常会利用JavaScript的DOM（Document Object Model）操作，改变HTML元素的属性，如src（源），来实现图片的切换。 标题“多图片切换效果JavaScript实现”指的是一种能够动态展示多张...
在本主题中，我们关注的是使用JavaScript实现图片切换效果，这通常用于创建滑动展示、轮播图或相册等功能，能提升网站的用户体验。 在JavaScript图片切换效果中，有几种常见的实现方式： 1. **DOM操作**：通过...
在JavaScript编程中，实现一个带有缩略图的图片切换效果并配备控制按钮是一项常见的需求，尤其是在网站设计和用户界面开发中。这样的功能可以为用户提供更好的交互体验，让他们更轻松地浏览一组图片。以下是对这个...
总结一下，使用JavaScript实现图片切换功能涉及以下几个核心知识点： 1. HTML结构：创建包含多张图片的容器。 2. CSS样式：隐藏/显示图片，以及添加过渡效果。 3. JavaScript基础：选择DOM元素，改变类名，以及添加...
### 基于JavaScript实现图片切换效果知识点 #### 1. 图片切换效果的HTML结构设计 要实现图片切换效果，首先需要构建基础的HTML结构。典型的结构包括一个容器元素和几个图片元素。在这个例子中，我们有一个ID为`box`...
在本文中，我们将深入探讨如何利用JavaScript实现图片切换，并通过实际示例来展示其工作原理。 首先，`moveover`事件通常与`mouseout`事件一起使用，它们分别在鼠标进入和离开元素时触发。在图片切换的场景中，`...
下面将详细介绍JavaScript实现图片切换的原理、方法及常用技巧。 1. **基本原理** JavaScript 是一种解释型的编程语言，它可以对网页中的DOM（文档对象模型）进行操作，改变HTML元素的样式、内容或位置。在图片...
5. **纯CSS实现**：现代浏览器支持CSS3的`transition`和`animation`，可以不依赖JavaScript实现图片切换，但这可能限制了对旧浏览器的支持。 6. **事件驱动**：JavaScript的事件监听可以响应用户的滚动、点击等行为...
下面将详细介绍如何使用JavaScript实现图片切换效果。 首先，我们需要准备一些基本元素：一个包含多张图片的HTML结构，例如： ```html <!-- 更多缩略图... --> ``` 在这个例子中，`#main-image`是主...
在本文中，我们将深入探讨如何使用JavaScript实现图片切换的“上一张”和“下一张”功能。 首先，我们需要理解基本的HTML结构，这通常包括一个用于显示图片的`<img>`元素，以及两个按钮，分别表示“上一张”和“下...
在本文中，我们将深入探讨如何使用原生JavaScript实现图片切换效果。这种效果广泛应用于网站的轮播图、相册展示等场景，通过编程技术让图片按照预设方式自动或手动切换，提供良好的用户体验。 首先，我们需要理解...
这个"Js实现图片幻灯切换效果-带缩略图.rar"压缩包文件提供了一个使用JavaScript实现的图片幻灯片功能，同时带有缩略图和动画效果。这种效果常用于网站的首页展示、产品展示或者新闻滚动等场景，能够使内容更生动，...
通过研究和实践这个"JavaScript图片切换效果.rar"中的代码，你可以学习到如何用JavaScript实现动态效果，这对于提升网页交互性和吸引力非常有帮助。同时，这也是一个很好的练习项目，可以帮助你深入理解JavaScript...