jQuery仿途牛首页定时幻灯片轮播效果

本文的demo是早期途牛首页的幻灯片焦点轮播风格，现在稍微改了一点，估计是内容原因，没有旧版本的好看。

分类：图片代码 > 图片轮播难易：初级

查看演示下载资源下载积分： 20 积分

幻灯片结构

<div id="box">
    <div class="con">
        <ul>
            <li><a href='http://www.sucaihuo.com/js/748.html' target='_blank'> <img src='images/1.jpg' alt='elastiStack拖拽堆叠在一起的图片' /> </a></li>
            <li><a href='http://www.sucaihuo.com/js/749.html' target='_blank'> <img src='images/2.jpg' alt='jQuery以波浪形式展现图片' /> </a></li>
            <li><a href='http://www.sucaihuo.com/js/750.html' target='_blank'> <img src='images/3.jpg' alt='simpleBtChecks美化复选框checkbox' /> </a></li>
            <li><a href='http://www.sucaihuo.com/js/751.html' target='_blank'> <img src='images/4.jpg' alt='css3演示4种不同的全屏幻灯片滑动效果' /> </a></li>
            <li><a href='http://www.sucaihuo.com/js/752.html' target='_blank'> <img src='images/5.jpg' alt='lightbox制作个性化弹出层' /> </a></li>
            <li><a href='http://www.sucaihuo.com/js/753.html' target='_blank'> <img src='images/6.jpg' alt='classicAccordion演示三种经典的手风琴效果' /> </a></li>
        </ul>
    </div>
    <div class="prev"></div>
    <div class="next"></div>
    <div class="nav">
        <ul>
            <li class="bg"><a href='http://www.sucaihuo.com/js/476.html' target='_blank'>位置插件 </a></li>
            <li><a href='http://www.sucaihuo.com/js/477.html' target='_blank'>瀑布流</a></li>
            <li><a href='http://www.sucaihuo.com/js/478.html' target='_blank'>幻灯片</a></li>
            <li><a href='http://www.sucaihuo.com/js/479.html' target='_blank'>日期时分秒</a></li>
            <li><a href='http://www.sucaihuo.com/js/480.html' target='_blank'>裁剪图片</a></li>
            <li><a href='http://www.sucaihuo.com/js/481.html' target='_blank'>星级插件 </a></li>
        </ul>
    </div>
</div>

var i = 0;
var time = 0;
$("#box").hover(function() {
    $(".prev").fadeIn(300);
}, function() {
    $(".prev").fadeOut(300);
})
$("#box").hover(function() {
    $(".next").fadeIn(300);
}, function() {
    $(".next").fadeOut(300);
})
$(".nav ul li").hover(function() {
    i = $(this).index();
    $(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
    $(this).addClass("bg").siblings().removeClass("bg");
    clearInterval(time);
}, function() {
    time = setInterval("junmper()", 3000);
})
$(".prev").click(function() {
    i--;
    if (i < 0)
        i = 5;
    $(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
    $(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");
})
$(".next").click(function() {
    i++;
    if (i > 5)
        i = 0;
    $(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
    $(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");
})
$(".prev").hover(function() {
    clearInterval(time);
}, function() {
    time = setInterval("junmper()", 3000);
})
$(".next").hover(function() {
    clearInterval(time);
}, function() {
    time = setInterval("junmper()", 3000);
})
function junmper() {
    i++;
    if (i > 5)
        i = 0;
    $(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
    $(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");
}
time = setInterval("junmper()", 3000);