0
Grooveshark再生リストやYou tube再生リストのようなスライドエフェクトを作成しようとしています。私がこれまで行ってきたことは、ボタンとバーを実装することですが、今はスライド効果の実装に悩まされています。これは私のhtmlファイルのコードです：jQueryでスライドエフェクトを作成する
<!DOCTYPE html>
<html>
<head>
<title>CAMBIAR...</title>
<link rel="stylesheet" href="html 5/slider.css" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<div id="slider">
<div id="atras"><</div>
<div id="content">
</div>
<div id="adelante">></div>
<div id="operaciones">
<div id="add">+</div>
</div>
<div id="footer"></div>
</div>
<script>
$(document).ready(
function() {
var cuenta = 0;
var elementos = Array();
$("#slider #atras").mousedown(function() {
$(this).css({"box-shadow": "inset 5px 0px 10px rgba(0, 0, 0, 0.5)",
"color": "white"});
});
$("#slider #atras").mouseup(function() {
$(this).css({"box-shadow": "5px 5px 10px rgba(0, 0, 0, 0.5)",
"color": "black"});
});
$("#slider #adelante").mousedown(function() {
$(this).css({"box-shadow": "inset -5px 0px 10px rgba(0, 0, 0, 0.5)",
"color": "white"});
});
$("#slider #adelante").mouseup(function() {
$(this).css({"box-shadow": "5px 5px 10px rgba(0, 0, 0, 0.5)",
"color": "black"});
});
$("#slider #operaciones #add").click(function() {
var new_element = $("<div class='element' id='unique'>"+ (++cuenta) +"</div>");
//new_element.insertAfter($("#slider #content .element:last-child"));
$("#slider #content").prepend(new_element);
});
});
</script>
</body>
</html>
これは私のCSSファイルです：私は、誰かがこれで私を助けることができる期待
* {
margin: 0px;
padding: 0px;
}
body {
background: #57595a;
font-family: Helvetica, sans-serif;
font-size: 16px;
text-align: center;
}
#slider {
border: 5px dotted white ;
margin: 20px auto;
line-height: 6.3em;
padding: 10px;
width: 95%;
}
#slider #atras {
background-color: #CCCCCC;
border-radius: 0.25em;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
color: black;
float: left;
height: 100%;
width: 3%;
}
#slider #atras:hover {
cursor: pointer;
}
#slider #content {
text-align: left;
float: left;
width: 74%;
}
#slider #adelante {
background-color: #CCCCCC;
border-radius: 0.25em;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
color: black;
float: left;
height: 100%;
width: 3%;
}
#slider #adelante {
cursor: pointer;
}
#slider #operaciones {
float: left;
width: 20%;
}
#slider #content .element {
background: orange;
border-radius: 0.5em;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
color: white;
display: inline-block;
height: 100px;
margin: auto 5px;
text-align: center;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
width: 100px;
}
#slider #operaciones #add {
background-color: #f99200;
border-radius: 0.5em;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
color: white;
display: inline-block;
height: 50px;
vertical-align: middle;
margin: 2px 5px;
line-height: 3.2em;
text-align: center;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
width: 50px;
}
#slider #content .element:hover {
background-color: #8a8a8a;
color: white;
}
#slider #operaciones #add:hover {
background-color: rgb(97, 103, 106);
cursor: pointer;
}
#footer {
clear: both;
}
。どんなアプローチも有効です。私は何をすべきかを知る必要があります。ありがとう、私は皆の助けに感謝します。 jQueryのモバイル
可能重複して行うことができる[どのように私はJavaScriptでカルーセル/スライダーの効果を作成することができますか？]（http://stackoverflow.com/questions/ 9937471/how-can-i-create-a-carousel-slider-effect-in-javascript） –