JS原生帶縮略圖的圖片切換效果
更新時間：2018年10月10日 11:11:54 作者：Milkice
這篇文章主要介紹了JS原生帶縮略圖的圖片切換效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
本例中用到的 moveElement(elementID,final_x,final_y,interval)是來自《JavaScript DOM編程藝術(shù)（中文第二版）》一書第10章中有一段代碼。（可以直接baidu）
左邊是banner圖，右邊是縮略圖，當(dāng)鼠標(biāo)滑入縮略圖時，也會切換圖片。
一、這段是html代碼，可以直接拷貝，需要自己準(zhǔn)備相同大小的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代碼，其中用到了幾個經(jīng)典的js代碼。在js中需要修改對應(yīng)的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);
效果如下圖
推薦：
感興趣的朋友可以關(guān)注小編的微信公眾號【碼農(nóng)那點(diǎn)事兒】，更多網(wǎng)頁制作特效源碼及學(xué)習(xí)干貨哦！?。?/p>
總結(jié)
以上所述是小編給大家介紹的JS原生帶縮略圖的圖片切換效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了JavaScript中逗號運(yùn)算符介紹及使用示例,本文講解了逗號運(yùn)算符的定義、使用例子及實(shí)際使用的一些技巧,需要的朋友可以參考下2015-03-03
JavaScript 和 C++實(shí)現(xiàn)雙向交互
本文主要介紹了在CEF中實(shí)現(xiàn)JavaScript和C++的雙向交互,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
JavaScript常見的跨標(biāo)簽頁通信方式總結(jié)
跨標(biāo)簽頁通信是指在瀏覽器中的不同標(biāo)簽頁之間進(jìn)行數(shù)據(jù)傳遞和通信的過程,這篇文章為大家整理了前端常見的跨標(biāo)簽頁通信方式,有需要的小伙伴可以了解下2023-10-10
這篇文章主要為大家詳細(xì)介紹了js仿微信搶紅包功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了postcss安裝和使用,通過這些深度集成,PostCSS不僅僅是一個簡單的CSS處理工具,而是一種貫穿整個前端開發(fā)流程的技術(shù)手段,大大提升了CSS開發(fā)效率和產(chǎn)出質(zhì)量,隨著前端社區(qū)的發(fā)展,PostCSS的功能和應(yīng)用場景也會更加豐富多元,需要的朋友可以參考下2024-03-03
面試判斷元素是否在可視區(qū)域中IntersectionObserver詳解
這篇文章主要為大家介紹了判斷元素是否在可視區(qū)域中IntersectionObserver面試詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
ECharts餅圖顏色設(shè)置的4種方式總結(jié)
這篇文章主要給大家介紹了關(guān)于ECharts餅圖顏色設(shè)置的4種方式,ECharts餅圖的顏色可以通過多種方式進(jìn)行設(shè)置,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
大家在制作網(wǎng)頁或者小程序的時候經(jīng)常用到隨機(jī)數(shù)，作者整理了一個很簡單的JS生成隨機(jī)數(shù)的程序，一起學(xué)習(xí)下。2018-02-02
本文向大家重點(diǎn)講解一下Javascript中split函數(shù)使用，它可以將一個字符串分割為子字符串，然后將結(jié)果作為字符串?dāng)?shù)組返回，相信本文介紹你對split函數(shù)的用法有明確的認(rèn)識。2015-04-04
用javascript實(shí)現(xiàn)兼容IE7的類庫 IE7_0_9.zip提供下載
用javascript實(shí)現(xiàn)兼容IE7的類庫 IE7_0_9.zip提供下載...2007-08-08