以下の私のコードは少し面倒なので、これら 2 つの問題を解決するにはあなたの専門知識が必要です。私はそこに多くの例を知っていますが、少し学びたいと思っていました。
- スライドすると、DIV アイテムが並んで表示されません。間違っている別の下に 1 つ。
- よりプロフェッショナルに見えるように、jQuery コードを拡張してループまたはより動的にすることはできますか? 100 個の DIV があると、処理できなくなります。
- 決して止めるべきではありません。
ありがとう
<html>
<style>
* { margin: 0px; padding: 0px; }
#cover { width: 100%; height: 300px; background: #CCCCCC; }
#cover div { width: 100%; height: 200px; background: #FFFFFF; }
.content { text-align: center; }
</style>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
event.preventDefault();
$('#slider_2').hide().delay(5000);
$('#slider_3').hide().delay(10000);
$('#slider_1').show('slide', { direction: 'left' }, 1000);
$('#slider_1').delay(4000).hide('slide', { direction: 'left' }, 1000);
$('#slider_2').show('slide', { direction: 'right' }, 1000);
$('#slider_2').delay(4000).hide('slide', { direction: 'right' }, 1000);
$('#slider_3').show('slide', { direction: 'left' }, 1000);
$('#slider_3').delay(4000).hide('slide', { direction: 'left' }, 1000);
});
</script>
</head>
<body>
<div id="cover">
<div id="slider_1"><p class="content">SLIDER ONE</p></div>
<div id="slider_2"><p class="content">SLIDER TWO</p></div>
<div id="slider_3"><p class="content">SLIDER THREE</p></div>
</div>
</body>
</html>