快捷導(dǎo)航

Jquery幻燈片特效代碼分享打開(kāi)頁(yè)面隨機(jī)選擇切換方式（3）

更新時(shí)間：2021年09月09日 16:20:48 投稿：lijiao

jQuery是一個(gè)非常優(yōu)秀的 JavaScript 框架，使用簡(jiǎn)單靈活，一個(gè)漂亮的幻燈片更能吸引訪客的注意力。本文實(shí)例講述了jQuery實(shí)現(xiàn)時(shí)尚漂亮的幻燈片特效，基本能滿足你在網(wǎng)頁(yè)上使用幻燈片(焦點(diǎn)圖)效果。分享給大家供大家參考。具體如下：

這篇文章主要介紹了jQuery實(shí)現(xiàn)幻燈片焦點(diǎn)圖，可實(shí)現(xiàn)非常炫目時(shí)尚的幻燈片效果，非常具有實(shí)用價(jià)值，基本能滿足你在網(wǎng)頁(yè)上使用幻燈片(焦點(diǎn)圖)效果，需要的朋友可以參考下

幻燈片效果描述：與前兩節(jié)不同的是，這款特效可以打開(kāi)頁(yè)面隨機(jī)選擇切換方式（方向）
運(yùn)行效果截圖如下：

具體代碼如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Jquery幻燈片焦點(diǎn)圖插件</title>
<script src="js/jquery-1.4a2.min.js" type="text/javascript"></script>
<script src="js/jquery.-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

//打開(kāi)頁(yè)面隨機(jī)選擇 切換方式（方向）,怕增大KinSlideshow.js文件 就沒(méi)把隨機(jī)切換寫(xiě)到里面。
//使用時(shí)如有需要隨機(jī)自己寫(xiě)在前面是一樣的。而且還可以只固定隨機(jī)切換哪幾種。

var moveStyle
var rand =parseInt(Math.random()*4)
switch(rand){
 case 0: moveStyle="left" ;break;
 case 1: moveStyle="right" ;break;
 case 2: moveStyle="down" ;break;
 case 3: moveStyle="up" ;break;
}
$(function(){
 $("#KinSlideshow1").KinSlideshow({moveStyle:moveStyle});
 
})
</script>
<style type="text/css">
#KinSlideshow{ overflow:hidden; width:600px; height:300px;}
</style>

</head>

<body>

<h2>打開(kāi)頁(yè)面隨機(jī)選擇切換方式（方向）---刷新看看 ^_^</h2>
 <div id="KinSlideshow1" style="visibility:hidden;">
  <a target="_blank"><img src="images/11.png" alt="" width="600" height="300" /></a>
  <a target="_blank"><img src="images/23.png" alt="" width="600" height="300" /></a>
  <a target="_blank"><img src="images/4.jpg" alt="" width="600" height="300" /></a>
  <a target="_blank"><img src="images/5.jpg" alt="" width="600" height="300" /></a>
  <a target="_blank"><img src="images/22.png" alt="" width="600" height="300" /></a>
 </div>
  
</body>
</html>

希望本文所述對(duì)大家的Jquery特效設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery獲取form表單input元素值的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery獲取form表單input元素值的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
jQuery CSS()方法改變現(xiàn)有的CSS樣式表
使用CSS()方法改變現(xiàn)有的CSS樣式表，css()方法在使用上具有多樣性，比如要改變鏈接顏色，如果需要改變多個(gè)樣式屬性，可先定義屬性變量，然后直接賦值給css()方法
2014-09-09
基于Jquery的淡入淡出的特效基礎(chǔ)練習(xí)
基于Jquery的淡入淡出的特效基礎(chǔ)練習(xí)實(shí)現(xiàn)代碼，學(xué)習(xí)jquery的朋友可以參考下。
2010-12-12
避免jQuery名字沖突 noConflict()方法
這篇文章主要為大家詳細(xì)介紹了避免jQuery名字沖突，noConflict()方法，感興趣的朋友可以參考一下
2016-07-07
使用jquery與圖片美化checkbox和radio控件的代碼(打包下載)
用jquery實(shí)現(xiàn)的對(duì)checkbox和radio控件的美化，非常不錯(cuò)，大家可以通過(guò)修改圖片來(lái)實(shí)現(xiàn)更漂亮的效果。
2010-11-11
jquery 多行滾動(dòng)代碼(附詳細(xì)解釋)
在網(wǎng)上可以隨處找到這段代碼，但是沒(méi)有任何人解釋這段代碼，只要自己研究好久。
2010-06-06
jQuery select自動(dòng)選中功能實(shí)現(xiàn)方法分析
這篇文章主要介紹了jQuery select自動(dòng)選中功能,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)select響應(yīng)與級(jí)聯(lián)菜單顯示相關(guān)功能與操作技巧,需要的朋友可以參考下
2016-11-11
JQery jstree 大數(shù)據(jù)量問(wèn)題解決方法
Jquery 結(jié)合jstree 動(dòng)態(tài)生成一棵樹(shù)，如果某一節(jié)點(diǎn)下目錄超過(guò)500個(gè)，IE 會(huì)提示是否允許JS腳本運(yùn)行，并且目錄加載不全，大約只加載了300左右。
2010-03-03
深入理解jQuery layui分頁(yè)控件的使用
jquery layui分頁(yè)控件在項(xiàng)目開(kāi)發(fā)階段經(jīng)常用到，下面通過(guò)本文給大家介紹jQuery layui分頁(yè)控件的使用，非常不錯(cuò)，感興趣的朋友一起看下吧
2016-08-08
jQuery動(dòng)態(tài)添加與刪除tr行實(shí)例代碼
最近由于項(xiàng)目的需要，需要?jiǎng)討B(tài)的添加和刪除table中的tr，感覺(jué)用JS可以實(shí)現(xiàn)，但是在網(wǎng)上找了一下，單純的自己寫(xiě)JS，感覺(jué)太麻煩，而且也不好維護(hù)。于是想到了最近學(xué)的jQuery。這篇文章給大家用實(shí)例介紹了jQuery動(dòng)態(tài)添加與刪除tr行的方法，有需要的朋友們可以參考借鑒。
2016-10-10