function Banner() {
var self = this;
self.countLi = $('.banner-group .bannerUl li').length;
self.bannerUl = $('.banner-group .bannerUl');
self.bannerGroup = $('.banner-group');
self.arrow = $('.arrow');
self.leftarrow = $('.arrow-left');
self.rightarrow = $('.arrow-right');
self.bannerControl = $('.bannerControl');
self.index = 1;
} Banner.prototype.animate = function(){
var self = this;
self.bannerUl.animate({'left':-798*self.index},500);
var index = self.index;
if (index===0){
index = self.countLi-1;
}else if(index === self.countLi+1){
index = 0
}else {
index = self.index-1;
}
self.bannerControl.children('li').eq(index).css('background-color','white').siblings('li').css('background-color','');
}; //初始化小圆点
Banner.prototype.bannerInit = function () {
var self = this;
self.bannerUl.css({'left':-798});
self.bannerUl.css('width',798*(self.countLi+2));
self.bannerControl.css('width',12*self.countLi+20*self.countLi);
for (i=0;i<self.countLi;i++){
var cirle = $('<li></li>');
self.bannerControl.append(cirle);
if(i===0){
self.bannerControl.children('li').eq(0).css('background-color','white');
}
}
var first = self.bannerUl.children('li').eq(0).clone();
var last = self.bannerUl.children('li').eq(self.countLi-1).clone();
self.bannerUl.append(first);
self.bannerUl.prepend(last);
}; //实现轮播图自动轮播
Banner.prototype.loop = function() {
var self = this;
self.timer = setInterval(function () {
if (self.index>=self.countLi+1){
self.bannerUl.css({'left':-798});
self.index=2;
}else {
self.index++;
}
self.animate();
},1000);
}; // 监听鼠标是否在轮播图上面
Banner.prototype.listenHover = function(){
var self = this;
self.bannerGroup.hover(function () {
clearInterval(self.timer);
self.listenArrow(true);
}, function () {
self.loop();
self.listenArrow(false);
})
}; //监听箭头隐藏事件
Banner.prototype.listenArrow = function(isshow){
var self = this;
if (isshow){
self.arrow.show();
}else {
self.arrow.hide();
}
};
//监听箭头点击事件
Banner.prototype.clickArrow = function () {
var self = this;
self.rightarrow.click(function () {
if(self.index>=self.countLi+1){
self.bannerUl.css({'left':-798});
self.index=2;
}else {
self.index++;
}
self.animate();
});
self.leftarrow.click(function () {
if(self.index===0){
self.bannerUl.css({'left':-self.countLi*798});
self.index = self.countLi-1;
}else {
self.index--
}
self.animate();
})
}; //小圆点控制轮播图
// Banner.prototype.bannerControlUl = function(){
// var self = this;
// self.bannerControl.children('li').eq(self.index+1).css('background-color','white').siblings('li').css('background-color','');
// }; //小圆点点击事件
Banner.prototype.clickControl = function () {
var self = this;
self.bannerControl.children('li').each(function (index,obj) {
$(obj).click(function () {
self.animate();
self.bannerControl.children('li').eq(index).css('background-color','white').siblings('li').css('background-color','');
})
})
}; Banner.prototype.run = function () {
var self = this;
self.loop();
self.listenArrow(false);
self.listenHover();
self.clickArrow();
self.bannerInit();
self.clickControl();
};
$(function () {
var banner = new Banner();
banner.run();
});

轮播图js编写的更多相关文章

  1. 轮播图--JS手写

    轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> < ...

  2. 轮播图--js课程

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 轮播图js版&jQ版

    JS版轮播图 html部分和css部分自己任意定 主要构成: 1,一个固定的框 超出框的部分隐藏 2,几张图片float:left 3,下部下原点,点击切换,切换到不同的张都有红色显示 4,左右两个大 ...

  4. 小米官网轮播图js+css3+html实现

    官网轮播: 我的轮播: 重难点: 1.布局 2.图片和右下角小圆点的同步问题 3.setInterval定时器的使用 4.淡入淡出动画效果 5.左右箭头点击时,图片和小圆点的效果同步 6.另一种轮播思 ...

  5. 转:大气炫酷焦点轮播图js特效

    使用方法 Step 1. 在html的标签内引入相关文件 <script type="text/javascript" src="js/myfocus-2.0.0. ...

  6. banner轮播图js

    例子1: if(!$('.side_ul ul').is(":animated")){            var wli = $('.side_ul li').width()+ ...

  7. 简单介绍无限轮播图,js源代码

    无限轮播图js源代码,今天介绍一下用js简单的编写无限轮播图 <!DOCTYPE html> <html>   <head>     <meta charse ...

  8. App轮播图

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. js编写轮播图,广告弹框

    1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...

随机推荐

  1. OOM三种情况

    第一种OutOfMemoryError: PermGen space发生这种问题的原意是程序中使用了大量的jar或class,使java虚拟机装载类的空间不够,与Permanent Generatio ...

  2. 《深入浅出 Java Concurrency》目录

    最近在学习J.U.C,看到一个大神 关于这个系列写的非常精辟,由于想做笔记,故系列转载并记录之. 原文:http://www.blogjava.net/xylz/archive/2010/07/08/ ...

  3. java反编译工具cfr

    http://www.benf.org/other/cfr/ 下载反编译工具 @echo off SET home=%cd% rem 指定存放jar包的目录 SET jar_dir=%home%\ja ...

  4. linux查看磁盘大小df命令

    df -h https://www.cnblogs.com/sparkdev/p/9273094.html

  5. linux显示历史命令history

    history history//显示历史命令

  6. Tomcat-servlet基础

    1.1 概念 运行在服务器上的小程序   定义了浏览器访问到(tomact)的规则 1.2 步骤 1.3 执行原理 1  当服务器 接收到客户端浏览器的请求后  会解析url地址  获得url路径   ...

  7. canvas(五)createPattern

    /** * Created by xianrongbin on 2017/3/9. * 图片填充 */ var dom = document.getElementById('clock'), ctx ...

  8. 微擎开发------day03

    微擎系统的路由 首先附上一张完整的项目目录图,可下载图片后查看详情 详细的路由介绍 (1)后台系统路由 例如:http://local.drp.com/web/index.php?c=home& ...

  9. EF ++属性会更新实体

    var lastBaby = await _babyRepository.FirstOrDefaultAsync(); ++lastBaby.sort; -- sort原本为1 -- 最终会生成一条语 ...

  10. CentOS7 下使用root免密码输入自动登入gnome桌面

    如果系统默认启动图形界面: vi /etc/gdm/custom.conf #找到[daemon],修改为下面的 [daemon] AutomaticLoginEnable=true Automati ...