网页图片切换特效如何实现 JS图片切换效果怎么做

网页中图片切换特效怎么实现

说到网页图片切换，很多小伙伴可能觉得很复杂，但其实其实真的没有那么难。比如你可以用网上下载的JS图片切换代码，轻轻松松实现图片自动播放和点击切换功能。具体来说，网站上有种带12345数字的小切换按钮，鼠标一点击数字，图片就自动换，绝对炫酷又好玩！而且还有详细教程和源码，参考链接也一并给你放上了，大家可以直接拿去用。

另外，想让你的图片切换更灵活动态，JavaScript可以帮大忙。比如简单的轮播图代码：（function(){ $(".example").luara({width:"980",height:"291",interval:2500,selected:"selected",direction:"left"});}); 这段代码就能让你的图片自动依次滑动，间隔时间还能调节，超级适合电商首页或者新闻轮播。

js 图片切换教程

鼠标事件如何控制图片切换怎么用JS实现点击和移入切换

下面咱们重点聊聊鼠标控制图片切换的那些事儿，毕竟这玩意儿在实际开发中太常见啦！

点击切换图片其实超简单。用JS代码控制图片元素的src属性就搞定了，比如写个按钮，点击时判断当前图片地址，切换成另一张，第二次再点就换回去。代码范例是这样的：

window.onload = function() {
  var Imgbtn = document.getElementById('btn');
  var Img = document.getElementById('img');
  Imgbtn.onclick = function() {
    if(Img.src == 'http://dl.bizhi.sogou.com/images/2012/01/19/191337.png') {
      Img.src = 'http://pic3.nipic.com/20090701/191337_225701072020_2.jpg';
    } else {
      Img.src = 'http://dl.bizhi.sogou.com/images/2012/01/19/191337.png';
    }
  }
}

鼠标滑动（mouseover）来切换图片也很火，淘宝店铺首页宝贝图就是这么干的。原理是监听鼠标进入和离开事件，图片路径在这两个事件里切换，代码走一波：

var oImg = document.getElementsByTagName('img')[0];
oImg.onmouseover = function() {
  oImg.src = '1.jpg'; // 鼠标进来显示第1张图
}
oImg.onmouseout = function() {
  oImg.src = '2.jpg'; // 鼠标移开变回第2张图
}

还有个更灵活的做法，是给图片绑定onmouseover和onmouseout事件，动态替换图片地址。像下面这样：

function changeImg(obImg, sNewURL) {
  if (sNewURL != "") obImg.src = sNewURL;
}

把这函数配合img标签用起来，就能实现鼠标经过改变图片，非常方便。

要实现鼠标移动自动切换图片，比如新闻选项卡那样，也是步骤清晰：

找到em标签节点
添加onmouseover和onmouseout事件监听器
用一个变量记录当前显示的图片，鼠标进来时重新赋值，图片路径就换了
鼠标离开恢复原样

这手法特别经典，和网页交互体验息息相关，超实用！

微信小程序那边也没忘记给大家支招！如果想做更酷炫的人脸切换动画，可以用腾讯AI开放平台的接口，后台Java SDK调接口，拿到融合后的图片URL，再搭配wx.createAnimation()制作过渡动画。要是只想用CSS3做淡入淡出、缩放，就用transition和@keyframes伺候，挺适合简单人脸切换场景。

js 图片切换教程