本文实例为大家分享了JS+css3实现幻灯片轮播图的具体代码,供大家参考,具体内容如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | <!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title ></ title > < style > *{ margin: 0; padding: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .clearfix:after{ clear: both; } .clearfix:after,.clearfix:before{ content: ""; display: table; } .slide_view{ width: 600px; height: 200px; overflow: hidden; margin: 40px auto; position: relative; } ul{ width: 600px; height: 100%; } li{ position: absolute; width: 600px; height:100%; opacity: 0; } li.active{ opacity: 1; } .hor-slide-ani .next-out { animation: hor-slide-next-out .8s forwards cubic-bezier(0.7, 0, 0.3, 1); } .hor-slide-ani .next-in{ animation: hor-slide-next-in .8s forwards cubic-bezier(0.7, 0, 0.3, 1); } .hor-slide-ani .prev-out { animation: hor-slide-prev-out .8s forwards cubic-bezier(0.7, 0, 0.3, 1); } .hor-slide-ani .prev-in{ animation: hor-slide-prev-in .8s forwards cubic-bezier(0.7, 0, 0.3, 1); } @keyframes hor-slide-next-out{ from{ opacity: 1; } to{ opacity: 1; transform: translateX(100%); } } @keyframes hor-slide-next-in{ from{ opacity: 1; transform: translateX(-100%); } to{ opacity: 1; transform: translateX(0); } } @keyframes hor-slide-prev-out{ from{ opacity: 1; } to{ opacity: 1; transform: translateX(-100%); } } @keyframes hor-slide-prev-in{ from{ opacity: 1; transform: translateX(100%); } to{ opacity: 1; transform: translateX(0); } } .prev{ position: absolute; left: 10px; top: 40%; display: block; padding: 10px; text-align: center; width: 20px; height: 20px; border-radius: 100%; background: rgba(0,0,0,.4); color: white; font-size: 22px; line-height: 22px; } .next{ position: absolute; right: 10px; top: 40%; display: block; padding: 10px; text-align: center; width: 20px; height: 20px; border-radius: 100%; background: rgba(0,0,0,.4); color: white; font-size: 22px; line-height: 22px; } </ style > </ head > < body > < div class = "slide_view" > < ul class = "slides clearfix hor-slide-ani" style = "position: relative;" > < li class = "active" style = "background: salmon;" >1</ li > < li style = "background: darkcyan;" >2</ li > < li style = "background: seagreen;" >3</ li > < li style = "background: sandybrown;" >4</ li > </ ul > < div class = "control" > < span class = "prev" >←</ span > < span class = "next" >→</ span > </ div > </ div > </ body > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | <script type= "text/javascript" src= "js/jquery-2.1.4.min.js" ></script> <script> var aniName = ( function (el) { var animations = { animation: 'animationend' , OAnimation: 'oAnimationEnd' , MozAnimation: 'mozAnimationEnd' , WebkitAnimation: 'webkitAnimationEnd' , }; for ( var t in animations) { if (el.style[t] !== undefined) { return animations[t]; } } return false ; })(document.createElement( 'div' )); var aniEndCallback= function ($ele,endCall){ if (aniName && typeof endCall == 'function' ){ var called= false ; //在每次transitionEnd的事件后执行该函数 var callback = function (){ if (!called){ called= true ; endCall($ele); } }; $ele[0].addEventListener(aniName, function (){ callback(); //通过setTimeout来补救windowphone中不触发事件的问题 setTimeout(callback,200); }, false ); } else { endCall($ele); } }; $( function (){ var aniStatus = false ; $( '.next' ).click( function (){ if (aniStatus){ return }; aniStatus = true ; var $slides = $( '.slides' ).children() , slideCount = $slides.length , $active = $( '.active' ) , curActiveIndex = $( '.active' ).index() , nextActiveIndex = curActiveIndex -1; if (curActiveIndex == 0){ nextActiveIndex = slideCount-1; } $slides.eq(curActiveIndex).addClass( 'next-out' ); $slides.eq(nextActiveIndex).addClass( 'next-in' ); aniEndCallback($active, function ($ele){ aniStatus = false ; $active.removeClass( 'next-out active' ); $slides.eq(nextActiveIndex).removeClass( 'next-in' ).addClass( 'active' ); }); }); $( '.prev' ).click( function (){ if (aniStatus){ return ;} //不在动画状态,才能执行 aniStatus= true ; var $slides = $( '.slides' ).children() , slideCount = $slides.length , $active = $( '.active' ) , curActiveIndex = $( '.active' ).index() , nextActiveIndex = curActiveIndex + 1; if (curActiveIndex == slideCount-1){ nextActiveIndex = 0; } $slides.eq(curActiveIndex).addClass( 'prev-out' ); $slides.eq(nextActiveIndex).addClass( 'prev-in' ); aniEndCallback($active, function ($ele){ aniStatus = false ; $active.removeClass( 'prev-out active' ); $slides.eq(nextActiveIndex).removeClass( 'prev-in' ).addClass( 'active' ); }); }); setInterval( function (){ $( '.prev' ).trigger( 'click' ) },4000); }); |
精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学编程网。
- 本文固定链接: https://zxbcw.cn/post/193248/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)