Home >Web Front-end >JS Tutorial >jquery left and right full screen large size multi-image sliding effect code sharing_jquery

jquery left and right full screen large size multi-image sliding effect code sharing_jquery

WBOYOriginal: 2016-05-16 15:41:461304browse

The example in this article describes the jquery left and right full-screen large-size multi-image sliding effect. Share it with everyone for your reference. The details are as follows:
This is a plug-in that implements the banner focus picture playback effect based on jquery. When the picture is played, it fills the screen. It has a very graphic feel. The presentation effect is better and more substantial, and the user's visual experience is more concrete. It is a very fashionable and generous special effects code.
运行效果图： -------------------查看效果下载源码----------- --------

Tips: If the browser does not work properly, you can try switching the browsing mode.
The jquery left and right full screen large size multi-image sliding effect code shared with you is as follows

<!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" / alt="jquery left and right full screen large size multi-image sliding effect code sharing_jquery" > </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img  src="images/slide1p2.png" / alt="jquery left and right full screen large size multi-image sliding effect code sharing_jquery" > </div>
 </a>
 <a href="#" style="background: url(images/slide2.jpg) no-repeat">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img  src="images/slide2p1.png" / alt="jquery left and right full screen large size multi-image sliding effect code sharing_jquery" > </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" / alt="jquery left and right full screen large size multi-image sliding effect code sharing_jquery" > </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img  src="images/slide3p2.png" / alt="jquery left and right full screen large size multi-image sliding effect code sharing_jquery" > </div>
 <div class="moveElem img3" rel="300,easeInOutExpo"> <img  src="images/slide3p3.png" / alt="jquery left and right full screen large size multi-image sliding effect code sharing_jquery" > </div>
 </a>
 <a href="#" style="background: rgb(113, 209, 231);">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img  src="images/slide1p1.png" / alt="jquery left and right full screen large size multi-image sliding effect code sharing_jquery" > </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img  src="images/slide1p2.png" / alt="jquery left and right full screen large size multi-image sliding effect code sharing_jquery" > </div>
 </a>
 <a href="#" style="background: rgb(178, 44, 44);">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img  src="images/slide1p1.png" / alt="jquery left and right full screen large size multi-image sliding effect code sharing_jquery" > </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img  src="images/slide1p2.png" / alt="jquery left and right full screen large size multi-image sliding effect code sharing_jquery" > </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>

The above is the jquery left and right full screen large size multi-image sliding effect code shared with you. I hope you can like it.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：User registration form prompt operation effect code sharing implemented by jquery_jqueryNext article：User registration form prompt operation effect code sharing implemented by jquery_jquery

See more

jquery left and right full screen large size multi-image sliding effect code sharing_jquery

Related articles