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 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
Axios取消重复请求的方法实例详解
Jun 15 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
python语音识别实践之百度语音API
2018/08/30 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
python numpy实现rolling滚动案例
2020/06/08 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
大学生活动策划方案
2014/02/10 职场文书
教师节商场活动方案
2014/02/13 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
父母对孩子的寄语
2014/04/09 职场文书
关于读书的演讲稿
2014/05/07 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
2014年食堂工作总结
2014/11/20 职场文书
联谊活动总结范文
2015/05/09 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书