jquery图片切换

图片的切换主要用的知识点事JavaScript和jquery，只要掌握着二种，基本可以写出图片切换效果，如果要好看点的特效，那就到网上找一个插件吧，我自己也是学后端的，偶尔也写一下前段，

我没有专业写前段的好看，所以就将就的用吧，企业也不会用这样的，一般企业都是前后端分离的，所以写的出这种效果就行了。

</div>
<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>

首先要吧自己的html网页建好，这里面我引用了css文件的，所以css样式要自己写哦，这就不多说了，html网页里面用了onmouseover事件和onmouseout，

 

现在就缺jquery代码了，好那就看下jquery代码吧！

function fullscreen(){ 
     countPlay = setInterval("play()",2000);
}
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;
    }
}

indexplay是控制图片地址的，初始化从1开始，所以从第一张图片开始， $("#img").animate({opacity:'0',},1500);这个其实加不加都无所谓，就是一个动画效果。刚开始要调用，

stop = setInterval("play()",2000);

因为进这个网页就是自动

切换图片的play是自动切换图片的方法，是2秒一次，可能有一些人觉得奇怪，我为什么叫方法，我是学java的所以受到java的影响，习惯了，$("#img").attr("src","images/dd_scroll_"+indexplay+".jpg");
通过这个方法将图片的地址改变，这也是最核心的。$(".pt").each(function(i,e){$(".pt").eq(i).css("background","")})$(".pt").eq(indexplay-1).css("background","royalblue")
图片切换了，按钮是不是也要切换，所以我们将按钮的颜色也改变一下，所以连最基本的图片切换效果弄好了，那就离成功不远了，agin方法是点上去的效果，自己看下吧。可能我的命名可能不怎么规范

也是随便写的，所以大家也不要笑话我，这个html效果图是这样的

代码量不是很多，所以难度也不是很大，要认真看哦，如果觉得写的有问题，那就评论出来吧，欢迎大家评论！