首页
所有分类
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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
原生JavaScript实现刮刮乐
Sep 29 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
watch(1) 事件调度器(1) sched(1) re模块(2) vue-router-link(1) 项目打包(2) scss(1) TimePickerView(1) vue-cli3.x(1) 监听(2)
You might like
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
购物车前端开发（jQuery和bootstrap3）
2016/08/27 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
Python中的Matplotlib模块入门教程
2015/04/15 Python
python获取外网ip地址的方法总结
2015/07/02 Python
Python对数据库操作
2016/03/28 Python
Python实现学校管理系统
2018/01/11 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
python实现简单的文字识别
2018/11/27 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
Django多数据库的实现过程详解
2019/08/01 Python
Python3操作Excel文件（读写）的简单实例
2019/09/02 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
微软台湾官方网站：Microsoft台湾
2018/08/15 全球购物
澳大利亚礼品篮网站：Macarthur Baskets
2019/10/14 全球购物
意大利网上购书网站：Libraccio.it
2021/02/03 全球购物
通用求职信范文模板分享
2013/12/27 职场文书
职工运动会感言
2014/02/07 职场文书
新教师岗前培训方案
2014/06/05 职场文书
公司行政助理岗位职责
2015/04/11 职场文书