jquery左右全屏大尺寸多圖滑動效果代碼分享
更新時間：2015年08月28日 15:42:18 投稿：lijiao
這篇文章主要介紹了jquery左右全屏大尺寸多圖滑動效果，特別適合用商城網站，視覺上特別有沖擊感，推薦給大家，有需要的小伙伴可以參考下。
本文實例講述了jquery左右全屏大尺寸多圖滑動效果。分享給大家供大家參考。具體如下：
這是一款基于jquery實現的banner焦點圖播放效果的插件，圖片播放時處于滿屏的狀態(tài)，很具有畫面感，呈現的效果更佳充實，用戶的視覺體驗更加具體，是一款很時尚大方的特效代碼。
運行效果圖： -------------------查看效果 下載源碼-------------------
小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的jquery左右全屏大尺寸多圖滑動效果代碼如下
<!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商城網站全屏多張圖片滑動切換代碼</title>
<link rel="stylesheet" type="text/css" href="css/slide.css"/>
</head>
<body>
<!-- 代碼部分begin -->
<div class="slides">
<div class="slideInner">
<a href="#" style="background: url(images/slide1.jpg) no-repeat;">
<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="images/slide1p1.png" /> </div>
<div class="moveElem img2" rel="150,easeInOutExpo"> <img src="images/slide1p2.png" /> </div>
</a>
<a href="#" style="background: url(images/slide2.jpg) no-repeat">
<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="images/slide2p1.png" /> </div>
</a>
<a href="#" class="slide3" style="background: url(images/slide3.jpg) no-repeat;">
<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="images/slide3p1.png" /> </div>
<div class="moveElem img2" rel="150,easeInOutExpo"> <img src="images/slide3p2.png" /> </div>
<div class="moveElem img3" rel="300,easeInOutExpo"> <img src="images/slide3p3.png" /> </div>
</a>
<a href="#" style="background: rgb(113, 209, 231);">
<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="images/slide1p1.png" /> </div>
<div class="moveElem img2" rel="150,easeInOutExpo"> <img src="images/slide1p2.png" /> </div>
</a>
<a href="#" style="background: rgb(178, 44, 44);">
<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="images/slide1p1.png" /> </div>
<div class="moveElem img2" rel="150,easeInOutExpo"> <img src="images/slide1p2.png" /> </div>
</a>
</div>
<div class="nav">
<a class="prev" href="javascript:;"></a>
<a class="next" href="javascript:;"></a>
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/slide.js"></script>
<script >
$(document).ready(function() {
$(".slideInner").slide({
slideContainer: $('.slideInner a'),
effect: 'easeOutCirc',
autoRunTime: 5000,
slideSpeed: 1000,
nav: true,
autoRun: true,
prevBtn: $('a.prev'),
nextBtn: $('a.next')
})
})
</script>
<!-- 代碼部分end -->
</body>
</html>
以上就是為大家分享的jquery左右全屏大尺寸多圖滑動效果代碼，希望大家可以喜歡。
相關文章
Jquery+Ajax+xml實現中國地區(qū)選擇三級聯(lián)動菜單效果(推薦)
下面小編就為大家?guī)硪黄狫query+Ajax+xml實現中國地區(qū)選擇三級聯(lián)動菜單效果(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這里給大家分享的是一段使用EasyUI中實現form表單提交的方法的核心代碼，小伙伴們根據自己的需求補全form部分吧，希望大家能夠喜歡。2015-03-03
這篇文章主要介紹了jQery使網頁在任何分辨率的顯示器上居中顯示的方法,需要的朋友可以參考下2014-06-06
本期要講的就是我痛苦中掙扎徘徊后寫的jQuery.wechat，一個提供了統(tǒng)一API的、基于jQuery.promise的jQuery.plugin。希望能多少幫助到大家。2014-10-10
本節(jié)主要介紹了用Jquery選擇器計算table中的某一列某一行的合計,需要的朋友可以參考下2014-08-08
這篇文章主要介紹了jQuery焦點圖插件SaySlide，新版的SaySlide 2.0重構了代碼，并基本上保留了原有的功能，感興趣的小伙伴們可以參考一下2015-12-12
jQuery 獲取對象 定位子對象，學習jquery 定位子對象的朋友可以參考下。2010-05-05
Lightbox 應該是最流行的圖片瀏覽效果了，常具有功能包括：自動根據窗口的大小縮放圖片，模式窗口，幻燈片方式播放，內容預加載，漸變等效果。2011-04-04
jquery easyui combobox模糊過濾(示例代碼)
這篇文章主要介紹了jquery easyui combobox模糊過濾(示例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
接下來將從前臺提交查詢條件，從MSSQL返回json數據的一個事例來講解一下datagrid動態(tài)查詢數據，感興趣的你可不要錯過了哈，希望本文可以幫助到你2021-09-09