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效果图是这样的

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

posted @ 2019-04-19 18:04  java小灵通  阅读(362)  评论(0编辑  收藏  举报