头像

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

来源:http://www.tuniu.com/ 素材火管理员 2016-03-02 20:08浏览(1601) 收藏

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

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

jQuery仿途牛首页定时幻灯片轮播效果
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源: 204 下载资源 下载积分: 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);
评论21
头像

友情提示:垃圾评论一律封号...

  • 头像 20楼
    11-14 09:11
    我不吃板栗
    每天看看素材.赚点积分。
  • 头像 19楼
    09-30 15:26
    Code帅
    每天看看素材,赚点积分每天看看素材,赚点积分
  • 头像 18楼
    08-16 13:41
    ysfind
    每天看看素材,赚点积分
  • 头像 17楼
    08-12 16:23
    brightboy
    每天看看素材,赚点积分。
  • 头像 16楼
    08-10 10:10
    XUAN5430
    每天看看素材,赚点积分。O(∩_∩)O哈哈~
  • 头像 15楼
    07-18 14:59
    liyn2007
    来看下是什么~
  • 头像 14楼
    06-29 17:02
    2370372168
    还可以的哦皱眉
  • 头像 13楼
    05-31 23:07
    liyinet
    真的非常不错
  • 头像 12楼
    05-31 10:29
    hehaifeng1222
    需要,需要啊
  • 头像 11楼
    05-29 15:29
    perfect董小宇
    真好啊~~谢谢分享
1 2