头像

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

来源:http://www.erdangjiade.com/ 二当家的 2016-03-02 20:08浏览(1518)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,9.9元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

jQuery仿途牛首页定时幻灯片轮播效果
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源: 113

关注微信号获取此Demo视频教程:

下载资源 下载积分: 30 积分

幻灯片结构

<div id="box">
    <div class="con">
        <ul>
            <li><a href='http://www.erdangjiade.com/js/748.html' target='_blank'> <img src='images/1.jpg' alt='elastiStack拖拽堆叠在一起的图片' /> </a></li>
            <li><a href='http://www.erdangjiade.com/js/749.html' target='_blank'> <img src='images/2.jpg' alt='jQuery以波浪形式展现图片' /> </a></li>
            <li><a href='http://www.erdangjiade.com/js/750.html' target='_blank'> <img src='images/3.jpg' alt='simpleBtChecks美化复选框checkbox' /> </a></li>
            <li><a href='http://www.erdangjiade.com/js/751.html' target='_blank'> <img src='images/4.jpg' alt='css3演示4种不同的全屏幻灯片滑动效果' /> </a></li>
            <li><a href='http://www.erdangjiade.com/js/752.html' target='_blank'> <img src='images/5.jpg' alt='lightbox制作个性化弹出层' /> </a></li>
            <li><a href='http://www.erdangjiade.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.erdangjiade.com/js/476.html' target='_blank'>位置插件 </a></li>
            <li><a href='http://www.erdangjiade.com/js/477.html' target='_blank'>瀑布流</a></li>
            <li><a href='http://www.erdangjiade.com/js/478.html' target='_blank'>幻灯片</a></li>
            <li><a href='http://www.erdangjiade.com/js/479.html' target='_blank'>日期时分秒</a></li>
            <li><a href='http://www.erdangjiade.com/js/480.html' target='_blank'>裁剪图片</a></li>
            <li><a href='http://www.erdangjiade.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);
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:http://www.erdangjiade.com/js/817.html
评论2
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

  • 头像 椅子
    10-06 07:48
    qqlixiangabc
    学习啦。。。。可以的。。。。。、、、
  • 头像 沙发
    06-16 22:11
    帅帅帅帅帅
    希望能多学点东西 。
1 2