JS模倣ポテトネットのサムネイルを使用したフォーカス画像のスイッチング効果を実現する方法

著者：Eve Cole 更新時間：2025-05-30 13:00:04

この記事では、JS模倣Tudouネットのフォーカス画像スイッチング効果をサムネイルと実装する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。

次のようにコードをコピーします。<

<head>

<title>フォーカス画像スイッチング模倣ポテトネットのサムネイルの効果</タイトル>

/ *リセットスタイル */

* {マージン：0;パディング：0;ワードブレイク：ブレークオール; }

ボディ{背景：#fff;色：＃333;フォント：12px/1.6em helvetica、arial、sans-serif; }

H1、H2、H3、H4、H5、H6 {font-size：1em; }

{color：＃039;テキスト装置：なし; }

A：Hover {Text-Decoration：underline; }

ul、li {list-style：none; }

Fieldset、IMG {border：none; }

em、strong、cite、th {font-style：normal; font-weight：正常; }

/ * Focus_Change Style */

#focus_change {position：relative;幅：450px;高さ：295px;オーバーフロー：隠し;マージン：20px 0 1px 60px; }

#focus_change_list {position：absolute;幅：1800px;高さ：295px; }

#focus_change_list li {float：left; }

#focus_change_list li img {width：450px;高さ：295px; }

.focus_change_opacity {position：absolute;幅：450px;高さ：70px;トップ：225px;左：0;背景：＃000;フィルター：アルファ（不透明度= 50）; -moz-opacity：0.5;不透明度：0.5; }

#focus_change_btn {position：absolute;幅：450px;高さ：65px;トップ：225px;左：0; }

#focus_change_btn ul {padding-left：5px; }

#focus_change_btn li {display：inline;フロート：左;マージン：0 15px;パディングトップ：12px; }

#focus_change_btn li img {width：76px;高さ：50px;国境：2pxソリッド＃888; }

#focus_change_btn .current {background：url（/uploadfile/200901/1/6C164133877.gif）No-Repeat 37px 8px;}

#focus_change_btn .current img {border-color：#eee; }

</style>

function $（id）{return document.getElementById（ID）; }

function MoveElement（elementId、final_x、final_y、interval）{

if（！document.getElementById）falseを返します。

if（！document.getElementByID（elementID））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）{

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 = setimeout（繰り返し、間隔）;

}

function classnormal（）{

var focusbtnlist = $（ 'focus_change_btn'）。getelementsbytagname（ 'li'）;

for（var i = 0; i <focusbtnlist.length; i ++）{

focusbtnlist [i] .classname = '';

}

関数FocusChange（）{

var focusbtnlist = $（ 'focus_change_btn'）。getelementsbytagname（ 'li'）;

focusbtnlist [0] .onmouseover = function（）{

MoveElement（ 'Focus_Change_List'、0,0,5）;

classnormal（）

focusbtnlist [0] .classname = 'current'

}

focusbtnlist [1] .onmouseover = function（）{

moveElement（ 'focus_change_list'、-450,0,5）;

classnormal（）

focusbtnlist [1] .classname = 'current'

}

focusbtnlist [2] .onmouseover = function（）{

moveElement（ 'focus_change_list'、-900,0,5）;

classnormal（）

focusbtnlist [2] .classname = 'current'

}

focusbtnlist [3] .onmouseover = function（）{

moveElement（ 'focus_change_list'、-1350,0,5）;

classnormal（）

focusbtnlist [3] .classname = 'current'

}

setInterval（ 'autofocuschange（）'、5000）;

var atuokey = false;

function autofocuschange（）{

$（ 'focus_change'）。onmouseover = function（）{atuokey = true}

$（ 'focus_change'）。onmouseout = function（）{atuokey = false}

if（atuokey）return;

var focusbtnlist = $（ 'focus_change_btn'）。getelementsbytagname（ 'li'）;

for（var i = 0; i <focusbtnlist.length; i ++）{

if（focusbtnlist [i] .classname == 'current'）{

var currentnum = i;

}

if（currentnum == 0）{

moveElement（ 'focus_change_list'、-450,0,5）;

classnormal（）

focusbtnlist [1] .classname = 'current'

}

if（currentnum == 1）{

moveElement（ 'focus_change_list'、-900,0,5）;

classnormal（）

focusbtnlist [2] .classname = 'current'

}

if（currentnum == 2）{

moveElement（ 'focus_change_list'、-1350,0,5）;

classnormal（）

focusbtnlist [3] .classname = 'current'

}

if（currentnum == 3）{

MoveElement（ 'Focus_Change_List'、0,0,5）;

classnormal（）

focusbtnlist [0] .classname = 'current'

}

window.onload = function（）{

FocusChange（）;

}

</script>

</head>

<body>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</div> <！ - focus_change end->

</body>

</html>

この記事がみんなのJavaScriptプログラミングに役立つことを願っています。