首页
所有分类
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 相关文章推荐
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
javascript针对DOM的应用分析（二）
Apr 15 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
解析微信JS-SDK配置授权，实现分享接口
Dec 09 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 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
Word(2) 目录管理(1) Post(1) 二维码(2) Get(1) 延时任务(1) 条码(1) 日志(1) plus.io(1) 磁盘管理(1)
You might like
PHP 读取Postgresql中的数组
2013/04/14 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
详解python3百度指数抓取实例
2016/12/12 Python
Python 多线程实例详解
2017/03/25 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
Python绘制3D图形
2018/05/03 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
python super的使用方法及实例详解
2019/09/25 Python
python设置环境变量的作用整理
2020/02/17 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
ALDI奥乐齐官方海外旗舰店：德国百年超市
2017/12/27 全球购物
意大利奢侈品牌在线精品店：Jole.it
2020/11/23 全球购物
工作自荐信
2013/12/11 职场文书
结婚典礼证婚词
2014/01/08 职场文书
情人节寄语大全
2014/04/11 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
整脏治乱工作简报
2015/07/21 职场文书