这篇文章主要为大家详细介绍了 JS 实现旋转木马式图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
主要 html 代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <link rel="stylesheet" type="text/CSS" href="css/css.css">
- <script type="text/javascript" src="js/animate.js">
- </script>
- </head>
- <body>
- <div class="w-wrap" id="js_wrap">
- <div class="wrap-slide" id="wrap_slide">
- <ul>
- <li>
- <a href="#">
- <img src="images/slidepic1.jpg" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img src="images/slidepic2.jpg" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img src="images/slidepic3.jpg" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img src="images/slidepic4.jpg" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img src="images/slidepic5.jpg" alt="">
- </a>
- </li>
- <!-- <li><a href="#"><img src="images/slidepic6.jpg" alt=""></a></li> -->
- </ul>
- <div class="wrap-slide-arrow" id="wrap_slide_arrow">
- <a href="javascript:;" class="prev">
- </a>
- <a href="javascript:;" class="next">
- </a>
- </div>
- </div>
- </div>
- <script>
- function $(id) {
- return document.getElementById(id);
- }
- var js_wrap = $("js_wrap");
- var wrap_slide = $("wrap_slide");
- var wrap_slide_arrow = $("wrap_slide_arrow");
- var lis = wrap_slide.children[0].children;
- var json = [{
- //1
- width: 400,
- top: 20,
- left: 50,
- opacity: 20,
- z: 2
- },
- {
- //2
- width: 600,
- top: 70,
- left: 0,
- opacity: 80,
- z: 3
- },
- {
- //3
- width: 800,
- top: 100,
- left: 200,
- opacity: 100,
- z: 4
- },
- {
- //4
- width: 600,
- top: 70,
- left: 600,
- opacity: 80,
- z: 3
- },
- {
- //5
- width: 400,
- top: 20,
- left: 750,
- opacity: 20,
- z: 2
- }
- /*,
- {
- //6
- width: 300,
- top: 10,
- left: 400,
- opacity: 10,
- z: 1
- }*/
- ] change(); //将各个图片按照json铺开层次
- var jieliu = true;
- //两个按钮点击事件
- var as = wrap_slide_arrow.children;
- for (var k in as) {
- as[k].onclick = function() {
- if (this.className == "prev") {
- /*alert("左侧按钮");*/
- //所有图片逆时针旋转,相当于图片不动,json的第一个删除并插到最后一个
- if (jieliu == true) {
- change(false);
- jieliu = false;
- }
- } else if (this.className == "next") {
- /*alert("右侧按钮");*/
- //所有图片顺时针旋转,相当于图片不动,json的最后一个删除并插到第一个
- if (jieliu == true) {
- change(true);
- jieliu = false;
- }
- }
- }
- }
- function change(flag) {
- if (flag) {
- //所有图片顺时针旋转,相当于图片不动,json的最后一个删除并插到第一个
- json.unshift(json.pop());
- } else {
- //所有图片逆时针旋转,相当于图片不动,json的第一个删除并插到最后一个
- json.push(json.shift());
- }
- for (var k in json) {
- animate(lis[k], {
- width: json[k].width,
- top: json[k].top,
- left: json[k].left,
- opacity: json[k].opacity,
- zIndex: json[k].z
- },
- function() {
- jieliu = true;
- }); //当动画执行完,执行回调函数,此时置节流为true
- }
- }
- var timer = null;
- timer = setInterval(autoPlay, 2000);
- function autoPlay() {
- if (jieliu == true) {
- change(true);
- jieliu = false;
- }
- }
- js_wrap.onmouseover = function() {
- clearInterval(timer);
- animate(wrap_slide_arrow, {
- opacity: 100
- });
- }
- js_wrap.onmouseout = function() {
- clearInterval(timer);
- timer = setInterval(autoPlay, 2000);
- animate(wrap_slide_arrow, {
- opacity: 0
- });
- }
- /*js_wrap.onmouseover = function(){
- animate(wrap_slide_arrow,{opacity:100});
- }
- js_wrap.onmouseout = function(){
- animate(wrap_slide_arrow,{opacity:0});
- }*/
- </script>
- </body>
- </html>
主要 css 代码:
- /*初始化 reset*/
- blockquote,
- body,
- button,
- dd,
- dl,
- dt,
- fieldset,
- form,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- hr,
- input,
- legend,
- li,
- ol,
- p,
- pre,
- td,
- textarea,
- th,
- ul {
- margin: 0;
- padding: 0
- }
- body,
- button,
- input,
- select,
- textarea {
- font: 12px / 1.5 "Microsoft YaHei",
- "微软雅黑",
- SimSun,
- "宋体",
- sans - serif;
- color: #666;
- }
- ol,
- ul {
- list - style: none
- }
- a {
- text - decoration: none
- }
- fieldset,
- img {
- border: 0;
- vertical - align: top;
- }
- a,
- input,
- button,
- select,
- textarea {
- outline: none;
- }
- a,
- button {
- cursor: pointer;
- }.w - wrap {
- width: 1200px;
- margin: 100px auto;
- }.wrap - slide {
- position: relative;
- }.wrap - slide li {
- position: absolute;
- left: 200px;
- top: 0;
- }.wrap - slide li img {
- width: 100 % ;
- }.wrap - slide - arrow {
- opacity: 0;
- position: relative;
- }.prev,
- .next {
- width: 76px;
- height: 112px;
- position: absolute;
- top: 50 % ;
- margin - top: -56px;
- background: url(.. / images / prev.png) no - repeat;
- }.next {
- right: 0;
- background: url(.. / images / next.png) no - repeat;
- }
来源: http://www.phperz.com/article/17/0602/328415.html