经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JSJS库框架 » JavaScript » 查看文章
收藏！js原生带缩略图的图片切换效果
来源：cnblogs　　作者：Milkice　　时间：2018/10/11 9:20:53　　对本文有异议

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

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

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

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

  1. <!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,
  2.         li {list-style: none;}fieldset,
  3.         img {border: none;}legend {display: none;}em,
  4.         strong,
  5.         cite,
  6.         th {font-style: normal;font-weight: normal;}input,
  7.         textarea,
  8.         select,
  9.         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>

View Code

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

  1. function $(id) {return document.getElementById(id);
  2. }function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != 'function') {
  3.         window.onload = func;
  4.     } else {
  5.         window.onload = function () {
  6.             oldonload();
  7.             func();
  8.         }
  9.     }
  10. }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) {
  11.         clearTimeout(elem.movement);
  12.     }if (!elem.style.left) {
  13.         elem.style.left = "0px";
  14.     }if (!elem.style.top) {
  15.         elem.style.top = "0px";
  16.     }var xpos = parseInt(elem.style.left);var ypos = parseInt(elem.style.top);if (xpos == final_x && ypos == final_y) {return true;
  17.     }if (xpos < final_x) {var dist = Math.ceil((final_x - xpos) / 10);
  18.         xpos = xpos + dist;
  19.     }if (xpos > final_x) {var dist = Math.ceil((xpos - final_x) / 10);
  20.         xpos = xpos - dist;
  21.     }if (ypos < final_y) {var dist = Math.ceil((final_y - ypos) / 10);
  22.         ypos = ypos + dist;
  23.     }if (ypos > final_y) {var dist = Math.ceil((ypos - final_y) / 10);
  24.         ypos = ypos - dist;
  25.     }
  26.     elem.style.left = xpos + "px";
  27.     elem.style.top = ypos + "px";var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
  28.     elem.movement = setTimeout(repeat, interval);
  29. }function classNormal(iFocusBtnID) {var iFocusBtns = $(iFocusBtnID).getElementsByTagName('li');for (var i = 0; i < iFocusBtns.length; i++) {
  30.         iFocusBtns[i].className = 'normal';
  31.     }
  32. }function classCurrent(iFocusBtnID, n) {var iFocusBtns = $(iFocusBtnID).getElementsByTagName('li');
  33.     iFocusBtns[n].className = 'current';
  34. }function iFocusChange() {if (!$('ifocus')) return false;
  35.     $('ifocus').onmouseover = function () {
  36.         atuokey = true};
  37.     $('ifocus').onmouseout = function () {
  38.         atuokey = false};var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');var listLength = iFocusBtns.length;
  39.     iFocusBtns[0].onmouseover = function () {
  40.         moveElement('ifocus_piclist', 0, 0, 5);
  41.         classNormal('ifocus_btn');
  42.         classCurrent('ifocus_btn', 0);
  43.     }if (listLength >= 2) {
  44.         iFocusBtns[1].onmouseover = function () {
  45.             moveElement('ifocus_piclist', 0, -300, 5);
  46.             classNormal('ifocus_btn');
  47.             classCurrent('ifocus_btn', 1);
  48.         }
  49.     }if (listLength >= 3) {
  50.         iFocusBtns[2].onmouseover = function () {
  51.             moveElement('ifocus_piclist', 0, -600, 5);
  52.             classNormal('ifocus_btn');
  53.             classCurrent('ifocus_btn', 2);
  54.         }
  55.     }if (listLength >= 4) {
  56.         iFocusBtns[3].onmouseover = function () {
  57.             moveElement('ifocus_piclist', 0, -900, 5);
  58.             classNormal('ifocus_btn');
  59.             classCurrent('ifocus_btn', 3);
  60.         }
  61.     }if (listLength >= 5) {
  62.         iFocusBtns[4].onmouseover = function () {
  63.             moveElement('ifocus_piclist', 0, -1200, 5);
  64.             classNormal('ifocus_btn');
  65.             classCurrent('ifocus_btn', 4);
  66.         }
  67.     }
  68. }
  69. 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;
  70.     }if (currentNum == 0 && listLength != 1) {
  71.         moveElement('ifocus_piclist', 0, -300, 5);
  72.         classNormal('ifocus_btn');
  73.         classCurrent('ifocus_btn', 1);
  74.     }if (currentNum == 1 && listLength != 2) {
  75.         moveElement('ifocus_piclist', 0, -600, 5);
  76.         classNormal('ifocus_btn');
  77.         classCurrent('ifocus_btn',2);
  78.     }if (currentNum == 2 && listLength != 3) {
  79.         moveElement('ifocus_piclist', 0, -900, 5);
  80.         classNormal('ifocus_btn');
  81.         classCurrent('ifocus_btn',3);
  82.     }if (currentNum == 3) {
  83.         moveElement('ifocus_piclist', 0, -1200, 5);
  84.         classNormal('ifocus_btn');
  85.         classCurrent('ifocus_btn', 4);
  86.     }if (currentNum == 4) {
  87.         moveElement('ifocus_piclist', 0, 0, 5);
  88.         classNormal('ifocus_btn');
  89.         classCurrent('ifocus_btn',0);
  90.     }
  91.    
  92. }
  93. addLoadEvent(iFocusChange);

View Code

 效果如下图

 

 

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号