html图片轮播幻灯片,JS+css3实现幻灯片轮播图

本文实例为大家分享了JS+css3实现幻灯片轮播图的具体代码，供大家参考，具体内容如下

*{

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;

}

• 1
• 2
• 3
• 4

←

→

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);

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。