Question

jquery实现图片自动切换和点击切换

2张图片每5s循环滚动一次，点击按钮切换下一张（能循环）

Answer 1

需要js+css配合，我给您找段代码吧。

JS代码

$(function () {
    $(".dummy").click(function () { return false; });
    var flipDelay = 5500;
    var flipCount = $("div.banner_footer a").size(); // 图片总数
    var flipId = 1;
    var flipId1 = 0;
    var flipTimer = null;
    var flipTimer1 = null;
    var i = 0;
    var flip = function () {
        if (flipCount < 2) return;
        $("div.banner_footer a").removeClass("current");
        $($("div.banner_footer a").get(flipId)).addClass("current");
        $($("div.banner_footer a").get(flipId)).css("current");
        $("div.banner > a:visible").fadeOut();
        $($("div.banner a").get(flipId)).fadeIn("slow");
        flipId = (flipId + 1) % flipCount;
        flipTimer = window.setTimeout(flip, flipDelay);
    }
    flipTimer = window.setTimeout(flip, flipDelay);
    $("div.banner_footer a").click(function () {
        clearTimeout(flipTimer);
        flipId = $("div.banner_footer a").index(this);
        flip();
        return false;
    });
    var flipserver = function () {
        $("div.index_server_box > a:visible").fadeOut();
        $($("div.index_server_box a").get(flipId1)).fadeIn("slow");
    }
    $("a.index_server_left").click(function () {
        flipId1 = (flipId1 - 1) % 3;
        flipserver();
        return false;
    });
    $("a.index_server_right").click(function () {
        flipId1 = (flipId1 + 1) % 3;
        flipserver();
        return false;
    });
    var documentWidth = $(window).width();
    var left = (documentWidth - 310) / 2;
    var right = left + 306;
    $("div.services_box div.left").css("width", left + "px");
    $("div.services_box div.right").css("width", right + "px");
    $(window).resize(function () {
        var documentWidth = $(window).width();
        var left = (documentWidth - 310) / 2;
        var right = left + 306;
        $("div.services_box div.left").css("width", left + "px");
        $("div.services_box div.right").css("width", right + "px");
    });
});

   

html样式

<div class="banner_box">
        <div class="banner">
            <a href="" class="banner1"><img src="img/banner1.jpg" alt="视觉为您解决网站建设中企业品牌形象问题" /></a>
            <a href="" class="banner2"><img src="img/banner2.jpg" alt="独具匠心的网页设计让您的网站与总部同" /></a>
            <a href="" class="banner3"><img src="img/banner3.jpg" alt="针对用户需求，提供高品质网站设计服务" /></a>
            <a href="" class="banner4"><img src="img/banner4.jpg" alt="网站建设公司团队的力量" /></a>
            <a href="" class="banner5"><img src="img/banner5.jpg" alt="招聘网页设计师" /></a>
            <div class="banner_footer">
                <a class="a1 current"><img src="img/a13.jpg" alt="" /></a>
                <a class="a2" ><img src="img/a14.jpg" alt="" /></a>
                <a class="a3"><img src="img/a15.jpg" alt="" /></a>
                <a class="a4"><img src="img/a16.jpg" alt="" /></a>
                <a class="a5"><img src="img/a17.jpg" alt="" /></a>
            </div>
        </div>
    </div>

   

css样式

div.banner_box{height:430px; overflow:hidden; background:url(../img/b1.jpg) repeat-x;}
div.banner_box div.banner{width:990px; height:430px; overflow:hidden; margin:auto; position:relative;}
div.banner_box div.banner a{border:0;}
div.banner_box div.banner a.banner1 img{margin-left:200px;}
div.banner_box div.banner a.banner2 img{margin-left:236px;}
div.banner_box div.banner a.banner3 img{margin-left:250px;}
div.banner_box div.banner a.banner4 img{margin-left:231px;}
div.banner_box div.banner a.banner5 img{margin-left:245px;}
div.banner_box div.banner div.banner_footer{position:absolute;width:120px;height:20px;top:30px; right:0;z-index:100;  }
div.banner_box div.banner div.banner_footer a{float:left; width:19px; height:19px; cursor:pointer; }
div.banner_box div.banner div.banner_footer a.current{background:url(../img/a13_1.jpg) center center no-repeat;}
div.banner_box div.banner div.banner_footer a img{border:0; margin:3px 0 0 3px;}

   

希望能帮到您！祝您好运！