0
私はJQueryのスライダに実装しようとしています。私は1つの場所に立ち往生しています。ここまでは私のコードです。JQueryスライダ実装の問題
<!DOCTYPE html>
<html>
<head>
<title>Experimentation</title>
<style type="text/css">
#container {
overflow:hidden;
height: 200px;
margin: 0 auto;
width: 800px;
background-color: white;
}
.box1, .box2, .box3, .box4, .box5 {
width: 200px;
height: 200px;
background-color: gray;
z-index: 10000;
position: relative;
float: left;
overflow:hidden;
}
.information1, .information2, .information3, .information4, .information5 {
position: absolute;
width: 200px;
height:200px;
background-color: black;
opacity: 0.2;
top: 150px;
color: #FFF;
}
.information1 h3, .information2 h3,.information3 h3, .information4 h3, .information5 h3 {
margin: 3px 3px;
text-align: center;
}
.leftbutton img {
cursor:pointer;
}
.rightbutton img {
cursor:pointer;
}
</style>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
var topInitial = "0";
var topAfter = "150px";
$(function() {
$(".box1").mouseenter(function() {
$(".information1").animate({
top: topInitial }, "normal"); });
$(".box1").mouseleave(function() {
$(".information1").animate({
top: topAfter }, "normal"); });
$(".box2").mouseenter(function() {
$(".information2").animate({
top: topInitial }, "normal"); });
$(".box2").mouseleave(function() {
$(".information2").animate({
top: topAfter }, "normal"); });
$(".box3").mouseenter(function() {
$(".information3").animate({
top: topInitial }, "normal"); });
$(".box3").mouseleave(function() {
$(".information3").animate({
top: topAfter }, "normal"); });
$(".box4").mouseenter(function() {
$(".information4").animate({
top: topInitial }, "normal"); });
$(".box4").mouseleave(function() {
$(".information4").animate({
top: topAfter }, "normal"); });
$(".box5").mouseenter(function() {
$(".information5").animate({
top: topInitial }, "normal"); });
$(".box5").mouseleave(function() {
$(".information5").animate({
top: topAfter }, "normal"); });
$(".leftbutton img").click(function() {
$(".box1").animate({
marginLeft: "-=200px" }, "fast"); });
$(".rightbutton img").click(function() {
$(".box1").animate({
marginLeft: "+=200px" }, "fast"); });
});
</script>
</head>
<body>
<div class="leftbutton"><img src="left.gif"/></div>
<div id="container">
<span class="box1">
<div class="information1">
<h3> Criminal Penguins Having a Ball </h3>
<p> You have never seen something like this before!</p>
</div>
</span>
<span class="box2">
<div class="information2">
<h3> Criminal Penguins Having a Ball </h3>
<p> You have never seen something like this before!</p>
</div>
</span>
<span class="box3">
<div class="information3">
<h3> Criminal Penguins Having a Ball </h3>
<p> You have never seen something like this before!</p>
</div>
</span>
<span class="box4">
<div class="information4">
<h3> Criminal Penguins Having a Ball </h3>
<p> You have never seen something like this before!</p>
</div>
</span>
<span class="box5">
<div class="information5">
<h3> Criminal Penguins Having a Ball </h3>
<p> You have never seen something like this before!</p>
</div>
</span>
</div>
<span class="rightbutton"><img src="right.gif"/></span>
</body>
</html>
class = "box5"からのコメントを削除すると、上記のコメントで強調した問題があります。私はどこが間違っているのか知りたい。また、スライダについては、余白の左右のプロパティを変更する予定です。それはスライダーが実装されている正しい方法ですか？助けて！！
を実装はい、box5はユーザには見えません。火かき棒の位置を確認すると、box1の下部に表示されます。右にオーバーフローさせて、スライダの機能を実装できるようにします。私のポイントを得ましたか？また、今私が参照している本では、jQuery 1.4を使用しています。 – Cafecorridor
私はコードにいくつか変更を加えました。今すぐチェックしてください。スライダーが私に希望の効果を与えるようです。私はいくつかの修正を行い、他の問題に遭遇したかどうかを確認します。ありがとう。デザインは正しくありませんが、それは私の心配ではありません。私は機能に焦点を当てています。 – Cafecorridor