html实现简单图片切换,JavaScript实现简单的图片切换

JavaScript实现图片切换，主要用到setInterval()函数和clearInterval()函数，前者功能是开启动画，后者功能则为清除动画(可理解为使动画停止)，为了使动画停止，则需要定义全局变量作为标志，标志返回setInterval()函数的id，id作为clearInterval()函数的引用，目的是为了告诉clearInterval()函数动画暂停的位置。下面是实现的代码：

一、部分HTML代码：第一个为左按钮，是一张带箭头的透明图片，点击实现图片右滑动，第二个为图片展示区域，第三个是右按钮，点击实现图片左滑动。

二、JavaScript全部代码：JS主要实现鼠标放在图片上方，动画暂停，移开图片动画开始，以及点击左右按钮，图片的左右切换。

var photos = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];

var count = 0; //记录图片张数

var flag; //返回动画id

function callback() //实现图片切换

{

document.getElementById("photo").src = photos[count];

count++;

if (count == photos.length)

count = 0;

}

function change() //动画开启

{

flag = setInterval(callback,2000);

}

function off() //onmouseover事件发生，动画暂停

{

clearInterval(flag);

}

function on() //onmouseout事件发生，动画继续

{

flag = setInterval(callback,2000);

}

function leftMove() //实现左滑动

{

off(); //每次点击都让自动切换暂停

document.getElementById("photo").src = photos[count];

count++;

if (count == photos.length)

count = 0;

}

function rightMove() //实现右滑动

{

off(); //每次点击都让自动切换暂停

count--;

document.getElementById("photo").src = photos[count];

if (count <= 0)

count = photos.length - 1;

}

html实现简单图片切换,JavaScript实现简单的图片切换相关推荐

html怎么实现多语言图片切换,JavaScript实现--中英语言切换功能
最近弄的项目是面向国际的,所以老总说要有语言切换功能.第一感觉好像不难吧网上查了下,感觉实现方法就2种: 一:2个版本的HTML.至于怎么切换,方法也很多. 不过这种方法,除了笨,我实在不知道用什么 ...
html简单打字游戏,javascript实现简单打字游戏
本文实例为大家分享了javascript打字游戏的具体代码,供大家参考,具体内容如下传智打字游戏 .label{ position:absolute;left: 0px; } var CODE = ...
Javascript闭包简单理解
Javascript闭包简单理解原文:Javascript闭包简单理解提到闭包,想必大家都早有耳闻,下面说下我的简单理解. 说实话平时工作中实际手动写闭包的场景并不多,但是项目中用到的第三方框架和 ...
dw在php图片滑动切换效果,超简单的图片左右切换滑动
网上看过很多图片左右切换滑动的效果,不过大都是使用插件实现.插件虽方便,但是对于新手的学习并不是最好的.本文使用jquery这个由原生的JavaScript封装的库,用最简短的代码实现此功能效果预览 ...
xml+javascript实现简单图片轮换
最近无聊,看着许多网站都有广告自动轮换,自己试着写了一个图片轮换,代码和功能都很简单,只支持IE的,FF的还要加些东东. xml文件:test.xml 1<?xml version=" ...
详细简单的php图片轮播,最简单的JavaScript图片轮播代码(两种方法)_javascript技巧...
通过改变每个图片的opacity属性: 素材图片: 代码一: 最简单的轮播广告代码二: 首先第一步,下载好一个jquery库的插件,jquery.js 网上很多随处可以下载．下载的插件要放在目录下． ...
简单的图片、文字轮播，及切换动画
图片轮播使用的容器是ViewPager,文字轮播使用的是TextSwitcher. 图片轮播的主要思路:利用Timer和TimerTask构建定时任务:监听ViewPager的滑动,根据滑动百分比动态 ...
java 简单图片浏览器_Java实现简单的图片浏览器
第一次写博客,不喜勿喷. 最近一个小师弟问我怎么用Java做图片浏览器,感觉好久没玩Java了,就自己动手做了一下. 学校的教程是用Swing来做界面的,所以这里也用这个来讲. 首先要做个大概的界面出 ...
图片播放器　简单使用
(1)前台＿客户端: var focus_width=800;//图片宽 var focus_height=600;//图片高 var text_height=20;//字高 ...

html实现简单图片切换,JavaScript实现简单的图片切换

html实现简单图片切换,JavaScript实现简单的图片切换相关推荐

最新文章

热门文章