首页
所有分类
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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 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
项目打包(2) 监听(2) scss(1) vue-cli3.x(1) re模块(2) okenizer(1) 事件调度器(1) watch(1) 分词器(1) sched(1)
You might like
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
js压缩利器
2007/02/20 Javascript
javascript html 静态页面传参数
2009/04/10 Javascript
javascript event 事件解析
2011/01/31 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
12306 刷票脚本及稳固刷票脚本（防挂）
2017/01/04 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
Python OS模块实例详解
2019/04/15 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
买卖正宗运动鞋：GOAT
2019/12/06 全球购物
事业单位请假制度
2014/01/13 职场文书
法律进学校实施方案
2014/03/15 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
施工员岗位职责范本
2015/04/11 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python