//引入文件
<script type="text/javascript" src="js/carousel.js"></script>
//html代码
<div id="carousel1" class="carousel-content">
<ul class="carousel">
<li><a href="/ams-page/3dprint"><img src="image/index/banner01.jpg"></a></li>
<li><a href="/ams-page/3dprint"><img src="image/index/banner02.jpg"></a></li>
<li><a href="#"><img src="image/index/banner03.jpg"></a></li>
</ul>
<ul class="carousel-index"></ul>
<div class="carousel-prev"><img src="image/index/icons/left_btn1.png"></div>
<div class="carousel-next"><img src="image/index/icons/right_btn1.png"></div>
</div>
//js代码
//轮播图
$('#carousel1').carousel({
el : {
imgsContainer : '.carousel', // 图片容器
prevBtn : '.carousel-prev', // 上翻按钮
nextBtn : '.carousel-next', // 下翻按钮
indexContainer : '.carousel-index', // 下标容器
},conf : {
auto : true, //是否自动播放 true/false 默认:true
needIndexNum : true, //是否需要下标数字 true/false 默认:true
animateTiming : 1000, //动画时长(毫秒) 默认:1000
autoTiming : 3000, //自动播放间隔时间(毫秒) 默认:3000
direction : 'right', //自动播放方向 left/right 默认:right
}
});
/*以下代码按照需要添加/修改*/
$(".carousel-prev").hover(function(){
$(this).find("img").attr("src","image/index/icons/left_btn2.png");
},function(){
$(this).find("img").attr("src","image/index/icons/left_btn1.png");
});
$(".carousel-next").hover(function(){
$(this).find("img").attr("src","image/index/icons/right_btn2.png");
},function(){
$(this).find("img").attr("src","image/index/icons/right_btn1.png");
});