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

程序员文章站 2022-12-23 23:51:08

js原生带缩略图的图片切换效果本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自《JavaScript DOM编程艺术（中文第二版）》一书第10章中有一段代码。（可以直接baidu）左边是banner图，右边是缩略图，当鼠标滑入缩略 ......

本例中用到的 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原生带缩略图的图片切换效果