私はすでに私のワードプレスプロジェクトで私の友人のjqueryスライダーを使い始めています。ただし、スライダーアイテム番号にカーソルを合わせると、マウスオーバー時にスライダーアイテムが更新されるようにします。
スクリーンショット;
これがHTMLコードです;
<div class="PozManset">
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
<div><a href="#"><img src="assets/demo/xfactor.jpg" class="manset_f" /><span class="manset_h">Haber - Yazı Başlığı 1</span> </a></div>
</div>
<div style="margin:3px 0px 0px 0px"><span id="sayfa_no"></span></div>
<div style="float:left;width:101px;background:#8169A7;margin-left:1px;height:24px;color:#fff;line-height:20px;">Bütün manşetler</div>
これがCSSコードです;
.PozHeadline {float:left;width:630px;height:340px;margin:20px 10px 5px 10px;}
.PozManset {cursor:pointer;width:630px; height:300px;display:none;background:#fff;}
.PozManset div{ width:630px; height:300px;overflow:hidden;}
.PozManset div img {float:left;width:630px;padding:0px;border:0px;}
.sayfa{float:left;padding:2px 0;margin:0 2px 0 0;color:#fff;cursor:pointer;font-family:calibri;font-size:14px;border:solid 1px #8169A7; width:20px;height:18px;line-height:20px; text-align:center;}
.manset_f{float:left;border:0;}
.manset_h{float:left;text-align:left;padding:0px 0px 0px 10px;background-color:#F669B0;color:#fff;width:620px;margin:-100px 0px 5px 0px;height:40px;line-height:40px;font-size:20px;color:#fff;font-weight:bold;}
.PozManset a{text-decoration:none;cursor:pointer;}
これがjqueryコードです;
var aktif = 1; var timer; var adet;
$(document).ready(function(){
$(".PozManset").show();
$(".PozManset div").hide();
$(".PozManset div:first").show();
adet = $(".PozManset div").length;
sayfalar();
renk(1);
timer = setInterval(degistir,5000);
});
function degistir()
{
$(".PozManset div:nth-child("+aktif+")").slideUp(100);
aktif = (aktif + 1) % adet;
if(aktif == 0) aktif = adet;
$(".PozManset div:nth-child("+aktif+")").slideDown(200);
renk(aktif);
}
function tikla(deger)
{
renk(deger);
$(".PozManset div:nth-child("+aktif+")").slideUp(100);
aktif = deger;
$(".PozManset div:nth-child("+aktif+")").slideDown(200);
clearInterval(timer);
timer = setInterval(degistir,5000);
}
function renk(deger)
{
$("#sayfa_no span").css("background-color","#8169A7")
$("#sayfa_no span:nth-child("+deger+")").css("background-color","#F776B6");
}
function sayfalar()
{
var sayfa_no = "";
for(var i = 1; i <= adet; i++)
{
sayfa_no += "<span class='sayfa' onclick=tikla("+i+")>"+i+"</span>"
}
$("#sayfa_no").html(sayfa_no);
}
現在、表示されている数字をクリックすると、スライダーの項目が変化しています。特定の番号でマウスカーソルを使用するのではなく、これを変更したいと思います。