编程 Javascript

JS实现图片切换特效

Posted in Javascript onDecember 23, 2019

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

知识点：

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

运行效果：

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>

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

JS实现图片切换特效

- Author -

KaiSarH

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

[原创]站长必须要知道的javascript广告代码

May 30 Javascript

InnerHtml和InnerText的区别分析

Mar 13 Javascript

jquery 图片Silhouette Fadeins渐显效果

Feb 07 Javascript

jquery json 实例代码

Dec 02 Javascript

基于JavaScript实现Json数据根据某个字段进行排序

Nov 24 Javascript

巧方法 JavaScript获取超链接的绝对URL地址

Jun 14 Javascript

jQuery实现的简单悬浮层功能完整实例

Jan 23 Javascript

js实现返回顶部效果

Mar 10 Javascript

微信小程序出现wx.navigateTo页面不跳转问题的解决方法

Dec 26 Javascript

微信小程序实现团购或秒杀批量倒计时

Nov 01 Javascript

jQuery md5加密插件jQuery.md5.js用法示例

Aug 24 jQuery

在Vue中使用icon 字体图标的方法

Jun 14 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