私はjqueryの独自のスライダーを作成しましたが、非常にうまくスライドします。スライダーのコードを以下に示します。
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var show_items = 3;
for(var i=1; i<=show_items; i++)
{
$('#my_ul li:nth-child('+i+')').show();
}
function fade()
{
$('#my_ul li:first').delay(2000).animate({opacity: 0.2, width: "toggle"}, 1500);
}
fade();
setInterval(function()
{
var last = $('#my_ul li:first').html();
$('#my_ul li:first').remove();
$('#my_ul').append('<li>'+last+'</li>');
$('#my_ul li:nth-child('+show_items+')').fadeIn(1500);
fade();
}, 3500);
$("#my_ul").mouseover(function() {
$(this).stop();
return false;
});
});
</script>
<style type="text/css">
#my_ul li
{
list-style: none;
width: 205px;
height: 200px;
float: left;
display: none;
}
</style>
</head>
<body>
<ul id="my_ul">
<li>
<div style="background-color: red; width: 200px; height: 200px; float: left; margin-left: 5px;"></div>
</li>
<li>
<div style="background-color: blue; width: 200px; height: 200px; float: left; margin-left: 5px;"></div>
</li>
<li>
<div style="background-color: green; width: 200px; height: 200px; float: left; margin-left: 5px;"></div>
</li>
<li>
<div style="background-color: yellow; width: 200px; height: 200px; float: left; margin-left: 5px;"></div>
</li>
<li>
<div style="background-color: orange; width: 200px; height: 200px; float: left; margin-left: 5px;"></div>
</li>
</ul>
</body>
</html>
しかし、マウスオーバーでスライダーを停止または一時停止したい。停止または一時停止に使用するコードが機能しません。整理するのを手伝ってください。
前もって感謝します。