jQuery轮播图插件simpleSlider特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery轮播图插件simpleSlider特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery轮播图插件simpleSlider</title>
		<!-- Include demo stylesheet -->
		<link href="style.css" rel="stylesheet" type="text/css">
		<!-- Get jQuery from CDN -->
		<script src="src/jquery.min.js"></script>
		<script src="src/jquery-migrate-1.2.1.min.js"></script>
		<!-- Include the slider scripts -->
		<script type="text/javascript" src="src/transit.js"></script>
		<script type="text/javascript" src="src/touchSwipe.js"></script>
		<script type="text/javascript" src="src/simpleSlider.js"></script>
		<script type="text/javascript" src="src/backstretch.js"></script>
		<script type="text/javascript" src="src/custom.js"></script>
	</head>
	<body>
		<header id="top">
			<div id="logo"><span class='logo'>Simple jQuery Slider</span><span class='dynamic'></span></div>
		</header>
		<div class='pagewrap'>
			
			<div class='pageblock' id='fullscreen'>
				<div class='slider'>
					<div class='slide' id="first">
						<div class='slidecontent'>
							<span class="headersur">It's powerful and at the same time a</span>
							<h1>SIMPLE SLIDER</h1>
							<div class="button" onclick="mainslider.nextSlide();">Let me show you how simple</div>
						</div>
					</div>
					<div class='slide' id="sec">
						<div class='slidecontent'>
							<span class="headersur">Grab your shit together and</span>
							<h1>INCLUDE</h1>
							<div class="text">
								<p>Go to the  Github page and download the simpleslider.js file. Don't forget to download the touchswipe.js and transit.js if you're going for a complete (and still simple) slider.<br>Now you have the files you can include them in your header.</p>

								<xmp><script src="src/jquery-1.10.1.min.js"></script>
<script src="src/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript" src="transit.js"></script>
<script type="text/javascript" src="touchSwipe.js"></script>
<script type="text/javascript" src="simpleSlider.js"></script></xmp>

								<div class="button" onclick="mainslider.nextSlide();">Done? Let's move on!</div>
							</div>
						</div>
					</div>
					<div class='slide' id="thirth">
						<div class='slidecontent'>
							<span class="headersur">Time to start this party</span>
							<h1>BIND IT</h1>
							<div class="text">
								<p>Now it's time to bind the simpleslider on your HTML element. Check the  Github README for an example HTML.</p>
								<xmp>$(document).ready(function(){
    $(".slider").simpleSlider();
});</xmp>
								<div class="button" onclick="mainslider.nextSlide();">Done? Let's move on again!</div>
							</div>
						</div>
					</div>
					<div class='slide' id="fourth">
						<div class='slidecontent'>
							<span class="headersur">And you're done! Grab a beer and</span>
							<h1>WATCH</h1>
							<div class="text">
								<p>SimpleSlider will now do the rest. Are you looking for more options? Check the Github readme!</p>
								<p>SimpleSlider standard comes with a few methods, triggers and a tracker. These are all easy to configure. More information about them can be found on the Github page<br/>Btw, this site has been made using simpleslider! </p>

							</div>
						</div>
					</div>
				</div>
			</div>

			</div>
</body>
</html>

JS代码(custom.js):

var mainslider;
	$(document).ready(function(){
	var options ={
	slides:'.slide',// The name of a slide in the slidesContainer swipe:true,// Add possibility to Swipe > note that you have to include touchSwipe for this slideTracker:true,// Add a UL with list items to track the current slide slideTrackerID:'slideposition',// The name of the UL that tracks the slides slideOnInterval:false,// Slide on interval interval:9000,// Interval to slide on if slideOnInterval is enabled animateDuration:1000,// Duration of an animation animationEasing:'ease',// Accepts:linear ease in out in-out snap easeOutCubic easeInOutCubic easeInCirc easeOutCirc easeInOutCirc easeInExpo easeOutExpo easeInOutExpo easeInQuad easeOutQuad easeInOutQuad easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInBack easeOutBack easeInOutBack pauseOnHover:false // Pause when user hovers the slide container}
;
	$(".slider").simpleSlider(options);
	mainslider = $(".slider").data("simpleslider");
	/* yes,that's all! */
 $(".slider").on("beforeSliding",function(event){
	var prevSlide = event.prevSlide;
	var newSlide = event.newSlide;
	$(".slider .slide[data-index='"+prevSlide+"'] .slidecontent").fadeOut();
	$(".slider .slide[data-index='"+newSlide+"'] .slidecontent").hide();
}
);
	$(".slider").on("afterSliding",function(event){
	var prevSlide = event.prevSlide;
	var newSlide = event.newSlide;
	$(".slider .slide[data-index='"+newSlide+"'] .slidecontent").fadeIn();
}
);
	$(".slide#first").backstretch("images/bg1.jpg");
	$(".slide#sec").backstretch("images/bg2.jpg");
	$(".slide#thirth").backstretch("images/bg4.jpg");
	$(".slide#fourth").backstretch("images/bg5.jpg");
	$('.slide .backstretch img').on('dragstart',function(event){
	event.preventDefault();
}
);
	$(".slidecontent").each(function(){
	$(this).css('margin-top',-$(this).height()/2);
}
);
}
);

CSS代码(style.css):

html,body{margin:0;padding:0;font-family:"Lato",Arial,Verdana;font-size:20px;height:100%;background-color:#fff;width:100%;color:#222222;}
body.hidden{overflow:hidden;}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
h1{font-family:Helvetica,Arial,Verdana;font-weight:normal;font-size:92px;color:#222222;}
header#top{position:fixed;top:0;left:0;width:100%;z-index:100;overflow:hidden;}
header#top #logo{float:left;margin:16px 0 0 30px;font-weight:normal;font-size:45px;color:white;text-transform:uppercase;text-shadow:0 0 15px rgba(0,0,0,0.5);}
.pagewrap{height:100%;}
.pageblock{width:100%;}
.pagewrap .fb-like{position:fixed;left:30px;top:75px;z-index:100;}
.pagewrap .githubbuttons{position:fixed;left:220px;top:75px;z-index:100;}
.pagewrap .copy{font-size:10px;bottom:20px;left:30px;z-index:100;position:absolute;color:white;}
.pagewrap .copy a,.pagewrap .copy a:hover{color:white;}
.pageblock#fullscreen{height:100%;background:none;color:white;}
.pageblock#fullscreen h1{color:white;font-size:72px;margin:0;padding:0;font-family:'sxehwcmaax-blackblack',Helvetica,Arial,Verdana;font-weight:normal;}
.pageblock#fullscreen .slider{width:100%;height:100%;overflow:hidden;position:relative;}
.pageblock#fullscreen .slider .slide{width:100%;height:100%;top:0;left:0;float:left;position:absolute;}
.pageblock#fullscreen .slider .slide .slidecontent{position:absolute;top:50%;width:100%;margin-top:-150px;text-align:center;}
.pageblock#fullscreen .slider .slide .slidecontent h1{text-shadow:0 0 15px rgba(0,0,0,0.5);font-weight:bold;font-size:120px;margin:20px 0 30px 0;padding:0;line-height:115px;}
.pageblock#fullscreen .slider .slide .slidecontent .headersur{font-size:30px;text-shadow:0 0 10px rgba(0,0,0,0.5);color:#f0f0f0;font-style:italic;display:block;}
.pageblock#fullscreen .slider .slide .slidecontent .button{padding:10px 25px;border:3px solid white;text-transform:uppercase;background:transparent;background:rgba(0,0,0,.2);color:white;font-size:15px;font-weight:bold;display:inline-block;cursor:pointer;letter-spacing:1px;margin:20px 0;line-height:20px;}
.pageblock#fullscreen .slider .slide .slidecontent .button a,.pageblock#fullscreen .slider .slide .slidecontent .button a:hover{text-decoration:none !important;color:white;}
.pageblock#fullscreen .slider .slide .slidecontent .button:hover{background:rgba(0,0,0,.3);}
.pageblock#fullscreen .slider .slide .slidecontent .text{width:900px;margin:0 auto;line-height:28px;}
.pageblock#fullscreen .slider .slide .slidecontent .text a{color:white;text-decoration:underline;}
.pageblock#fullscreen .slider .slide .slidecontent .text a:hover{text-decoration:none;}
.pageblock#fullscreen .slider .slide .slidecontent .text xmp{font-size:13px;text-align:left;border:1px solid white;background:rgba(0,0,0,0.1);padding:10px 15px;}
.pageblock#fullscreen #slideposition{position:absolute;bottom:50px;left:50%;}
.pageblock#fullscreen #slideposition ul{list-style-type:none;margin:0;padding:0;}
.pageblock#fullscreen #slideposition ul li.indicator{display:inline-block;height:10px;width:10px;background:#222;margin:0px 7px;padding:0;-webkit-border-radius:999px;-moz-border-radius:999px;border-radius:999px;overflow:hidden;cursor:pointer;}
.pageblock#fullscreen #slideposition ul li.indicator.active{background:white;}

附件:下载该文件资源,减少时间成本(增值服务)