整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML5特效庫 jQuery全屏焦點(diǎn)圖滑動(dòng)切換源碼

          果圖

          各位老鐵,大家好!

          今天俺給大兄弟、大妹子們帶來的是 jQuery全屏焦點(diǎn)圖滑動(dòng)切換源碼

          全屏滑動(dòng),屬于暗黑炫酷系列!(適合高科技產(chǎn)品的展示)

          若是想要文件源碼,請(qǐng)看評(píng)論區(qū)!

          廢話不多說,上源碼!

          CSS源碼:

          @charset "utf-8";

          *{margin:0;padding:0;list-style-type:none;}

          a,img{border:0;}

          body{font:12px/180% "Arial","微軟雅黑";color:#666666;background-color:#ffffff;}

          a,a:hover{color:#666666;text-decoration:none;border:0px;}

          /* focusBar */

          #focusBar{width:100%;height:644px;clear:both;position:relative;background:#242424;overflow:hidden;}

          #focusBar li{width:100%;clear:both;height:644px;display:none;position:absolute;/* position:relative;*/}

          #focusBar .focusL{height:644px;position:absolute;z-index:9;/*left:-1000px;*/ top:0px;left:-500px;margin-left:50%;}

          #focusBar .focusR{height:644px;position:absolute;z-index:19;/* right:1000px;*/top:0px;left:-500px;margin-left:50%;}

          a.arrL,a.arrR{display:block;width:52px;height:134px;position:absolute;top:250px;z-index:99;cursor:pointer;background:url(../images/bt_arr.png) no-repeat;}

          a.arrL{left:-52px;background-position:0px 0px;}

          a.arrR{right:-52px;background-position:-68px 0px;}

          a.arrL:hover{background-position:0px -144px;}

          a.arrR:hover{background-position:-68px -144px;}

          /*HTML5特效庫 jQuery全屏焦點(diǎn)圖滑動(dòng)切換源碼 */

          JS源碼:

          /*

          * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/

          *

          * Uses the built in easing capabilities added In jQuery 1.1

          * to offer multiple easing options

          *

          * TERMS OF USE - jQuery Easing

          *

          * Open source under the BSD License.

          *

          * Copyright ? 2008 George McGinley Smith

          * All rights reserved.

          *

          * Redistribution and use in source and binary forms, with or without modification,

          * are permitted provided that the following conditions are met:

          *

          * Redistributions of source code must retain the above copyright notice, this list of

          * conditions and the following disclaimer.

          * Redistributions in binary form must reproduce the above copyright notice, this list

          * of conditions and the following disclaimer in the documentation and/or other materials

          * provided with the distribution.

          *

          * Neither the name of the author nor the names of contributors may be used to endorse

          * or promote products derived from this software without specific prior written permission.

          *

          * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY

          * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF

          * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE

          * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,

          * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE

          * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED

          * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING

          * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED

          * OF THE POSSIBILITY OF SUCH DAMAGE.

          *

          */

          // t: current time, b: begInnIng value, c: change In value, d: duration

          jQuery.easing['jswing'] = jQuery.easing['swing'];

          jQuery.extend( jQuery.easing,

          {

          def: 'easeOutQuad',

          swing: function (x, t, b, c, d) {

          //alert(jQuery.easing.default);

          return jQuery.easing[jQuery.easing.def](x, t, b, c, d);

          },

          easeInQuad: function (x, t, b, c, d) {

          return c*(t/=d)*t + b;

          },

          easeOutQuad: function (x, t, b, c, d) {

          return -c *(t/=d)*(t-2) + b;

          },

          easeInOutQuad: function (x, t, b, c, d) {

          if ((t/=d/2) < 1) return c/2*t*t + b;

          return -c/2 * ((--t)*(t-2) - 1) + b;

          },

          easeInCubic: function (x, t, b, c, d) {

          return c*(t/=d)*t*t + b;

          },

          easeOutCubic: function (x, t, b, c, d) {

          return c*((t=t/d-1)*t*t + 1) + b;

          },

          easeInOutCubic: function (x, t, b, c, d) {

          if ((t/=d/2) < 1) return c/2*t*t*t + b;

          return c/2*((t-=2)*t*t + 2) + b;

          },

          easeInQuart: function (x, t, b, c, d) {

          return c*(t/=d)*t*t*t + b;

          },

          easeOutQuart: function (x, t, b, c, d) {

          return -c * ((t=t/d-1)*t*t*t - 1) + b;

          },

          easeInOutQuart: function (x, t, b, c, d) {

          if ((t/=d/2) < 1) return c/2*t*t*t*t + b;

          return -c/2 * ((t-=2)*t*t*t - 2) + b;

          },

          easeInQuint: function (x, t, b, c, d) {

          return c*(t/=d)*t*t*t*t + b;

          },

          easeOutQuint: function (x, t, b, c, d) {

          return c*((t=t/d-1)*t*t*t*t + 1) + b;

          },

          easeInOutQuint: function (x, t, b, c, d) {

          if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;

          return c/2*((t-=2)*t*t*t*t + 2) + b;

          },

          easeInSine: function (x, t, b, c, d) {

          return -c * Math.cos(t/d * (Math.PI/2)) + c + b;

          },

          easeOutSine: function (x, t, b, c, d) {

          return c * Math.sin(t/d * (Math.PI/2)) + b;

          },

          easeInOutSine: function (x, t, b, c, d) {

          return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;

          },

          easeInExpo: function (x, t, b, c, d) {

          return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;

          },

          easeOutExpo: function (x, t, b, c, d) {

          return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;

          },

          easeInOutExpo: function (x, t, b, c, d) {

          if (t==0) return b;

          if (t==d) return b+c;

          if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;

          return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;

          },

          easeInCirc: function (x, t, b, c, d) {

          return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;

          },

          easeOutCirc: function (x, t, b, c, d) {

          return c * Math.sqrt(1 - (t=t/d-1)*t) + b;

          },

          easeInOutCirc: function (x, t, b, c, d) {

          if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;

          return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;

          },

          easeInElastic: function (x, t, b, c, d) {

          var s=1.70158;var p=0;var a=c;

          if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;

          if (a < Math.abs(c)) { a=c; var s=p/4; }

          else var s = p/(2*Math.PI) * Math.asin (c/a);

          return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

          },

          easeOutElastic: function (x, t, b, c, d) {

          var s=1.70158;var p=0;var a=c;

          if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;

          if (a < Math.abs(c)) { a=c; var s=p/4; }

          else var s = p/(2*Math.PI) * Math.asin (c/a);

          return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;

          },

          easeInOutElastic: function (x, t, b, c, d) {

          var s=1.70158;var p=0;var a=c;

          if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);

          if (a < Math.abs(c)) { a=c; var s=p/4; }

          else var s = p/(2*Math.PI) * Math.asin (c/a);

          if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

          return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;

          },

          easeInBack: function (x, t, b, c, d, s) {

          if (s == undefined) s = 1.70158;

          return c*(t/=d)*t*((s+1)*t - s) + b;

          },

          easeOutBack: function (x, t, b, c, d, s) {

          if (s == undefined) s = 1.70158;

          return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;

          },

          easeInOutBack: function (x, t, b, c, d, s) {

          if (s == undefined) s = 1.70158;

          if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;

          return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;

          },

          easeInBounce: function (x, t, b, c, d) {

          return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;

          },

          easeOutBounce: function (x, t, b, c, d) {

          if ((t/=d) < (1/2.75)) {

          return c*(7.5625*t*t) + b;

          } else if (t < (2/2.75)) {

          return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;

          } else if (t < (2.5/2.75)) {

          return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;

          } else {

          return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;

          }

          },

          easeInOutBounce: function (x, t, b, c, d) {

          if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;

          return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;

          }

          });

          /*

          *

          * TERMS OF USE - EASING EQUATIONS

          *

          * Open source under the BSD License.

          *

          * Copyright ? 2001 Robert Penner

          * All rights reserved.

          *

          * Redistribution and use in source and binary forms, with or without modification,

          * are permitted provided that the following conditions are met:

          *

          * Redistributions of source code must retain the above copyright notice, this list of

          * conditions and the following disclaimer.

          * Redistributions in binary form must reproduce the above copyright notice, this list

          * of conditions and the following disclaimer in the documentation and/or other materials

          * provided with the distribution.

          *

          * Neither the name of the author nor the names of contributors may be used to endorse

          * or promote products derived from this software without specific prior written permission.

          *

          * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY

          * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF

          * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE

          * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,

          * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE

          * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED

          * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING

          * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED

          * OF THE POSSIBILITY OF SUCH DAMAGE.

          *

          */

          Index:

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html xmlns="http://www.w3.org/1999/xhtml">

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

          <title>jquery全屏焦點(diǎn)圖滑動(dòng)切換</title>

          <meta name="keywords" content="jquery全屏焦點(diǎn)圖滑動(dòng)切換" />

          <meta name="description" content="jquery全屏焦點(diǎn)圖滑動(dòng)切換" />

          <link href="css/style.css" rel="stylesheet" type="text/css">

          <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

          <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

          </head>

          <body>

          <div id="focusBar">

          <a href="javascript:void(0)" class="arrL" onclick="prePage()">&nbsp;</a>

          <a href="javascript:void(0)" class="arrR" onclick="nextPage()">&nbsp;</a>

          <ul class="mypng">

          <li id="focusIndex1" style="background:url(images/483a26db99919a40eee1f0dd652ad53b.gif) repeat-x;">

          <div class="focusL"><a ><img src="images/0240ddc5fa163156719b498c45d4ded2.png" width="1000" height="644" /></a></div>

          <div class="focusR"><a ><img src="images/2a18e9128aad06d0b6b8d908ecf7c2a1.png" width="1000" height="644" /></a></div>

          </li>

          <li id="focusIndex2">

          <div class="focusL"><a ><img src="images/2d20716b5ecc36c5c9e35a7dfc1834a4.png" width="1000" height="644" /></a></div>

          <div class="focusR"><a ><img src="images/2a18e9128aad06d0b6b8d908ecf7c2a1.png" width="1000" height="644" /></a></div>

          </li>

          <li id="focusIndex3" style="background:url(images/8bc531a341bac9421a25093ccf376e7d.gif) repeat-x;">

          <div class="focusL"><a ><img src="images/b249cfb8cebc4696d7a317181b823eb3.png" width="1000" height="644" /></a></div>

          <div class="focusR"><a ><img src="images/dc0e4583d9af6915d306cabb9ac6df64.png" width="1000" height="644" /></a></div>

          </li>

          <li id="focusIndex4" style="background:url(images/8bc531a341bac9421a25093ccf376e7d.gif) repeat-x;">

          <div class="focusL"><a ><img src="images/b249cfb8cebc4696d7a317181b823eb3.png" width="1000" height="644" /></a></div>

          <div class="focusR"><a ><img src="images/dc0e4583d9af6915d306cabb9ac6df64.png" width="1000" height="644" /></a></div>

          </li>

          </ul>

          </div>

          <div style="width: 100%; height: auto; line-height: 25px; text-align: center;">

          jquery全屏焦點(diǎn)圖滑動(dòng)切換

          </div>

          <div style="width: 300px; height: 250px; position: fixed; right: 0px; top: 0px;">

          <script type="text/javascript">

          /*300*250 創(chuàng)建于 2016-05-11*/

          var cpro_id = "u2636070";

          </script>

          <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>

          </div>

          <script type="text/javascript" src="js/script.js"></script>

          </body>

          </html>

          近在學(xué)習(xí)jquery,發(fā)現(xiàn)jquery上手比javascript容易許多,因?yàn)橛兄己玫奈臋n和幫助手冊(cè),如果遇到一些問題可以借助文檔來解決。初步接觸學(xué)習(xí)jquery,我發(fā)現(xiàn)學(xué)習(xí)jquery主要是學(xué)會(huì)如何使用內(nèi)置的方法。

          今天就跟大家一起分享下,我用jquery寫的一個(gè)banner全屏特效切換的案例,以及制作它運(yùn)用了哪些jquery內(nèi)置方法。

          思路:

          注:這里說的是JS中的思路,至于布局的話,可以下載源碼自己研究。

          第一步、讓切換按鈕動(dòng)起來

          上圖中有4個(gè)小切換按鈕,當(dāng)鼠標(biāo)每滑動(dòng)到一個(gè)切換按鈕的位置,則相對(duì)應(yīng)的添加一個(gè)樣式。(一個(gè)橘黃色的小圓點(diǎn))

          第二步、讓圖片動(dòng)起來

          當(dāng)滑動(dòng)每個(gè)相對(duì)應(yīng)切換按鈕時(shí),我們的背景圖片也需要隨著切換。

          第三步、讓它自動(dòng)切換

          當(dāng)鼠標(biāo)沒有滑動(dòng)到切換按鈕時(shí),則讓它自動(dòng)切換,這里需定義一個(gè)定時(shí)任務(wù)。(setInterval)

          根據(jù)上圖jquery代碼中,下面總結(jié)了此次特效所用到的方法:

          eq()方法;尋找當(dāng)前索引

          mouseover()方法;當(dāng)鼠標(biāo)滑動(dòng)到元素上方,則發(fā)生該事件

          mouseout()方法;當(dāng)鼠標(biāo)離開時(shí),則發(fā)生該事件

          index()方法;查找索引值

          addClass()方法;添加樣式

          sibling()方法;獲取當(dāng)前元素的同輩其他元素

          fadeIn()方法;淡入

          fadeOut()方法;淡出

          以及javascript中的setInterval()方法;定義一個(gè)定時(shí)任務(wù)。和clearInterval()方法;停止定時(shí)任務(wù)

          本地下載

          寫在最后:覺得不管做什么事情,思路非常重要,如果沒有思路就不知道如何下手。就像開發(fā)一個(gè)網(wǎng)站一樣,如果你不知道它的開發(fā)流程是什么?那么你肯定很迷茫,網(wǎng)站如何去做?第一步該怎么下手。這樣你就會(huì)認(rèn)為做一個(gè)網(wǎng)站很難。同樣的道理:學(xué)習(xí)jquery首先我認(rèn)為得明白每個(gè)方法是什么含義,只有先明白了這些方法的含義,以及怎么去使用。在項(xiàng)目實(shí)戰(zhàn)的時(shí)候你才不會(huì)迷茫。(個(gè)人經(jīng)驗(yàn),不喜勿噴!)

          nimatedModal.js 是一個(gè)用來創(chuàng)建一個(gè)全屏模態(tài)窗口的 jQuery 插件,基于 CSS3 過渡實(shí)現(xiàn)。您可以利用 Animate.css 中的轉(zhuǎn)換或自行創(chuàng)建自己的過渡效果。支持 Firefox、Chrome、Safari、Opera 和 IE 10+ 瀏覽器。

          演示

          http://joaopereirawd.github.io/animatedModal.js/

          下載

          http://www.qietu.cn/thread-15150-1-1.html

          ----------

          加微信公眾號(hào)qietuwang,獲取最新資訊

          ad ~ 自學(xué)3月前端找不到工作? 切圖網(wǎng) 旗下首個(gè)web前端真實(shí)項(xiàng)目實(shí)戰(zhàn)培訓(xùn)品牌 切入口即將開班,讓你的簡(jiǎn)歷豐富不止3倍,詳情請(qǐng)加前端講師qq 6133576 獲取最新開班通知,web前端學(xué)習(xí)千人群:469861419


          主站蜘蛛池模板: 精品亚洲A∨无码一区二区三区| 无码人妻精品一区二区蜜桃AV| 久久久精品人妻一区亚美研究所| V一区无码内射国产| 久久精品日韩一区国产二区| 亚洲电影唐人社一区二区| 无码国产伦一区二区三区视频| 波多野结衣一区二区三区aV高清| 国产一区二区精品尤物| 国产在线观看一区二区三区精品| 国模无码一区二区三区不卡| 精品福利一区二区三| 国产在线aaa片一区二区99| 中文字幕一区二区三区精华液| 国产无套精品一区二区| 久久精品一区二区三区四区| 亚洲美女一区二区三区| 欧美亚洲精品一区二区| 精品一区二区三区在线观看l | 亚洲AV无码一区二区三区性色 | 天堂不卡一区二区视频在线观看| 国产一区二区三区不卡在线观看 | 亚洲欧洲一区二区| 人妻无码久久一区二区三区免费| 国产在线乱子伦一区二区| 精品国产福利在线观看一区 | 亚洲AV一区二区三区四区| 日本精品一区二区三区视频 | 国产无码一区二区在线| 国偷自产av一区二区三区| 精品性影院一区二区三区内射 | 久久精品道一区二区三区| 综合无码一区二区三区四区五区 | 精品无码国产一区二区三区AV| 伊人久久一区二区三区无码 | 亚洲中文字幕一区精品自拍| 国产在线观看一区二区三区四区| 欧洲精品无码一区二区三区在线播放| 一区二区三区观看免费中文视频在线播放| 亚洲综合av一区二区三区不卡| 国产精品亚洲产品一区二区三区 |