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

WBOY
Release: 2016-05-16 15:41:46
Original
1309 people have browsed it

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.
运行效果图:                                        -------------------查看效果 下载源码----------- --------

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

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>
Copy after login


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.

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template