首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS原生带缩略图的图片切换效果

Posted in Javascript onOctober 10, 2018

本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自《JavaScript DOM编程艺术（中文第二版）》一书第10章中有一段代码。（可以直接baidu）

左边是banner图，右边是缩略图，当鼠标滑入缩略图时，也会切换图片。

一、这段是html代码，可以直接拷贝，需要自己准备相同大小的banner图，例中图片都是500x300

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>图片轮播</title>
  <script src="./js.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      word-break: break-all;
    }
    body {
      background: #FFF;
      color: #333;
      font: 12px/1.6em Helvetica, Arial, sans-serif;
    }
    a {
      color: #0287CA;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    ul,
    li {
      list-style: none;
    }
    fieldset,
    img {
      border: none;
    }
    legend {
      display: none;
    }
    em,
    strong,
    cite,
    th {
      font-style: normal;
      font-weight: normal;
    }
    input,
    textarea,
    select,
    button {
      font: 12px Helvetica, Arial, sans-serif;
    }
    table {
      border-collapse: collapse;
    }
    html {
      overflow: -moz-scrollbars-vertical;
    }
    #ifocus {
      width: 620px;
      height: 320px;
      margin: 20px;
      border: 1px solid #DEDEDE;
      background: #F8F8F8;
    }
    #ifocus_pic {
      display: inline;
      position: relative;
      float: left;
      width: 500px;
      height: 300px;
      overflow: hidden;
      margin: 10px 0 0 10px;
    }
    #ifocus_piclist {
      position: absolute;
    }
    #ifocus_piclist li {
      width: 500px;
      height: 300px;
      overflow: hidden;
    }
    #ifocus_piclist img {
      width: 500px;
      height: 300px;
    }
    #ifocus_btn {
      display: inline;
      float: right;
      width: 94px;
      margin: 9px 9px 0 0;
    }
    #ifocus_btn li {
      width: 94px;
      height: 57px;
      cursor: pointer;
      opacity: 0.5;
      -moz-opacity: 0.5;
      filter: alpha(opacity=50);
    }
    #ifocus_btn img {
      width: 80px;
      height: 50px;
      margin: 7px 0 0 11px;
    }
    #ifocus_btn .current {
      /* background: url(i/ifocus_btn_bg.gif) no-repeat; */
      opacity: 1;
      -moz-opacity: 1;
      filter: alpha(opacity=100);
    }
  </style>
</head>
<body>
  <div id="ifocus">
    <div id="ifocus_pic">
      <div id="ifocus_piclist" style="left:0; top:0;">
        <ul>
          <li><a href="#"><img src="./images/1.jpg" alt="" /></a></li>
          <li><a href="#"><img src="./images/2.jpg" alt="" /></a></li>
          <li><a href="#"><img src="./images/3.jpg" alt="" /></a></li>
          <li><a href="#"><img src="./images/4.jpg" alt="" /></a></li>
          <li><a href="#"><img src="./images/5.jpg" alt="" /></a></li>
        </ul>
      </div>
    </div>
    <div id="ifocus_btn">
      <ul>
        <li class="current"><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
        <li><img src="./images/4.jpg" alt="" /></li>
        <li><img src="./images/5.jpg" alt="" /></li>
      </ul>
    </div>
  </div>
</body>
</html>

二、这段是js代码，其中用到了几个经典的js代码。在js中需要修改对应的id名字、图片移动的尺寸等。

function $(id) {
  return document.getElementById(id);
}
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function () {
      oldonload();
      func();
    }
  }
}
function moveElement(elementID, final_x, final_y, interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {
    clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
    elem.style.left = "0px";
  }
  if (!elem.style.top) {
    elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
    return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos) / 10);
    xpos = xpos + dist;
  }
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x) / 10);
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos) / 10);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y) / 10);
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
  elem.movement = setTimeout(repeat, interval);
}
function classNormal(iFocusBtnID) {
  var iFocusBtns = $(iFocusBtnID).getElementsByTagName('li');
  for (var i = 0; i < iFocusBtns.length; i++) {
    iFocusBtns[i].className = 'normal';
  }
}
function classCurrent(iFocusBtnID, n) {
  var iFocusBtns = $(iFocusBtnID).getElementsByTagName('li');
  iFocusBtns[n].className = 'current';
}
function iFocusChange() {
  if (!$('ifocus')) return false;
  $('ifocus').onmouseover = function () {
    atuokey = true
  };
  $('ifocus').onmouseout = function () {
    atuokey = false
  };
  var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');
  var listLength = iFocusBtns.length;
  iFocusBtns[0].onmouseover = function () {
    moveElement('ifocus_piclist', 0, 0, 5);
    classNormal('ifocus_btn');
    classCurrent('ifocus_btn', 0);
  }
  if (listLength >= 2) {
    iFocusBtns[1].onmouseover = function () {
      moveElement('ifocus_piclist', 0, -300, 5);
      classNormal('ifocus_btn');
      classCurrent('ifocus_btn', 1);
    }
  }
  if (listLength >= 3) {
    iFocusBtns[2].onmouseover = function () {
      moveElement('ifocus_piclist', 0, -600, 5);
      classNormal('ifocus_btn');
      classCurrent('ifocus_btn', 2);
    }
  }
  if (listLength >= 4) {
    iFocusBtns[3].onmouseover = function () {
      moveElement('ifocus_piclist', 0, -900, 5);
      classNormal('ifocus_btn');
      classCurrent('ifocus_btn', 3);
    }
  }
  if (listLength >= 5) {
    iFocusBtns[4].onmouseover = function () {
      moveElement('ifocus_piclist', 0, -1200, 5);
      classNormal('ifocus_btn');
      classCurrent('ifocus_btn', 4);
    }
  }
}
setInterval('autoiFocus()', 3000);
var atuokey = false;
function autoiFocus() {
  if (!$('ifocus')) return false;
  if (atuokey) return false;
  var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
  var listLength = focusBtnList.length;
  for (var i = 0; i < listLength; i++) {
    if (focusBtnList[i].className == 'current') var currentNum = i;
  }
  if (currentNum == 0 && listLength != 1) {
    moveElement('ifocus_piclist', 0, -300, 5);
    classNormal('ifocus_btn');
    classCurrent('ifocus_btn', 1);
  }
  if (currentNum == 1 && listLength != 2) {
    moveElement('ifocus_piclist', 0, -600, 5);
    classNormal('ifocus_btn');
    classCurrent('ifocus_btn',2);
  }
  if (currentNum == 2 && listLength != 3) {
    moveElement('ifocus_piclist', 0, -900, 5);
    classNormal('ifocus_btn');
    classCurrent('ifocus_btn',3);
  }
  if (currentNum == 3) {
    moveElement('ifocus_piclist', 0, -1200, 5);
    classNormal('ifocus_btn');
    classCurrent('ifocus_btn', 4);
  }
  if (currentNum == 4) {
    moveElement('ifocus_piclist', 0, 0, 5);
    classNormal('ifocus_btn');
    classCurrent('ifocus_btn',0);
  }
}
addLoadEvent(iFocusChange);

 效果如下图

JS原生带缩略图的图片切换效果

推荐：

感兴趣的朋友可以关注小编的微信公众号【码农那点事儿】，更多网页制作特效源码及学习干货哦！！！

总结

以上所述是小编给大家介绍的JS原生带缩略图的图片切换效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

JS原生带缩略图的图片切换效果

- Author -

Milkice

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

Javascript 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
js实现前面自动补全位数的方法
Oct 10 #Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 #Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 #Javascript
解决eclipse中没有js代码提示的问题
Oct 10 #Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 #Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 #Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 #jQuery
YB400(2) SRF-S83(1) 南麂列岛(1) 直流胆(1) YB235(1) 森海(1) 台湾(1) S2000(3) PL660(1) MX500(1)
You might like
php cookis创建实现代码
2009/03/16 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
js倒计时抢购实例
2015/12/20 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值，数据同步
2019/07/13 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
怎么快速自学python
2020/06/22 Python
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
小加工厂管理制度
2014/01/21 职场文书
实习生求职自荐信
2014/02/07 职场文书
客服专员岗位职责
2014/02/28 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
检讨书范文300字
2015/01/28 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
重阳节活动主持词
2015/07/04 职场文书
Python学习之包与模块详解
2022/03/19 Python
Java版 单机五子棋
2022/05/04 Java/Android