三种简单的创建轮播图的方式
Posted 唐小青
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三种简单的创建轮播图的方式相关的知识，希望对你有一定的参考价值。
一，原生JS和jquery代码（以JS为例）
<script type="text/javascript">
var a=["../images/img1.jpg","../images/img2.jpg",
"../images/img3.jpg","../images/img4.jpg"];//创建图片数组，存储图片
var b=document.getElementById(‘imgn‘);//需根据自身代码获取元素
setInterval(change,2000);//设置切换时间
var i=0;
function change(){
// for(var i=0;i<a.length;i++){
if(i==3){
i=0;
}else{
i++ //设置无限循环
}
b.src=a[i];//赋值
// }
}
</script>
二。利用CSS3动画特效
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>sadad</title>
<style type="text/css">
div{
height: 425px;
width: 1265px;
-webkit-animation: changepic 8s linear alternate infinite //创建自定义动画
}
@-webkit-keyframes changepic{//设置自定义动画
0% {background: url("../images/img1.jpg");}
25% {background: url("../images/img2.jpg");}
50% {background: url("../images/img3.jpg");}
100% {background: url("../images/img4.jpg");} //注意，这里要考虑兼容性，必须将主流浏览器的前缀都写进去，笔者偷个懒，只写了谷歌和苹果的
}
</style>
</head>
<body>
<div>
//创建一个盒子
</div>
</body>
</html>
三。利用滚动标签(简单类) <marquee>标签
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>dasd</title>
<style type="text/css">
ul{
width: 100%;
height: 200px;
}
li{display: inline;
margin: 0}
</style>
</head>
<body>
<div>
<ul>
<marquee> //定义滚动对象
<li><img src="../images/img1.jpg"></li>
<li><img src="../images/img2.jpg"></li>
<li><img src="../images/img3.jpg"></li>
<li><img src="../images/img4.jpg"></li>
</marquee>//结束 滚动默认无限循环
</ul>
</div>
</body>
</html>
marquee可选属性有behavior(滚动方式)、direction(滚动方向)、滚动次数(loop)、scrollamount(滚动速度)、scrolldelay（两次滚动延时时间）
以上是关于三种简单的创建轮播图的方式的主要内容，如果未能解决你的问题，请参考以下文章