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="s4" class="pt" onmouseover="agin(this)" onmouseout="abc()" style="cursor:pointer">4</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>
<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").each(function(i,e){
$(".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图片切换

原文：https://www.cnblogs.com/wuxeudong/p/10737630.html