采用jQuery全屏3D轮播图插件实现该特效,通过鼠标滚动或者点击右侧相对于的按钮即可翻转图片。
使用方法:
在head头部引用文件:
<link rel="stylesheet" type="text/css" href="css/demo.css"> <link rel="stylesheet" href="css/jquery.pagescroll3d.min.css"> <link rel="stylesheet" href="css/main.css">
在body引用部分:
<main class="main-content"> <section> <h1>Весна</h1> </section> <section> <h1>Лето</h1> </section> <section> <h1>Осень</h1> </section> <section> <h1>Зима</h1> </section> </main> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="js/jquery.pagescroll3d.min.js"></script> <script type="text/javascript" src="js/main.js"></script>