html中js左右图片切换效果,JS实现图片切换特效

本文实例为大家分享了JS实现图片切换的具体代码，供大家参考，具体内容如下

知识点：

1.window.onload网页全部加载完后再执行

2.获取元素设置属性

3.临界情况判断

运行效果：

点击上一张下一章切换图片

代码：

Title

#box{

width: 1200px;

margin: 0 auto;

}

上一张

下一张

window.onload = function (ev) {

// 1. 获取标签

var prep = document.getElementById('prep');

var next = document.getElementById('next');

var icon = document.getElementById('icon');

// 2. 点击

var currentIndex = 1, minIndex=1, maxIndex=10;

prep.onclick = function (ev1) {

if (currentIndex === minIndex){

currentIndex = maxIndex;

}else{

currentIndex--;

}

icon.setAttribute('src','images/阿鲁'+ currentIndex +'.gif');

};

next.onclick = function (ev1) {

if (currentIndex === maxIndex){

currentIndex = minIndex;

}else {

currentIndex++;

}

icon.setAttribute('src','images/阿鲁'+ currentIndex +'.gif');

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html中js左右图片切换效果,JS实现图片切换特效相关推荐

html网页切换效果，css图片切换效果
<title>html网页切换效果,css图片切换效果</title><link rel="stylesheet" href="./fami ...
jquery图片放大效果,鼠标经过图片时局部放大，类似京东图片放大镜效果
原文:jquery图片放大效果,鼠标经过图片时局部放大,类似京东图片放大镜效果源代码下载地址:http://www.zuidaima.com/share/1746784990055424.htm 1 ...
实现JS标签切换效果【CSS图片切换】
运行代码尝试,我把整篇的CSS文件内容都弄上来了,难得去找具体内容了,反正能得到效果就可以了. 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
html百叶窗切换效果,js实现绿白相间竖向网页百叶窗动画切换效果
本文实例讲述了js实现绿白相间竖向网页百叶窗动画切换效果.分享给大家供大家参考.具体分析如下: 前面我们讲解了一个网页百叶窗切换动画效果,不过是横向百叶窗,这个是竖向百叶窗,代码基本一样: 百叶窗页面 ...
图片幻灯片效果js代码
新建一个XXX.html,引入下面html代码,在引入几张自己准备好的图片,并且命名为1.jpg,2.jpg,3.jpg--,再打开XXX.html得到效果图. <!DOCTYPE html P ...
8 cocos2dx添加场景切换效果，控制场景切换彻底完成之后再执行动画
1 添加场景切换效果供场景切换的类: CCTransitionJumpZoom CCTransitionProgressRadialCCW CCTransitionProgressRadial ...
html js 图片放大效果,JavaScript实现图片放大预览效果
代码实现: Document .preview-img { position: relative; height: 398px; } .mask { display: none; position: ...
html图片怎么设置悬浮效果,图片漂浮效果js实现
当鼠标在图片上方时,图片停止漂浮,点击关闭按钮可隐藏图片. var xPos=0; var yPos=0; var directionX=true; var directionY=true; var ...
html百叶窗切换效果,纯CSS3百叶窗式切换轮播图特效
这是一款使用纯CSS3制作的百叶窗式切换轮播图特效.该特效使用背景图片来制作,在轮播图切换时,通过一组div元素来制作百叶窗效果,非常的炫酷. 使用方法 HTML结构该轮播图特效中使用了6张背景图片 ...
CSS+JS带缩略图随机切换方式的图片切换效果
<html> <head> <title>CSS+JS带缩略图随机切换方式的图片切换效果丨芯晴网页特效丨CsrCode.Cn</title> <s ...

html中js左右图片切换效果,JS实现图片切换特效

html中js左右图片切换效果,JS实现图片切换特效相关推荐

最新文章

热门文章