你的位置:首页 > Java教程

[Java教程]西山居首页jQuery焦点图代码


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

在线预览    源码下载

实现的代码。

html代码:

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