JavaScriptは京東輪図の効果をまねる
本論文の実例は、JavaScriptが京東輪放送図の効果展示の具体的なコードを共有しています。参考にしてください。具体的な内容は以下の通りです。
京东を模した轮播図を作りました。もちろんホームページの美しさはありません。
主な技術点：は3秒ごとに画像を自動的に切り替える。 マウスを画像に移動して自動的に停止し、マウスを移動したら続けます。 左右方向ボタンをクリックして、写真を手動で切り替えます。 マウスは灰色の円点に移動し、対応する画像を表示し、強調表示します。 HTMLコード:
轮播図は简単に见えるが、実现するにはまだ问题が多い。でも、見つけたのは全部解決しました。円の点とボタンは写真の上に置いてあります。 自動的に画像を切り替えましたが、対応するドットが点灯しませんでした。 マウスを円点に移動して写真が切り替わりましたが、次の自動点灯の円点は円点前の次の に移動しませんでした。第1の円が点灯します。つまり、ページを開けたばかりの時、左ボタンは反応しません。 左ボタンを一番右の円点に押すと、円点1を無視してそのまま円点2 にジャンプします。最後の円点で右ボタンを押すと、画像がない場合に切り替わります。 点左ボタンの切替時間は約2秒、右ボタンの切替時間は約5秒で、時間は標準の3秒に達していません。
でも、全部解決しました。
最大の感触は一つのバグを解決したばかりで、ちょうどうぬぼれている時に、また一つのバグが来たということです。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
京东を模した轮播図を作りました。もちろんホームページの美しさはありません。
主な技術点：
<body>
<h1> </h1>
<div id="did">
<!-- -->
<div id="img-div" onmouseover="doStop()" onmouseout="doStart()">
<img src="./1.jpg">
<img src="./2.jpg">
<img src="./3.jpg">
<img src="./4.jpg">
<img src="./5.jpg">
<img src="./6.jpg">
<img src="./7.jpg">
<img src="./8.jpg">
</div>
<!-- -->
<div id="btn-div">
<div id="left-btn" onclick="doLeftClick()">
<h3> < </h3>
</div>
<div id="right-btn" onclick="doRightClick()">
<h3> > </h3>
</div>
</div>
<!-- -->
<div id="cir-div">
<div onmouseover="doMove(1)"></div>
<div onmouseover="doMove(2)"></div>
<div onmouseover="doMove(3)"></div>
<div onmouseover="doMove(4)"></div>
<div onmouseover="doMove(5)"></div>
<div onmouseover="doMove(6)"></div>
<div onmouseover="doMove(7)"></div>
<div onmouseover="doMove(8)"></div>
</div>
</div>
</body>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-color: rgb(255, 249, 249);
}
h1 {
text-align: center;
padding-top: 40px;
color: rgba(250, 54, 129, 0.562);
}
#did {
position: relative;
width: 590px;
height: 470px;
margin: 30px auto;
}
#img-div {
position: absolute;
}
#img-div img {
width: 590px;
display: none;
cursor: pointer;
z-index: -1;
}
/* */
/* */
#img-div img:first-child {
display: block;
}
/* */
#cir-div div:first-child {
background: #fff;
}
#cir-div {
position: absolute;
/* */
left: 40px;
bottom: 25px;
}
/* */
#cir-div div {
width: 8px;
height: 8px;
float: left;
/* 50% */
border-radius: 50%;
margin-right: 6px;
border: 1px solid rgba(0, 0, 0, .05);
background: rgba(255, 255, 255, .4);
}
#left-btn {
position: absolute;
/* */
top: 45%;
/* */
width: 27px;
height: 38px;
background: rgba(119, 119, 119, 0.5);
border-radius: 0 20px 20px 0;
/* ， ， ， */
transition: background-color 0.3s ease-out;
}
#right-btn {
position: absolute;
/* */
top: 45%;
right: 0px;
/* */
width: 27px;
height: 38px;
background-color: rgba(119, 119, 119, 0.5);
border-radius: 20px 0 0 20px;
/* ， ， ， */
transition: background-color 0.3s ease-out;
}
#left-btn:hover {
background-color: rgba(32, 32, 32, 0.5);
cursor: pointer;
}
#right-btn:hover {
background-color: rgba(32, 32, 32, 0.5);
cursor: pointer;
}
#left-btn h3 {
color: #fff;
margin-top: 4px;
margin-left: 2px;
}
#right-btn h3 {
color: #fff;
margin-top: 4px;
margin-left: 8px;
}
</style>
<script>
//
var count = 1;
//
var time = null;
//
var imglist = document.getElementById("img-div").getElementsByTagName("img");
//
var cirlist = document.getElementById("cir-div").getElementsByTagName("div");
//
function show(x) {
for (var i = 0; i < imglist.length; i++) {
if (x == i + 1) {
//
imglist[i].style.display = "block";
//
cirlist[i].style.backgroundColor = "#fff";
} else {
imglist[i].style.display = "none";
cirlist[i].style.background = "rgba(255, 255, 255, .4)";
}
}
}
// ( 3 )
function doStart() {
if (time == null) {
time = setInterval(function () {
count++;
show(count);
if (count >= 8) {
count = 0;
}
}, 3000);
}
}
//
function doStop() {
if (time != null) {
clearInterval(time);
time = null;
}
}
// ，
function doMove(x) {
show(x);
// count，
count = x;
// ， count 0, doStart() count++，count 9，
if (count == 8) {
count = 0;
}
}
/*
i 、count show(x) x ：
i = [0,7];
x = [1,8];
count = [1,8];
*/
//
function doLeftClick() {
for (var i = 0; i < imglist.length; i++) {
//
if (imglist[i].style.display == "block") {
if (i == 0) {
show(8);
// ，break ， ， 1， 2
count = 0;
// 3
doStop();
doStart();
break;
}
show(i);
count = i;
// 3
doStop();
doStart();
break;
}
}
}
//
function doRightClick() {
for (var i = 0; i < imglist.length; i++) {
//
if (imglist[i].style.display == "block") {
if (i == 7) {
show(1);
count = 1;
doStop();
doStart();
break;
}
show(i + 2);
count = i + 2;
//
if (count >= 8) {
count = 0;
}
doStop();
doStart();
break;
}
}
}
doStart();
//
//（ ， 1 ， ）
doMove(1);
</script>轮播図は简単に见えるが、実现するにはまだ问题が多い。でも、見つけたのは全部解決しました。
最大の感触は一つのバグを解決したばかりで、ちょうどうぬぼれている時に、また一つのバグが来たということです。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。