本文實例講述了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左右全屏大尺寸多圖滑動效果代碼，希望大家可以喜歡。
新聞熱點
疑難解答
