banner轮播图
程序员文章站
2024-02-09 22:09:28
...
一. 效果图
二. 功能介绍
1. 支持图片自动轮播和非自动轮播
2. 支持点击和滑动。
三. 简单介绍
代码都有注释,逻辑简单,不做更多赘述。
1. 在你的html中添加一行。
2. 在你的处理页面逻辑的JS代码中添加以下代码:
(1)先是动态加载html。
(2)然后调用slider并且传入参数。
3. css样式代码
注意:部分图片资源需要更换。
4. 插件原代码:
已经测试,jQuery和Zepto都适用。
二. 功能介绍
1. 支持图片自动轮播和非自动轮播
2. 支持点击和滑动。
三. 简单介绍
代码都有注释,逻辑简单,不做更多赘述。
1. 在你的html中添加一行。
<section class="slider-wrap" style="height:160px" id="banner"></section>
2. 在你的处理页面逻辑的JS代码中添加以下代码:
(1)先是动态加载html。
(2)然后调用slider并且传入参数。
// banner // bannerList结构:[{image: ..., url: ...}, {...}, {...}] var bannerList = ...; var bannerHTML = bannerList ? this.renderBanner(bannerList) : ''; $("#banner").html(bannerHTML); $("#banner").slider({ "autoScroll": true, "infinite": true });
renderBanner: function(bannerList) { var html = '<ul class="slider-list">'; $.each(bannerList, function(index, item) { var url = item["url"].match(/./) == '/' ? 'https://simu.dahuo.la' + item["url"] : item["url"]; html += '<li class="slider-item openParam" data-param="' + url + '"' + 'data-baidu-action="banner" data-baidu-label="' + (parseInt(index) + 1) + '">' + '<div class="img-wrap"><img class="banner-image" src="' + item["image"] + '"/></div></li>'; }); html += '</ul>'; return html; },
3. css样式代码
注意:部分图片资源需要更换。
.slider-wrap { width: 100%; position: relative; overflow: hidden; } .slider-list { display: -webkit-box; width: 100%; height: 100%; } .slider-item { width: 100%; list-style: none; } .slider-item a { display: block; } .slider-item img { width: 100%; } .transitionable { -webkit-transition: all 0.3s ease-in-out; } .slider-page { width: 100%; position: absolute; bottom: 5px; left: 0; text-align: center; } .slider-page ul { display: inline-block; text-align: center; } .slider-page ul li { display: inline-block; vertical-align: top; width: 6px; height: 6px; margin: 0 5px; border-radius: 50%; background: rgba(255, 255, 255, .5) } .slider-page ul li.active { background: #fff } .img-wrap { width: 100%; height: 100%; background: #fafafa url("../images/loading.gif") no-repeat center center; }
4. 插件原代码:
已经测试,jQuery和Zepto都适用。
复制代码 /* * slider */ ; (function($) { $.extend($.fn, { slider: function(obj) { this.each(function() { // 当前Zepto对象 var $self = $(this); var dom = { "wrap": $self.find(".slider-list"), "item": $self.find(".slider-item"), "firstItem": $self.find(".slider-item").first(), "lastItem": $self.find(".slider-item").last(), "pagelist": null, "pageItem": null, }; var settings = { "len": dom.item.length, "width": dom.wrap.width(), "startX": 0, "startY": 0, "index": obj ? (obj.infinite ? 1 : 0) : 0, "distance": 0, "timer": null, "autoScroll": obj ? (obj.autoScroll ? true : false) : false, "infinite": obj ? (obj.infinite ? true : false) : false }; var funs = { init: function() { if (settings.len > 1) { funs.initUI(); funs.bindEvent(); if (settings.autoScroll) { settings.timer = setInterval(funs.autoAnimate, 3000); } } }, initUI: function() { if (settings.infinite) { var cloneFisrt = dom.firstItem.clone(); var cloneLast = dom.lastItem.clone(); dom.wrap.append(cloneFisrt); cloneLast.insertBefore(dom.firstItem); } funs.creatPage(); dom.item = $self.find(".slider-item"); settings.count = dom.item.length; settings.distance = settings.width / 5; if (settings.infinite) { dom.wrap.css("-webkit-transform", "translate3d(" + -settings.width + "px,0,0)"); } }, creatPage: function() { var pagelist = '<div class="slider-page"><ul>'; for (var i = 0; i < settings.len; i++) { if (i == 0) { pagelist += '<li class="active"></li>'; } else { pagelist += '<li></li>'; } } pagelist += '</ul></div>'; $self.append(pagelist); dom.pagelist = $self.find(".slider-page"); dom.pageItem = dom.pagelist.find("li"); }, bindEvent: function() { $self.off().on({ "touchstart": function(e) { e.stopPropagation(); clearInterval(settings.timer); settings.startX = e.touches ? e.touches[0].pageX : e.originalEvent.touches[0].pageX; settings.startY = e.touches ? e.touches[0].pageY : e.originalEvent.touches[0].pageY; }, "touchmove": function(e) { e.stopPropagation(); e.preventDefault(); var curX = e.touches ? e.touches[0].pageX : e.originalEvent.touches[0].pageX; var curY = e.touches ? e.touches[0].pageY : e.originalEvent.touches[0].pageY; var moveX = curX - settings.startX; var moveY = curY - settings.startY; //避免禁用了下拉事件 if (Math.abs(moveY) > Math.abs(moveX)) { window.event.returnValue = true; } var x = -settings.index * settings.width + moveX; dom.wrap.css("-webkit-transform", "translate3d(" + x + "px,0,0)"); }, "touchend": function(e) { e.stopPropagation(); var curX = e.changedTouches ? e.changedTouches[0].pageX : e.originalEvent.changedTouches[0].pageX; var moveX = curX - settings.startX; if (Math.abs(moveX) >= settings.distance) { settings.index = settings.index - Math.abs(moveX) / moveX; //判断是向左还是向右 } if (settings.index >= settings.count - 1) { settings.index = settings.count - 1; } if (settings.index <= 0) { settings.index = 0; } funs.animate(); if (settings.autoScroll) { settings.timer = setInterval(funs.autoAnimate, 3000); } }, "touchcancel": function(e) { dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)"); }, "webkitTransitionEnd": function(e) { e.stopPropagation(); e.preventDefault(); dom.wrap.removeClass("transitionable"); if (settings.infinite) { if (settings.index <= 0) { settings.index = settings.count - 2; } if (settings.index >= settings.count - 1) { settings.index = 1; } } var itemIndex = settings.infinite ? settings.index - 1 : settings.index; dom.pageItem.removeClass("active"); dom.pageItem.eq("" + itemIndex + "").addClass("active"); dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)"); } }); $(window).on({ "resize": function() { funs.adjustPos(); }, "orientationchange": function() { funs.adjustPos(); } }) }, adjustPos: function() { settings.width = dom.wrap.width(); settings.distance = settings.width / 5; dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)"); }, animate: function() { dom.wrap.addClass("transitionable"); dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)"); }, autoAnimate: function() { if (settings.width > 0) { settings.index++; funs.animate(); } } }; funs.init(); }); return this; } }); })(window.jQuery || window.Zepto);
上一篇: HttpClient 教程(1)
下一篇: HttpClient 实例(1)