Html网页显示js轮播图.docx

Html网页显示js轮播图
<divclass="top-image">
<divclass="loopImage">
<!--轮播图js文件-->
<!--<scriptsrc="js/jquery-1.8.3.min.js"></script>-->
<scriptsrc="js/jquery.luara.0.0.1.min.js"></script>
<script>
$(function(){
/*<!--调用Luara-->*/
$(".example").luara({width:"980",height:"291",interval:2500,selected:"seleted",deriction:"left"});
});
</script>

<!--Luara图片切换骨架begin-->
<divclass="example"style="position:absolute;top:142px;">
<ul>
<li><imgsrc="images/lbt01.jpg"width="980"height="291"alt="1"/></li>
<li><imgsrc="images/lbt02.jpg"width="980"height="291"alt="2"/></li>
<li><imgsrc="images/lbt03.jpg"width="980"height="291"alt="3"/></li>
<li><imgsrc="images/lbt04.jpg"width="980"height="291"alt="4"/></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<!--Luara图片切换骨架end-->

</div>
</div>

.top-menu{
height:43px;
margin-bottom:2px;
background-color:#11577d;
}

.top-menu-ct{
width:980px;
height:43px;
margin:auto;
color:white;
font:bold16px'微软雅黑';
line-height:43px;
position:relative;
}

.top-image{
height:291px;
/*background-color:#1e8dc9;*/
}

.loopImage{
width:980px;
margin:auto;
}

.top-menu-cta{
margin-left:10px;
margin-right:10px;
}

.top-menu-cta:hover{
background:#4c85a4;
}

.top-menu-cta:active{
color:#074668;
}

/*-------首页轮播图样式--------*/
.exampleol{
position:absolute;
width:80px;
height:20px;
bottom:8px;
right:101px;
}

.exampleolli{
float:left;
width:10px;
height:10px;
margin:5px;
background:#fff;
list-style:none;
}

.exampleolli.seleted{
background:#1AA4CA;
}

.luara-left{
position:relative;
padding:0;
overflow:hidden;
}

.luara-leftul{
position:relative;
padding:inherit;
margin:0;
}

.luara-leftulli{
float:left;
padding:inherit;
margin:inherit;
list-style:none;
}

.luara-leftulliimg{
width:inherit;
height:inherit;
}

背景色什么的您再根据自己的需要定制吧，记得图片名不能存在中文哦。