JS+css3实现幻灯片轮播图
程序员文章站
2022-03-14 18:40:21
本文实例为大家分享了js+css3实现幻灯片轮播图的具体代码，供大家参考，具体内容如下
本文实例为大家分享了js+css3实现幻灯片轮播图的具体代码，供大家参考，具体内容如下
<!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>
<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图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。