您的位置：首页 > Web前端 > HTML5

图片轮播插件-基于HTML5+CSS3+JavaSript的响应式图片轮播

2016-12-28 15:14 405 查看

考虑到不久后的混合开发要用(跑移动端,效率是个问题),先写个插件吧

这是基于HTML5 + CSS3 和原生JavaScript的无缝轮播(左近右出);

因为是在android上开发,所以只定义了基于-webkit-内核的动画

HTML文件:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>HTML5测试</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="script.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
init_tabs();
}
</script>
</head>
<body>

<div class="slide-container" onmouseenter="pInterval()" onmouseleave="cInterval()">

<div class="slide right-out">
<img src="img/2.jpg" class="slide-img">
<div class='slide-dec'>这里放说明 0</div>
</div>
<div class="slide right-out">
<img src="img/light.jpg" class="slide-img">
<div class='slide-dec'>这里放说明 1</div>
</div>
<div class="slide right-out">
<img src="img/1.jpg" class="slide-img">
<div class='slide-dec'>这里放说明 2</div>
</div>
<div class="slide right-out">
<img src="img/3.jpg" class="slide-img">
<div class='slide-dec'>这里放说明 3</div>
</div>
<div class="slide right-out">
<img src="img/4.jpg" class="slide-img">
<div class='slide-dec'>这里放说明 4</div>
</div>
<div class="slide">
<img src="img/5.jpg" class="slide-img">
<div class='slide-dec'>这里放说明这里放说明这里放说明这里放说明这里放说明这里放说明这里放说明 5</div>
</div>


<div id="slide-tabs"></div>

</div>

<input type="button" name="" id="" value="LEFT" onclick="slide_last()"/>
<input type="button" name="" id="" value="RIGHT" onclick="slide_next()"/>
</body>
</html>

CSS文件:
@-webkit-keyframes 'left-in'{
0% {
visibility:visible;
left: -100%;
}
100% {
visibility:visible;
left: 0%;
}

}
@-webkit-keyframes 'right-out'{
0% {
visibility:visible;
left: 0%;
}
100% {
visibility:visible;
left: 100%;
}
}
@-webkit-keyframes 'left-out'{
0% {
visibility:visible;
left: 0%;
}
100% {
visibility:visible;
left: -100%;
}

}
@-webkit-keyframes 'right-in'{
0% {
visibility:visible;
left: 100%;
}
100% {
visibility:visible;
left: 0%;
}
}
.right-in{
visibility:visible;
-webkit-animation-name: 'right-in';
-webkit-animation-duration: 1s;
}
.left-out{
visibility:hidden;
-webkit-animation-name: 'left-out';
-webkit-animation-duration: 1s;
}
.left-in{
visibility:visible;
-webkit-animation-name: 'left-in';
-webkit-animation-duration: 1s;
}
.right-out{
visibility:hidden;
-webkit-animation-name: 'right-out';
-webkit-animation-duration: 1s;

}
.slide{
position: absolute;
top:0px;
left: 0px;
box-sizing: border-box;
width: 100%;
height: 100%;
background-color: white;
}
.slide-container{
position: relative;
width: 100%;
height: 500px;
margin: 0 auto;
padding: 1px;
overflow: hidden;
}
.slide-img{
width: 100%;
height: 100%;
}
.slide-dec{
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
top:-20%;
text-align: center;
color: #FFF;
}
#slide-tabs{
position: absolute;
top: 90%;
width: 100%;
height: 3%;
margin: 0 auto;
text-align: center;
}
.slide-tab{
position: relative;
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50%;
background-color: #e0e0e0;
cursor: pointer;
margin-right: 2%;
}
.slide-tab:hover{
background-color: #FFFFFF;
}
.slide-tab-acitve{
background-color: #FFFFFF;
}
@media only screen and (max-width: 500px) {
.slide-tab{
height: 10px;
width: 10px;
}
.slide-container{
height: 200px;
}
.slide-dec{
font-size: 11px;
}
}

JS文件:

var slide;
var tabs;
var slide_index;
var interval;
function init_tabs(){
slide = document.getElementsByClassName("slide");
slide_index = slide.length-1;
var tabc = document.getElementById("slide-tabs");
var html = "";
for(var i=0;i<slide.length;i++){
html+='<span class="slide-tab" onclick="slide_x('+i+')" > </span>';
}
tabc.innerHTML=html;
tabs=tabc.childNodes;
tabs[slide_index].className = addCls(tabs[slide_index].className,"slide-tab-acitve");
cInterval();
}
function pInterval(){
clearInterval(interval);
interval = -1;
}
function cInterval(){
if(interval!=-1)clearInterval(interval);
interval = setInterval("auto_next()",5000);
}
function auto_next(){
slide_out(slide_index);
slide_index=(slide_index-1+slide.length)%slide.length;
slide_in(slide_index);
}
function slide_out(i){
slide[i].className=remCls(slide[i].className,'right-in');
slide[i].className=remCls(slide[i].className,'left-in');
slide[i].className=addCls(slide[i].className,'right-out');
tabs[i].className = remCls(tabs[i].className,"slide-tab-acitve");
}
function slide_in(i){
slide[i].className=remCls(slide[i].className,'left-out');
slide[i].className=remCls(slide[i].className,'right-out');
slide[i].className=addCls(slide[i].className,'left-in');
tabs[i].className = addCls(tabs[i].className,"slide-tab-acitve");
}
function slide_x(x){
pInterval();
x=x%slide.length;
slide_out(slide_index);
slide_in(x);
slide_index=x;
cInterval();
}
function remCls(o,n){
if(o==null||typeof(o)!='string')return o;
var x = o.indexOf(n);
if(x>-1){
if(x>0) o=o.replace(n,'');
else o=o.replace(" "+n,'');
}
return o;
}
function addCls(o,n){
if(o==null||typeof(o)!='string')return o;
if(o.length>0) o+=' '+n;
else o+=n;
return o;
}
function slide_next(){
var x=(slide_index-1+slide.length)%slide.length;
slide_x(x);
}
function slide_last(){
pInterval();
slide[slide_index].className=remCls(slide[slide_index].className,'left-in');
slide[slide_index].className=remCls(slide[slide_index].className,'right-in');
slide[slide_index].className=addCls(slide[slide_index].className,'left-out');
tabs[slide_index].className = remCls(tabs[slide_index].className,"slide-tab-acitve");

slide_index=(slide_index+1)%slide.length;

slide[slide_index].className=remCls(slide[slide_index].className,'left-out');
slide[slide_index].className=remCls(slide[slide_index].className,'right-out');
slide[slide_index].className=addCls(slide[slide_index].className,'right-in');
tabs[slide_index].className = addCls(tabs[slide_index].className,"slide-tab-acitve");
cInterval();
}
留了右滑动的接口 slide_next()和slide_last();

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 图片轮播原生JS HTML5混合开发 CSS3轮播

相关文章推荐

新的分享

章节导航