誰もがHAO123ウェブサイトに精通しています。具体的な効果についてもっと言う必要はありません。興味のある友達はレンダリングを参照できます。次のエディターは、コードを実装するというアイデアを共有します。もちろん、ニーズに応じてコードを適切に追加、変更、削除できます。
重要なコードは次のとおりです。
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> picture carousel </title> <style> .warp {width：600px; height：750px; position：wosition：relative; margin：30px auto 0; overflow：box; Absolute; Top：0px;左：0px;オーバーフロー：hidden;/*overflow-x：auto;*/}＃box #con {width：6000px; height：750px; hidden;}＃con img {float：left; width：600px; height; 366px; width：36px; height：36px; background：url（images/btnl.png）0 0 no-repeat; cursor：pointer;}＃btnr {aspotion：absolute; right：0px; top：366px; width：36px; height：36px; pointer;}＃num {position：absolute; bottom：10px;左：148px;オーバーフロー：hidden; list-style：none;}＃num li {float：left; margin：0 5px; font-size：16px; line-height：25px; height：25px; width：25px; li.Select {background-color：green; color：white;} </style> </head> <body> <div> <div id = "box"> <div id = "con"> <img src = "images/meinv1.jpg"> <img src = "images/meinv2.jpg"> <img src = "<img"> src = "images/meinv4.jpg"> <img src = "images/meinv5.jpg"> <img src = "meinv6.jpg"> </div> <div id = "btnl"> </div> <div id = "btnr"> </div> <ul id = "num"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> <li> 6 </li> </ul> </div> <script> var box = document.getElementbyid（ 'box'）; var con = documentelementyid（ 'con'）; var imgs = con.getElementsByTagname（ 'img'）; var btnl = document.getElementById（ 'btnl'）; var btnr = document.getElementbyId（ 'btnr'）; var num = document.getElementById（ 'num'）; var lis = num.getelementsBytagramam（ 'li'）; 'li'）; imgw = imgs [0] .clientwidth; var x = 0; function imgscroll（）{//画像スイッチvar start = box.scrollleft; var end = imgw*x; var change = end-start; var minstep = 0; var maxstep = 30; var stepLength=change/maxstep;clearInterval(timer2);timer2=setInterval(function(){minstep++;// console.log(minstep);if (minstep>=maxstep) {clearInterval(timer2);}start+=stepLength;box.scrollLeft=start;},20) for (var i = 0; i < lis.length; i++) {lis [i] .classname = 'none';} lis [x] .classname = 'select';} function move（）{//左に3秒ごとに左にスクロールするclear interval（timer1）; timer1 = setinterval（function（）{x ++; if（x> = imgs.length）{x = 0; for < lis.length; lis [i] .classname = 'none'; lis [x] .classname = 'select';}}、3000）;} move（）; //デフォルトのスクロール関数を起動します。 btnr.onclick = function（）{clearinterval（timer1）; x ++; if（x> = imgs.length）{x = 0;} imgscroll（）; move（）;} btnl.onclick = function（）{clearinterval（timer1）; x - ; if（x <0）; {x = imgs.length-1;} imgscroll（）; move（）;} for（var i = 0; i <lis.length; i ++）{lis [i] .index = i; lis [i]。上記は、編集者が紹介したJS模倣HAO123ナビゲーションページの画像カルーセル効果です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！