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

1.使用 unslider.min.js

2.引入文件

3.组件

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

                                    
                                

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 += "
" + id + ")\">\n" +
                    "                                            
\n" +
                    "                                                
\n" +
                    "                                                    "+newsSmallPic+"\">\n" +
                    "                                                
\n" +
                    "                                                
\n" + title +
                    "                                                
\n" +
                    "                                            
\n" +
                    "                                        ";
            }
            $('.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