jQuery和CSS3实现全屏垂直滚动切换幻灯片,带切换特效

作者(出处):百宝箱工作室发布时间:2016年7月22日 19:56:45查阅量:1004

<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery和CSS3炫酷全屏垂直滚动切换幻灯片特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if IE]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
	<div class="main">
	  <div class="sidebar-hover">
	    <p class="pagination">
	      <span class="page">01</span> / <span class="total-pages">08</span>	    </p>
	  </div>
	  <div class="sidebar-real">
	    <div data-page="1" class="nav-elem nav-1 active"></div>
	    <div data-page="2" class="nav-elem nav-2"></div>
	    <div data-page="3" class="nav-elem nav-3"></div>
	    <div data-page="4" class="nav-elem nav-4"></div>
	    <div data-page="5" class="nav-elem nav-5"></div>
	    <div data-page="6" class="nav-elem nav-6"></div>
	    <div data-page="7" class="nav-elem nav-7"></div>
	    <div data-page="8" class="nav-elem nav-8"></div>
	  </div>
	  <div class="sections">
	    <div class="section section-1">
	      <div class="left-part"></div>
	      <div class="content">
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <h2 class="section-heading">百宝箱工作室</h2>
	        <p class="additional-text">官方网址:www.baibaox.com  技术支持:QQ 425680248</p>
	      </div>
	    </div>
	    <div class="section section-2">
	      <div class="left-part"></div>
	      <div class="content">
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <h2 class="section-heading">百宝箱工作室</h2>
	        <p class="additional-text">官方网址:www.baibaox.com  技术支持:QQ 425680248</p>
	      </div>
	    </div>
	    <div class="section section-3">
	      <div class="left-part"></div>
	      <div class="content">
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <h2 class="section-heading">百宝箱工作室</h2>
	        <p class="additional-text">官方网址:www.baibaox.com  技术支持:QQ 425680248</p>
	      </div>
	    </div>
	    <div class="section section-4">
	      <div class="left-part"></div>
	      <div class="content">
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <h2 class="section-heading">百宝箱工作室</h2>
	        <p class="additional-text">官方网址:www.baibaox.com  技术支持:QQ 425680248</p>
	      </div>
	    </div>
	    <div class="section section-5">
	      <div class="left-part"></div>
	      <div class="content">
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <h2 class="section-heading">百宝箱工作室</h2>
	        <p class="additional-text">官方网址:www.baibaox.com  技术支持:QQ 425680248</p>
	      </div>
	    </div>
	    <div class="section section-6">
	      <div class="left-part"></div>
	      <div class="content">
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <h2 class="section-heading">百宝箱工作室</h2>
	        <p class="additional-text">官方网址:www.baibaox.com  技术支持:QQ 425680248</p>
	      </div>
	    </div>
	    <div class="section section-7">
	      <div class="left-part"></div>
	      <div class="content">
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <h2 class="section-heading">百宝箱工作室</h2>
	        <p class="additional-text">官方网址:www.baibaox.com  技术支持:QQ 425680248</p>
	      </div>
	    </div>
	    <div class="section section-8">
	      <div class="left-part"></div>
	      <div class="content">
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <div class="bg-part"></div>
	        <h2 class="section-heading">百宝箱工作室</h2>
	        <p class="additional-text">官方网址:www.baibaox.com  技术支持:QQ 425680248</p>
	      </div>
	    </div>
	  </div>
	  <h2 class="scroll-down">Scroll down</h2>
	</div>
<script type="text/javascript" src='js/stopExecutionOnTimeout.js'></script>
<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2018
点击这里给我发消息  
若本文对您有帮助,请扫码打赏,您的赞助就是最好的动力