Question

如何用jQuery鼠标滑动导航条切换大图？

Answer 1

jQuery鼠标滑动导航条切换大图

查看源代码以及演示：http://www.sucaihuo.com/js/765.html

幻灯片和标题html代码

<div id="change_1" class="changeBox_a1"> 
    <div class="changeBox_imgs"> 
        <ul class="changeBox_imgs_list"> 
            <li><a href="http://www.sucaihuo.com/templates" target="_blank"><img width="732" height="354" alt="网站模板" src="images/banner1.jpg" /></a></li> 
            <li><a href="http://www.sucaihuo.com/php" target="_blank"><img width="732" height="354" alt="PHP" src="images/banner2.jpg" /></a></li> 
            <li><a href="http://www.sucaihuo.com/js" target="_blank"><img width="732" height="354" alt="jQuery特效" src="images/banner3.jpg" /></a></li> 
        </ul> 
    </div> 
    <ul class="ul_change"> 
        <li id="changeBox_arrow_bar" class="arrow_bar"></li> 
        <li class="tagLi3" idx="1">网站模板</li> 
        <li class="tagLi2" idx="2">PHP</li> 
        <li class="tagLi1" idx="3">jQuery特效</li> 
    </ul>      
</div>

BannerImages();//Banner滑动效果

function BannerImages() { 
 
    var b = $("#changeBox_arrow_bar"), 
            c = $("ul.ul_change li:not(.arrw_bar)"), 
            e = $("ul.changeBox_imgs_list"), 
            d = true, 
            f = 1; 
 
    var a = function() { 
 
        var j = (732 * f - 732), j = j == 0 ? 0 : -j, i = 500; 
 
        e.animate({left: j + "px"}, i) 
    }; 
 
    e.find("img").hover(function() { 
        clearInterval(h) 
    }, function() { 
        g() 
    }); 
 
    c.click(function() { 
        var j = $(this), i = j.position().left + 3; 
        f = j.attr("idx"); 
        a(); 
        b.animate({left: i + "px"}, 500, function() { 
            d = true 
        }) 
    }).mouseover(function() { 
        if (!d) { 
            return 
        } 
        clearInterval(h); 
        d = false; 
        $(this).click() 
    }).mouseout(function() { 
        if (!d) { 
            return 
        } 
        g() 
    }); 
 
    var h = null; 
 
    var g = function() { 
        h = setInterval(function() { 
            f++; 
            if (f > 3) { 
                f = 1 
            } 
            c.eq(f).click() 
        }, 4000) 
    }; 
    g() 
}