jQuery带顺序列表图片切换

1、准备好需要用到的图标。

2、 新建html文档。

3、书写hmtl代码。<div id='banner'></div>

4、书写css代码。

.pull-left { float: left!important; }

.pull-right { float: right!important; }

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

.clearfix { display: inline-block; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }

ul, li { margin: 0; padding: 0; list-style-type: none; }

.carousel-box { position: relative; width: 100%; }

.transverse-box { position: relative; width: 66.7%; }

.img-item { position: absolute; top: 0; left: 0; z-index: 0; }

.vertical-box { position: relative; width: 33.3%; }

.vertical-box ul { overflow: hidden; }

.img-item { transition: width 1s; }

.img-item img { width: 100%; height: 100%; }

.vertical-box ul li { font-size: 0; }

.vertical-box ul li img { width: 100%; height: 100%; }

.left-arrow { display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 0px; color: #fff; margin-top: -35px; font-size: 50px; font-weight: 200; text-align: center; line-height: 100px; width: 50px; height: 70px; background: rgba(0,0,0,0.6); cursor: pointer; z-index: 99; }

.right-arrow { display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; right: 0px; color: #fff; margin-top: -35px; font-size: 50px; font-weight: 200; text-align: center; line-height: 100px; width: 50px; height: 70px; background: rgba(0,0,0,0.6); cursor: pointer; z-index: 99; }

5、书写并添加js代码。

<script src="js/jquery.min.js"></script>

<script src='js/carousel.js'></script>

<script>

window.onload = function(){

var banner = new Carousel();

//图片地址数组。不要少于三张

var imgSrcDate = ["img/a1.png","img/a2.png","img/a3.png","img/a4.png","img/a5.png","img/a6.png"];

banner.init({

container:"#banner",

datas:imgSrcDate,

autoplaySpeed:5000,

autoplay:false

});

}

</script>

6、代码整体结构。

7、查看效果。