之前教别人用vue写轮播图,写了个例子,只供参考,请勿吐槽
引入vue.js我就不用说了,下面试轮播图样式
<style>
*{padding:0;margin:0;}
ul{ position:relative; overflow:hidden;}
ul li{ list-style:none; position:absolute;right:-600px;opacity: 0;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;}
ol li{list-style:none;}
#map{width:600px;height:300px; position:relative;}
ul,ul li,ul li img{width:100%;height:100%;}
.img-active{top:0;left:0;opacity: 1;}
.slider-nav{ position:absolute; text-align:center; width:100%; bottom:20px;}
.slider-nav li {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAAAJdnBBZwAAABQAAAAUAKM7KtEAAADISURBVCjPjdI9T8JQFIDhp6cKTRz4mFpmFwz+//9hgk4YJ0sMJiKSlKVxwFo/Au07ndz7TPeeRFvI5SYytcrW2lrdXCbfLHfjyu/2HpTHMf3ic7cG/jYwk3pt4dy1U02FzREWFs41tfMRooPBQoRC1gkzs1B0MsjDuBcch2Ev