gitee地址
https://gitee.com/xujiulong/rotation-chart.git
效果图
目录结构
html
- 要引入jqery 和amazeui
<link href="css/amazeui.css" rel="stylesheet" type="text/css" />
<link href="css/hmstyle.css" rel="stylesheet" type="text/css"/>
<!-- 引入jquery 的外部链接 -->
<script src="js/jquery.min.js"></script>
<script src="js/amazeui.min.js"></script>’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/amazeui.css" rel="stylesheet" type="text/css" />
<link href="css/hmstyle.css" rel="stylesheet" type="text/css"/>
<!-- 引入jquery 的外部链接 -->
<script src="js/jquery.min.js"></script>
<script src="js/amazeui.min.js"></script>
</head>
<body>
<div class="banner">
<!--轮播 -->
<div class="am-slider am-slider-default scoll" data-am-flexslider id="demo-slider-0">
<ul class="am-slides">
<li class="banner1"><a><img src="images/ad1.jpg" /></a></li>
<li class="banner2"><a><img src="images/ad2.jpg" /></a></li>
<li class="banner3"><a><img src="images/ad3.jpg" /></a></li>
<li class="banner4"><a><img src="images/ad4.jpg" /></a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--vue轮播 -->
<!-- <div class="banner">
<div class="am-slider am-slider-default scoll" data-am-flexslider id="demo-slider-0">
<ul class="am-slides">
<li v-if="indexImgs.length>0" v-for="img,index in indexImgs" :class="'banner'+(index+1)">
<a><img :src="'static/images/'+img.imgUrl" /></a>
</li>
</ul>
</div>
<div class="clear"></div>
</div> -->
<script type="text/javascript">
(function() {
$('.am-slider').flexslider(); //让轮播图“动起来”
});
$(document).ready(function() {
//让分类列表“动起来”
$("li").hover(function() {
$(".category-content .category-list li.first .menu-in").css("display", "none");
$(".category-content .category-list li.first").removeClass("hover");
$(this).addClass("hover");
$(this).children("div.menu-in").css("display", "block")
}, function() {
$(this).removeClass("hover")
$(this).children("div.menu-in").css("display", "none")
});
})
</script>
<script>
// var vm = new Vue({
// el:"#container",
// data:{
// indexImgs:[],
// },
// created:function(){
// //轮播图
// var url1 = baseUrl+"index/indeximg";
// axios.get(url1).then((res)=>{
// var vo = res.data;
// this.indexImgs = vo.data;
// //console.log("-----------------------轮播图");
// //console.log(this.indexImgs);
// //渲染轮播图
// //初始化轮播图动画效果
// setTimeout(function(){
// $('.am-slider').flexslider();
// },100)
// });
// }
// })
</script>
</body>
</html>