jquery左右全屏大尺寸多图滑动效果代码分享

摘要：本文实例讲述了jquery左右全屏大尺寸多图滑动效果。分享给大家供大家参考。具体如下：这是一款基于jquery实现的banner焦点图播放效...

本文实例讲述了jquery左右全屏大尺寸多图滑动效果。分享给大家供大家参考。具体如下：

这是一款基于jquery实现的banner焦点图播放效果的插件，图片播放时处于满屏的状态，很具有画面感，呈现的效果更佳充实，用户的视觉体验更加具体，是一款很时尚大方的特效代码。

运行效果图： -------------------查看效果下载源码-------------------

jquery左右全屏大尺寸多图滑动效果代码分享1

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。

为大家分享的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> <> <div> <div> <a href="#"> <div rel="0,easeInOutExpo"> <img src="images/slide1p1.png" /> </div> <div rel="150,easeInOutExpo"> <img src="images/slide1p2.png" /> </div> </a> <a href="#"> <div rel="0,easeInOutExpo"> <img src="images/slide2p1.png" /> </div> </a> <a href="#"> <div rel="0,easeInOutExpo"> <img src="images/slide3p1.png" /> </div> <div rel="150,easeInOutExpo"> <img src="images/slide3p2.png" /> </div> <div rel="300,easeInOutExpo"> <img src="images/slide3p3.png" /> </div> </a> <a href="#"> <div rel="0,easeInOutExpo"> <img src="images/slide1p1.png" /> </div> <div rel="150,easeInOutExpo"> <img src="images/slide1p2.png" /> </div> </a> <a href="#"> <div rel="0,easeInOutExpo"> <img src="images/slide1p1.png" /> </div> <div rel="150,easeInOutExpo"> <img src="images/slide1p2.png" /> </div> </a> </div> <div> <a href="javascript:;"></a> <a 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> <> </body> </html>

以上就是为大家分享的jquery左右全屏大尺寸多图滑动效果代码，希望大家可以喜欢。