求帮忙用jquery写一个简单的图片切换功能,本人是jquery菜鸟

HTML代码，默认第一个li是显示的，其他隐藏：<divid="slideshow"><ulclass="slides"><li><imgsrc="images/slid... HTML代码，默认第一个li是显示的，其他隐藏：
<div id="slideshow">
<ul class="slides">
<li><img src="images/sliderPic1.jpg" width="960" height="444" alt="portfolio pic 1" /></li>
<li><img src="images/sliderPic2.jpg" width="960" height="444" alt="portfolio pic 2" /></li>
<li class="bbb"><img src="images/sliderPic3.jpg" width="960" height="444" alt="portfolio pic 3" /></li>
<li><img src="images/sliderPic4.jpg" width="960" height="444" alt="portfolio pic 4" /></li>
<li><img src="images/sliderPic5.jpg" width="960" height="444" alt="portfolio pic 5" /></li>
</ul>
<span class="arrow previous">上一张</span>
<span class="arrow next">下一张</span>
</div> 展开

 我来答

2个回答

#合辑# 面试问优缺点怎么回答最加分？

tatooo
2013-04-01 · TA获得超过2119个赞

知道小有建树答主

回答量：2497

采纳率：46%

帮助的人：680万

我也去答题访问个人页

关注

展开全部

给你写了个jquery 的，需要先链接jquery插件。另外<li>请把position:absolute设置成这样

var t=1;
$(function(){
    len=$("#slideshow>ul>li").length;
    $("#slideshow>ul>li").hide();//隐藏全部
    $("#slideshow>ul>li").eq(0).show();//默认显示第一个
    time=setInterval("change()",3000);//每3秒自动播放
    $(".previous").click(function(){//点击上一个函数
        clearInterval(time);
        $("#slideshow>ul>li").fadeOut();
        $("#slideshow>ul>li").eq(t-2).fadeToggle();
        t--;
        if(t==0){
            t=len;
        }
        time=setInterval("change()",3000);
    })
    $(".next").click(function(){//点击下一个函数
        clearInterval(time);
        $("#slideshow>ul>li").fadeOut();
        $("#slideshow>ul>li").eq(t).fadeToggle();
        t++;
        if(t==len){
            t=0;
        }
        time=setInterval("change()",3000);
    })
})
function change(){//自动播放函数
    if(t<len){
        $("#slideshow>ul>li").fadeOut();
        $("#slideshow>ul>li").eq(t).fadeToggle();
        t++;   
    }else{
        t=0;
        $("#slideshow>ul>li").fadeOut();
        $("#slideshow>ul>li").eq(t).fadeToggle();
        t++;
    }
}

更多追问追答

追问

是哪个 jquery 插件 ？ 还有能不能 帮忙 加个切换 时 图片 出现 的特效？  多谢了，  悬赏分到时提高

追答

在<head>里链接一个

<SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></SCRIPT>

这个

放在所有<SCRIPT>标签的最上边

本回答由提问者推荐

已赞过 已踩过<

评论收起

匿名用户
2013-03-31

展开全部

setInterval(change, 1000*6);
var i = 1;
function change(){
    if (i != 5){
        $("img").src = "images/sliderPic" + i + ".jpg";
        i++;
    } else{
        i =1;
    }
}

追问

我这几张图片都写了，js 里面 只是 改一下 display  吧？

追答

用定时器，只要写一张图片就可以了，他过了指定的时间就会切换

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

求帮忙用jquery写一个简单的图片切换功能,本人是jquery菜鸟

其他类似问题

为你推荐：