西山居首页jQuery焦点图代码

西山居首页jQuery焦点图代码是一款带文字描述,左右箭头,索引按钮,自动轮播切换的jQuery特效代码。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

 <div style="height:10px;width:100%;"></div>
    <div class="main">
        <div class="kv">
            <ul class="kv_pic">
                <li><img src="images/index_kv1.jpg"  /></li>
                <li><img src="images/index_kv2.jpg"  /></li>
                <li><img src="images/index_kv3.jpg"  /></li>
                <li><img src="images/index_kv4.jpg"  /></li>
            </ul>
            <div class="kv_word">
                <ul>
                    <li>
                        <h3 class="tit1">家属开放日</h3>
                        <h3 class="tit2">感谢有你 一路同行</h3>
                        <p>为感谢家人们对居士们的默默支持与理解,西山居会在每一年邀请家属们参加一年一度的家属开放日,感受西山居的环境文化和办公氛围。</p>
                    </li>
                    <li>
                        <h3 class="tit1">2014神觅会</h3>
                        <h3 class="tit2">玩转创意 游戏穿越</h3>
                        <p>是否幻想过把游戏场景搬到现实生活中?是否憧憬过穿越进游戏里当一回英雄侠士驰骋江湖?西山居士玩转创意,将梦想中的世界在你我身边呈现。我们在办公中游戏,在游戏中办公!!</p>
                    </li>
                    <li>
                        <h3 class="tit1">西山居俱乐部</h3>
                        <h3 class="tit2">Hello,西山居俱乐部!</h3>
                        <p>在这里,我们为你寻找志同道合的朋友;在这里,我们为你丰富枯燥的业余生活。摄影、羽毛球、乒乓球、足球、游泳、篮球……准备好加入我们了吗?</p>
                    </li>
                    <li>
                        <h3 class="tit1">2015西山居年会</h3>
                        <h3 class="tit2">纵情聚·变  同享盛事</h3>
                        <p>每一年总有一晚,我们把酒言欢,共叙期许;每一年总有一刻,我们拥抱佳绩,共聚一堂。这是一个大家庭,这是一个大江湖,各路英雄豪杰共进西山居年夜饭,满载而归结束一年的辛劳。</p>
                    </li>
                </ul>
            </div>
            <div class="control">
                <div class="prev"><img src="images/icons_move_left.jpg"  /></div>
                <div class="next"><img src="images/icons_move_right.jpg"  /></div>
            </div>
            <div class="kv_dot">
                <ul>
                    <li class="action"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>

js代码:

 $(document).ready(function () {
            var kv_num = 0;
            function nextKv() {
                $(".control").attr("style", "pointer-events:none");
                kv_num++;
                if (kv_num == 4) { kv_num = 0; }
                $(".kv_pic").animate({ left: -1000 * kv_num }, {
                    easing: ‘easeInOutQuad‘, duration: 500, complete: function () {
                        $(".control").attr("style", "pointer-events:auto");
                    }
                });
                $(".kv_word>ul").stop().animate({ left: -340 * kv_num }, { easing: ‘easeInOutQuad‘, duration: 800, complete: function () { } });
                $(".kv_dot ul li").removeClass("action").eq(kv_num).addClass("action");
            }
            function prevKv() {
                $(".control").attr("style", "pointer-events:none");
                kv_num--;
                if (kv_num == -1) { kv_num = 3; }
                $(".kv_pic").animate({ left: -1000 * kv_num }, {
                    easing: ‘easeInOutQuad‘, duration: 500, complete: function () {

                        $(".control").attr("style", "pointer-events:auto");
                    }
                });
                $(".kv_word>ul").stop().animate({ left: -340 * kv_num }, { easing: ‘easeInOutQuad‘, duration: 800, complete: function () { } });
            }
            $(".control .next").on("click", nextKv);
            $(".control .prev").on("click", prevKv);
            // 自动轮播
            setInterval(nextKv, 3500);

            var top = $(".footer").offset().top;
            if ((top + 80) <= $(window).height()) {
                $(".footer").attr("style", "position:fixed; bottom:0;");
            }
        });

http://www.w2bc.com/article/53162

时间: 2024-10-13 02:35:26

西山居首页jQuery焦点图代码的相关文章

右侧带缩略图jQuery焦点图代码

右侧带缩略图jQuery图片特,由huiyi8素材网提供. 源于:http://www.huiyi8.com/tupiantexiao/jquery/

强大的自适应jQuery焦点图特效

jQuery焦点图切换自适应效果 自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦点图插件,和以前介绍的jQuery焦点图动画类似,它也提供左右切换按钮,同时在图片上悬浮自定义图片切换按钮.切换动画包括上下左右切入动画以及淡入淡出动画.这款jQuery焦点图最大的特点是支持移动端触摸功能. 体验效果:http://hovertree.com/texiao/jquery/17/ 代

支持鼠标滚轮图片自适应的焦点图代码等

支持鼠标滚轮图片自适应的焦点图代码 支持鼠标滚轮图片自适应的焦点图代码,纯JS构建,可用键盘左右键切换图片,倒序回滚,另外鼠标停止响应后可自动播放功能,兼容主流浏览器,懒人图库推荐下载! 使用方法: 1.在head区域引入样式表文件lrtk.css 2.在head区域引入lrtk.js 3.在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可 4.修改间隔时间和自动播放倒计时时间,请打开lrtk.js根据注释提示修改 5.去掉首页文字提示后,请注

10款华丽最新jQuery焦点图动画插件

1.jQuery带对比功能的焦点图插件 我们在这里已经分享过很多炫酷的jQuery焦点图插件,大部分焦点图插件都比较实用.今天要分享的这款有几个特点:第一是焦点图带有缩略图预览功能,第二是焦点图中的图片带有和原图进行对比的功能,并且这款jQuery焦点图还支持定时图片切换,非常实用. 在线演示一 在线演示二 源码下载 2.Devrama Slider - 支持任意 HTML 的内容滑块 Devrama Slider 是一个图片滑块,支持很多特色功能.除了支持图片滑动,其它的 HTML 内容也支持

CSS3窗帘式4格焦点图代码

CSS3窗帘式4格焦点图代码,带有数字导航,点击数字之后图片会以窗帘形式切换,另外共有4种图片切换样式可以选择,兼容主流浏览器,phplearn初学者 推荐下载. 使用方法: 1.head区域引用文件chuxz.css 2.在文件中加入<!-- 代码 开始 --><!-- 代码 结束 -->区域代码 3.图片路径请打开chuxz.css修改 来源地址:http://www.phplearn.cn/recommend/info_48_1.html CSS3窗帘式4格焦点图代码,布布扣

分享10款常用的jQuery焦点图插件

爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图插件,大部分对开发者来说基本上可以直接拿来使用.今天我们要分享一款可以自动播放动画的jQuery焦点图插件,它在切换图片的时候可以播放对应图片的各种动画效果. 在线预览   源码下载 2.jQuery可自动播放动画的焦点图插件 这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又

超酷实用的jQuery焦点图赏析及源码

焦点图应用在现代网页中使用十分广泛,有注重简单小巧的,也有注重华丽美观的,大部分jQuery焦点图都可以滑动和切换图片,并且在切换图片时产生不同的动画特效.今天我们要分享一些超酷而且实用的jQuery焦点图插件,并分享它们的源代码. 1.jQuery多动画切换焦点图 之前我们已经分享过很多超酷的jQuery焦点图插件了,而且也都相当实用.今天我们要再来介绍一款可实现多种切换动画的jQuery焦点图,这款焦点图整体非常简单,左右两侧各有一个上一张和下一张的切换按钮.每张图片在切换时也都有各不相同的

8款超绚丽的jQuery焦点图动画

随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的就是一些超绚丽的jQuery焦点图动画插件,有些不仅基于jQuery,还带有CSS3的动画特效,因此显得更加炫酷. 1.jQuery实用图片滑块焦点图 支持移动端滑动 今天我们要再来介绍一款jQuery实用图片滑块焦点图,它也支持移动端的触屏滑动,这款插件并没有特别的动画效果,但方便实用. 在线演示

[Jquery]焦点图轮播效果

$(function(){    var $next=$(".right");    var $prev=$(".left");    var $list_num=$(".list-num a");    var $banner=$(".banner");    var $list_banner=$(".list-banner");    var index=1;    var timer;    var