この記事では、JSを使用して一般的なWebサイトのホームページにカルーセル効果を作成するための特定のコードを共有しています。特定のコンテンツは次のとおりです
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> picture carousel </title> <style> .warp {width：600px;高さ：750px;位置：相対;マージン：30px auto 0;オーバーフロー：隠し; } #box {width：600px;高さ：750px;位置：絶対;上：0px;左：0px;オーバーフロー：隠し; /*overflow-x：auto;*/} #box #con {width：6000px;高さ：750px;オーバーフロー：隠し; } #con img {float：left;幅：600px;高さ：750px; } #btnl {position：absolute;左：0px;上：366px;幅：36px;高さ：36px;背景：url（images/btnl.png）0 0 No-Reepeat;カーソル：ポインター; } #btnr {position：absolute;右：0px;上：366px;幅：36px;高さ：36px;背景：url（images/btnr.png）0 0 No-Reepeat;カーソル：ポインター; } #num {position：absolute;下：10px;左：148px;オーバーフロー：隠し;リストスタイル：なし; } #num li {float：left;マージン：0 5px;フォントサイズ：16px;ラインハイト：25px;高さ：25px;幅：25px;背景：#ccc;テキストアライグ：センター;カーソル：ポインター; } #num li.select {background-color：green;色：白; } </style> </head> <body> <div> <div id = "box"> <div id = "con"> <img src = "simase/meinv1.jpg"> <img src = "images/meinv2.jpg"> <img src = "img/meinv3.jpg"> <img src = "> <img sr src = "images/meinv5.jpg"> <img src = "/meinv6.jpg"> </div> </div> <div div = "btnl"> </div> <div id = "btnr"> </div> <ul id = "num"> <li> </li> </li> </li> <li> 5 </li> <li> 6 </li> </div> <script> var box = document.getElementById（ 'box'）; var con = document.getElementById（ 'con'）; var imgs = con.getelementsbytagname（ 'img'）; var btnl = document.getElementById（ 'btnl'）; var btnr = document.getElementById（ 'btnr'）; var num = document.getElementById（ 'num'）; var num = document.getElementById（ 'num'）; var num = document.getElementById（ 'num'）; var btnr = document.getElementById（ 'num'）; var num = document.getElementById（ 'num'）; var num = document.getElementById（ 'num'）; var lis = num.getElementsByTagname（ 'li'）; var timer1 = null、timer2 = null; var imgw = imgs [0] .clientwidth; var x = 0;関数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+= stepleng.scrollleft = start;}、20） } lis [x] .classname = 'select'; } function move（）{// 3秒ごとにデフォルトのスクロールが左にスクロールします。 Timer1 = setInterval（function（）{x ++; if（x> = imgs.length）{x = 0;} imgscroll（）; for（var i = 0; i <lis.length; i ++）{lis [i] .classname = 'none'; lis [x]。 " } move（）; //デフォルトのスクロール関数を起動します。 btnr.onclick = function（）{clearinterval（timer1）; x ++; if（x> = imgs.length）{x = 0; } imgscroll（）;動く（）; } btnl.onclick = function（）{clearinterval（timer1）; x--; if（x <0）{x = imgs.length-1; } imgscroll（）;動く（）; } for（var i = 0; i <lis.length; i ++）{lis [i] .index = i; lis [i] .onclick = function（）{x = this.index; imgscroll（）;動く（）; }} </script> </body> </html>特定の効果は、HAO123ナビゲーションページの写真Carouselの効果に基づいています。あなたはそれを参照するためにウェブサイトに行くことができます。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。