JS实现图片切换特效


Posted in Javascript onDecember 23, 2019

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

知识点:

1.window.onload网页全部加载完后再执行
2.获取元素 设置属性
3.临界情况判断

运行效果:

JS实现图片切换特效

JS实现图片切换特效

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

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  #box{
    width: 1200px;
    margin: 0 auto;
  }
</style>
<body>
  <div id="box">
    <img id="icon" src="images/阿鲁1.gif" alt="">
    <p></p>
    <button id="prep">上一张</button>
    <button id="next">下一张</button>
  </div>
<script>
  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');
    }
  }
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
js分页工具实例
Jan 28 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
基于vue中的scoped坑点解说
Sep 04 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 Javascript
关于Js中new操作符的作用详解
Feb 21 Javascript
JS实现简易留言板特效
Dec 23 #Javascript
JS实现关闭小广告特效
Jan 29 #Javascript
vue element-ui实现动态面包屑导航
Dec 23 #Javascript
vue实现图片上传预览功能
Dec 23 #Javascript
vue项目实现图片上传功能
Dec 23 #Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 #Javascript
vue图片上传组件使用详解
Dec 23 #Javascript
You might like
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
php判断一个数组是否为有序的方法
2015/03/27 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
javascript this详细介绍
2016/09/19 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
探究python中open函数的使用
2016/03/01 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
详解python多线程之间的同步(一)
2019/04/03 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
详解Python打包分发工具setuptools
2019/08/05 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
2014年迎新年活动方案
2014/02/19 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
授权委托书样本
2014/04/03 职场文书
信息员培训方案
2014/06/12 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
目标责任书格式范文
2015/05/11 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
贷款收入证明格式
2015/06/24 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
python非标准时间的转换
2021/07/25 Python