手写无缝轮播banner
<div class="banner">
<ul class="clearfloat bannerul xin" id="xin">
<!-- <li><img src="img/nbaner.png" /></li>
<li><img src="img/nbaner.png" /></li>
<li><img src="img/nbaner.png" /></li>
<li><img src="img/nbaner.png" /></li> -->
</ul>
<ul class="num clearfloat">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<div>
<!-- <button class="ll" type="button">Click Me l!</button>
<button class="rr" type="button">Click Me r!</button> -->
<!-- <span class="left-btn-l">
<img src="data:images/lef1.png" width="26" class="ll">
</span>
<span class="right-btn-r">
<img src="data:images/rig1.png" width="26" class="rr">
</span> -->
</div>
</div>
Page.prototype.banner = function (data) {
var that = this;
var banners = $('.banner');
var bannerul = $('.bannerul');
var bannerulli = $('.bannerul li')
var widths = banners.width();
var lengths = bannerulli.length;
var sid = null;
var index = 0;
bannerulli.width(widths)
var bgc = []
for (var i = 0; i < data.length; i++) {
var tt = {};
tt.background = data[i].background;
bgc.push(tt);
}
banners.css(bgc[0]);
function play() {
index++;
if (index == lengths) {
index = 0;
banners.css(bgc[index]);
}
banners.css(bgc[index]);
core(index);
}
sid = setInterval(play, 5000);
banners.hover(function () {
clearInterval(sid)
}, function () {
sid = setInterval(play, 5000);
}); $(".num li").on('click', function () {
index = $(this).index();
banners.css(bgc[index]);
core(index);
}); function core(index) { $('.bannerul').append($('.bannerul li').eq(0).clone());//copy第一张添加在最后
bannerul.stop().animate({
'left': -(bannerulli.eq(0).innerWidth())
}, 1000,"linear",function(){
$('.bannerul li').eq(0).remove();//执行完删除第一个图片
bannerul.css({"left":"0px"});//初始化left值
});
$('.num li').eq(index).addClass('active').siblings().removeClass('active'); }
}
原理参考:https://www.cnblogs.com/zbblog/p/12053666.html
思路:不断copy第一张图片添加到最后。同时向左移动一定值。在执行动画结束回调执行remove首张图片。以此作为循环。
手写无缝轮播banner的更多相关文章
- jq写无缝轮播
今天分享一下我自己早几天写的一个效果:无缝轮播,虽然不难,很简单,也没有封装处理过,但是还是希望能帮到一些前端的小伙伴吧,如果有小伙伴感觉有更简化的写法希望可以一起交流一下,技术在于交流嘛,我的邮箱是 ...
- jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javaScript 手写图片轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue手写的轮播图片,解决已经修改data中的值,页面标签已绑定,但页面没效果
1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <link> <meta chars ...
- 网站banner无缝轮播
网站banner无缝轮播 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- 安卓开发笔记——自定义广告轮播Banner(实现无限循环)
关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...
- Android真正意义上的无限轮播Banner
在android开发的时候,经常会使用到轮播图,对于这种效果,一般情况下,我们都会使用一种叫做ViewPager的来实现. 传统的实现逻辑是自定义一个View继承ViewPager,在适配器中 将co ...
随机推荐
- ES-Next & ES7 @decorator
ES-Next & ES7 @decorator @decorator https://tc39.github.io/proposal-decorators/#sec-syntax https ...
- 「NGK每日快讯」12.15日NGK公链第42期官方快讯!
- 用友U8+V12.0安装教程(有需要软件和服务的可以联系我)
有需要用友U8+V12.0软件和服务的可以联系我 QQ:751824677 1.退出所有杀毒软件 2.先装服务器SQL2008 3.服务器(会计): 经典应用模式--全产品 (解压A盘-执行-Aut ...
- Prometheus+Grafana+Alertmanager搭建全方位的监控告警系统
prometheus安装和配置 prometheus组件介绍 1.Prometheus Server: 用于收集和存储时间序列数据. 2.Client Library: 客户端库,检测应用程序代码,当 ...
- ADT基础(二)—— Tree,Heap and Graph
ADT基础(二)-- Tree,Heap and Graph 1 Tree(二叉树) 先根遍历 (若二叉树为空,则退出,否则进行下面操作) 访问根节点 先根遍历左子树 先根遍历右子树 退出 访问顺序为 ...
- docker mysql数据备份xtrabackup
一.概述 线上有一个mysql,是在docker里面运行的. 关于docker封装mysql镜像,请参考链接:https://www.cnblogs.com/xiao987334176/p/11984 ...
- web前端学习笔记(python)(一)
瞎JB搞]感觉自己全栈了,又要把数据库里面的内容,以web形式展示出来,并支持数据操作.占了好多坑.....慢慢填(主要参考廖雪峰的官网,不懂的再百度) 一.web概念 Client/Server模式 ...
- 翻译:《实用的Python编程》03_01_Script
目录 | 上一节 (2.7 对象模型) | 下一节 (3.2 深入函数) 3.1 脚本 在该部分,我们将深入研究编写 Python 脚本的惯例. 什么是脚本? 脚本就是运行和终止一系列语句的程序. # ...
- iOS之CoreBluetooth
思路 手机与设备间的通讯方式CoreBluetooth是比较常见且通用的.在iOS开发中需明晰以下几点 蓝牙4.0最多可联机7个设备,iPhone6以上都是蓝牙4.0 两台iPhone并不直接通过蓝牙 ...
- h5返回上一页ios页面不刷新
var isPage=false; window.addEventListener('pageshow', function () { if (isPage) { window.loc ...