Html+Css+JQuery生成轮播效果
1、利用Html给页面添加样式,设置相应的标签,引入图片
<div class="container">
<div class="con">
<ul>
<li><img src="image/bird1.png" alt=""></li>
<li><img src="image/bird2.png" alt=""></li>
<li><img src="image/bird3.png" alt=""></li>
<li><img src="image/bird4.png" alt=""></li>
<li><img src="image/bird5.png" alt=""></li>
</ul>
</div>
</div>
2、在css中设置style
ul,li{
list-style: none;
}
.container{
position: relative;
}
.con{
width: 900px;
margin: 15px auto 0;
margin-top: 200px;
overflow: hidden;
}
.con li img{
width: 172px;
height: 200px;
}
.con li{
float: left;
margin-right: 8px;
}
3、引入JQuery插键及JQuery知识(运用老师课件内容),slide() 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数,从而生成轮播效果
<script src="plugin/jquery1.42.min.js"></script>
<script src="plugin/jquery.SuperSlide.2.1.1.js"></script>
<script>
$(function(){
jQuery(".container").slide({
mainCell:".con ul",
effect:"leftLoop",
autoPlay:true,
vis:5
});
})
</script>