最近の研究ではJavaScript、カルーセルマップのローリング効果でやりたい、結果をたくさんやって起動しようとするが、非常に適切ではない、次のように他の人のアイデアを見て、彼が偽物を作った、コードがあります
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
ul {
list-style: none;
width: 1200px;
height: 600px;
padding: 0px;
}
li {
float: left;
}
li img {
width: 400px;
height: 600px;
}
.keep {
width: 400px;
height: 600px;
position: absolute;
overflow: hidden;
margin-left: 30%;
}
.left {
font-size: 25px;
color: rgba(187, 187, 187, 0.5);
border: 1px solid #bf9999;
border-radius: 100%;
width: 30px;
height: 30px;
padding-bottom: 3px;
font-weight: bold;
text-align: center;
vertical-align: middle;
position: absolute;
top: 250px;
left: 20px;
}
.right {
font-size: 25px;
color: rgba(187, 187, 187, 0.5);
border: 1px solid #bf9999;
border-radius: 100%;
padding-bottom: 3px;
width: 30px;
height: 30px;
font-weight: bold;
text-align: center;
vertical-align: middle;
position: absolute;
top: 250px;
left: 350px;
}
</style>
</head>
<body>
<div class="keep">
<ul>
<li><a href="#"><img src="img/1.png"></a></li>
<li><a href="#"><img src="img/2.jpg"></a></li>
<li><a href="#"><img src="img/3.png"></a></li>
</ul>
<!-- 左边移动 -->
<a href="###" onclick="left();">
<span class="left">
<
</span>
</a>
<!-- 右边移动 -->
<a href="###" onclick="right();">
<span class="right">
>
</span>
</a>
</div>
<script>
// 图片现在的位置
var nowImgPosition = 0;
// 需要移动的位置
var movePosition = 0;
// 按下左边按钮
function left() {
// 如果图片已经在最左边 - 回到最后一张
movePosition += 400;
if (movePosition > 0) {
movePosition = -800;
return;
}
}
// 按下右边按钮
function right() {
// 如果图片已经在最右边 - 回到第一张
movePosition -= 400;
if (movePosition < -800) {
movePosition = 0;
return;
}
}
// 每隔30毫秒图片移动一段距离
setInterval(function() {
nowImgPosition = nowImgPosition + (movePosition - nowImgPosition) / 10;
document.querySelector('ul').style.marginLeft = nowImgPosition + 'px';
}, 30);
</script>
</body>
</html>
コードは、ローリングカルーセルフィギュアの効果を達成することができますが、ページに埋め込まれたカルーセル図をしたいか、少し問題があれば、私は、UL、行を終了し、あなたは、ULの周りをしたい場合は、より場所を共有しますテキストを追加し、その後、位置がないので、ここでそれは位置を浮動UL占有しないように最善であるだろう。
私は広い、統一さ400ピクセルの直接絵としてここに死んでセットしました。あなたは、画像のサイズを調整する必要がある場合は、上記のコードは、彼らが必要とする幅任意の画像サイズ400ピクセルに変更し、JSコード800の幅（*の画像を変更することを忘れないことができます（カルーセル数写真 - 1） ）、上記のコード600PX高さに直接像の高さは、画像に変更することができます。そうすることが多くの場所を変更するにはあまりにも面倒だろう、あなたは、JSコードを設定することができます使用し、その後、JSコードで可変幅と高さのサイズの統一された画像を設定することができますので、後で変更することを、そして唯一の2つの変数のサイズを変更する必要がありますことができます。
あなたも表情で何をコメント欄を議論することができ、バグを見つけた場合（*╹▽╹*）
