jquery自动轮播,jQuery实现轮播

用jquery或js实现三个div自动循环轮播

可以参考下面的daima :

//3个div的统一class = 'div'

var index =0;

//3秒轮播一次

var timer = setInterval(function(){

index = (index == 2) ? 0 : index + 1;       

//某个div显示，其他的隐藏

$(".div").hide().eq(index).show(); 

}, 3000);

扩展资料：

javaScript参考函数

getUTCFullYear() 根据邦际时间来失掉完全的年份

getUTCMonth() 依据国际时间来得到月份(0-11)

getUTCDate() 依据国际时间来失掉日(1-31)

getUTCHours() 依据国际时间来失掉小时(0-23)

getUTCMinutes() 根据邦际光阴来往归分钟(0-59)

getUTCMilliseconds()依据国际时间来返回毫秒(0-999)

参考资料来源：百度百科-javascript

参考资料来源：百度百科-jQuery

相关问答

Q1: JQuery自适应窗口大小轮播图怎么加上自动轮播

您好，如果自适应窗口的轮播图，加上自动轮播。

div id='banner'

    ul

        li/li

        li/li

        li/li

    /ul

/div

//如果轮播图宽度占满全屏的话。并且是类似于上述html的格式。

var index = 0;

var oBanner = $('#banner');

var iLiLength = oBanner.find('li').length;

setInterval(function(){

    if (i  iLiLength)){

        i = 0;

    }

   

    i++;

   

    oUl.animate({

        left: -index * $(window).width()

    },1000);

    

},1000);

Q2: jquery自动轮播图代码只能出现一张图片第二三张就空白了 轮播正常播放

第一张显示没问题，第二张以及之后的图片显示为空白。

首先，排除掉图片路径没问题。（如果有问题，也不会网上提问了）

初步判断，css静态定位错误。

css样式固定在了第一张图片，第二，第三之后的css定位不到，则显示空白。

即使在js中是动态定位的，但是请仔细检查你的图片ul的css的定位参数是否固定住了。

比如，设置了{left：0；}。

删除掉css的错误静态定位，只保留js中的动态定位可以解决第二张以及之后图片空白问题。

Q3: jquery简单自动轮播图代码怎么写

html部分           this is the page一     this is the page二     this is the page三     this is the page四          css部分 *{     padding: 0;     margin: 0;     }     html,body{     height: 一00%;     }     #container {     width: 一00%;     height: 500px;     overflow: hidden;     }     .sections,.section {     height:一00%;     }     #container,.sections {     position: relative;     }     .section {     background-color: #000;     background-size: cover;     background-position: 50% 50%;     text-align: center;     color: white;     }     #section0 {     background-image: url('images/一.jpg');     }     #section一 {     background-image: url('images/二.jpg');     }     #section二 {     background-image: url('images/三.jpg');     }     #section三 {     background-image: url('images/四.jpg');     }   .pages li{list-style-type:none;width:一0px;height:一0px;border-radius:一0px;background-color:white}.pages li:hover{box-shadow:0 0 5px 二px white}.pages li.active{background-color:orange;box-shadow:0 0 5px 二px orange}.pages{position:absolute;z-index:999}.pages.horizontal{left:50%;transform:translateX(-50%);bottom:5px}.pages.horizontal li{display:inline-block;margin-right:一0px}.pages.horizontal li:last-child{margin-right:0}.pages.vertical{right:5px;top:50%;transform:translateY(-50%)}.pages.vertical li{margin-bottom:一0px}.pages.vertical li:last-child{margin-bottom:0} JS部分 jquery-一.一一.0.min.js" type="text/javascript" //引入pageSwitch.min.js 如

[img]

Q4: jquery图片上下轮播的问题，怎么实现自动轮播？

1、html部分

body

div id="banner"    

    div id="banner_bg"/div!--标题背景--

    div id="banner_info"/div!--标题--

    ul

        li class="on"1/li

        li2/li

        li3/li

        li4/li

    /ul

   div id="banner_list"

        a href="#" target="_blank"img src="imgs/p1.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"//a

        a href="#" target="_blank"img src="imgs/p5.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"//a

        a href="#" target="_blank"img src="imgs/p3.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"//a

        a href="#" target="_blank"img src="imgs/p4.jpg" title="橡树小屋的blog" alt="橡树小屋的blog"//a

    /div

/div

/body

2、css样式部分

style type="text/css"

#banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden;}

#banner_list img {border:0px;}

#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;

cursor:pointer; width:478px;}

#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}

#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}

#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;

            margin:0; padding:0; bottom:3px; right:5px;}

#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}

#banner ul li.on { background:#900}

#banner_list a{position:absolute;} !-- 让四张图片都可以重叠在一起--

/style

3、jQuery部分

script type="text/javascript"

    var t = n =0, count;

    $(document).ready(function(){    

        count=$("#banner_list a").length;

        $("#banner_list a:not(:first-child)").hide();

        $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));

        $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});

        $("#banner li").click(function() {

            var i = $(this).text() -1;//获取Li元素内的值，即1，2，3，4

            n = i;

            if (i = count) return;

            $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));

            $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})

            $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);

            document.getElementById("banner").style.background="";

            $(this).toggleClass("on");

            $(this).siblings().removeAttr("class");

        });

        t = setInterval("showAuto()", 4000);

        $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});

    })

    

    function showAuto()

    {

        n = n =(count -1) ?0 : ++n;

        $("#banner li").eq(n).trigger('click');

    }

/script