jquery圖片切換
<div id="run">
<div id="s1" class="pt" onmouseover="agin(this)" onmouseout="abc()" style="cursor:pointer;background-color: royalblue;">1</div>
<div id="s2" class="pt" onmouseover="agin(this)" onmouseout="abc()" style="cursor:pointer">2</div>
<div id="s3" class="pt" onmouseover="agin(this)" onmouseout="abc()" style="cursor:pointer">3</div>
<div id="s5" class="pt" onmouseover="agin(this)" onmouseout="abc()" style="cursor:pointer">5</div>
<div id="s6" class="pt" onmouseover="agin(this)" onmouseout="abc()" style="cursor:pointer">6</div>
<div class="scroll_end"></div>
上面的是jsp頁面的代碼,通過onmouseover事件，onmouseout事件來進行操作,首先要想一個問題，就是你進入該網頁，是不是自動切換，所以要在用戶來到網頁就要執行該jquery代碼
現在來看看jquery代碼
var indexplay=1;
function agin(elt)
{
$("#img").animate({
opacity:‘0‘,
},1500);
$("#img").finish();
window.clearInterval(countPlay);
window.clearInterval(stop);
$(".pt").eq(i).css("background","")
})
$(".pt").eq(elt.innerHTML-1).css("background","royalblue")
$("#img").attr("src","images/dd_scroll_"+elt.innerHTML+".jpg");
indexplay=elt.innerHTML;
indexplay++;
$("#img").animate({
opacity:‘1‘,
},1000);
}
function abc()
{
$("#img").animate({
opacity:‘0‘,
},1000);
stop = setInterval("play()",2000);
}
function play()
{
if(indexplay>6)
{
indexplay=1;
}
$("#img").animate({
opacity:‘1‘,
},1000);
$(".pt").each(function(i,e){
$(".pt").eq(i).css("background","")
})
$(".pt").eq(indexplay-1).css("background","royalblue")
$("#img").attr("src","images/dd_scroll_"+indexplay+".jpg");
$("#img").animate({
opacity:‘0‘,
},1000);
indexplay++;
if(indexplay>6)
{
indexplay=1;
}
}
function fullscreen(){ //彈出窗口
roll(70);
window.open("NewFiles.jsp","","height=500,width=520","fullscreen=yes");
countPlay = setInterval("play()",2000);
}
通過上面代碼可以看出我是通過img的圖片地址來進行操作的，所以要有一個變量來改變img地址，到了這大概就清楚了，大家有沒有發現有一個問題，就是進入頁面就要執行自動切換，所以
要在body裏面加一個onload="fullscreen()"就行了，前面2行不用管，只用管著一句countPlay = setInterval("play()",2000);就OK了。效果在底部
jquery圖片切換