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

前端技术 2023/09/09 JavaScript

本文实例讲述了jquery左右全屏大尺寸多图滑动效果。分享给大家供大家参考。具体如下：
这是一款基于jquery实现的banner焦点图播放效果的插件，图片播放时处于满屏的状态，很具有画面感，呈现的效果更佳充实，用户的视觉体验更加具体，是一款很时尚大方的特效代码。
运行效果图：                                        -------------------查看效果 下载源码-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的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左右全屏大尺寸多图滑动效果代码，希望大家可以喜欢。

本文地址：https://www.stayed.cn/item/24371

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案