js 实现轮播图 超级简单 组件已封装

1.使用 unslider.min.js

 

2.引入文件

<script src="js/jquery-1.8.3.min.js"></script>
<script src="./js/unslider.min.js"></script>

3.组件

<div class="banner" style="height: 100%" id="b02">
                                    <ul class="htmlDiv1" style="height: 100%;overflow: hidden">

                                    </ul>
                                </div>

4.ajax动态获取数据展示

$.ajax({
        type : "GET",
        url: host + "/plus/news/pageIndex?current=" + 1 + "&size=" + 3,
        dataType : "json",
        success : function(data) {
            if (!data.page) {
                console.log("服务器错误");
                return
            }
            // 拼接html(这个部分根据自己的需求去实现)
            var list = data.page.records;
            var cHtml = '';

            for (var i = 0; i < list.length; i++) {
                // 处理预显示内容
                var title = list[i].newsTitle;
                var id = list[i].newsId;
                var newsSmallPic = list[i].newsSmallPic;
                title = handlestr(title);
                if (title.length > 36) {
                    title = title.substring(0, 36) + '……';
                }
                cHtml += "<li style=\"height: 100%\" onclick=\"detailPic(" + id + ")\">\n" +
                    "                                            <div style=\"height: 100%\">\n" +
                    "                                                <div style=\"height: 100%;\">\n" +
                    "                                                    <img height=\"100%\" width=\"100%\" src=\""+newsSmallPic+"\">\n" +
                    "                                                </div>\n" +
                    "                                                <div class=\"div-6-left-2\">\n" + title +
                    "                                                </div>\n" +
                    "                                            </div>\n" +
                    "                                        </li>";
            }
            $('.htmlDiv1').html(cHtml);
            $('#b02').unslider();
        }
    });

5.样式

.banner { position: relative; overflow: auto; text-align: center;}
.banner li { list-style: none; }
.banner ul li { float: left; cursor: pointer }

6.展示效果

 

 

 

参考链接：

https://www.jq22.com/yanshi1940