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. JAVA 类的三大特性,封装,继承,多态 的一些发现总结

    < 一 > 封装 < 二 > 继承 1,关于父类中的私有属性和方法,子类能不能访问的问题 1.1,子类不能通过继承拥有父类的私有属性和方法 1.2,子类可以从父类继承下来的 方 ...

  2. Delphi使用逍遥安卓模拟器

    由于使用红鱼儿推荐的iTools安卓模拟器一打开virtualbox就消失,所以自己琢磨了使用逍遥安卓 首先在软件管理里面下载逍遥安卓,然后安装设置一下: 3.安装并启动虚拟机,Delphi IDE是 ...

  3. k8s之创建etcd集群

    主机规划 maste01——192.168.10.63 master02——192.168.10.64 node01——192.168.10.65 node02——192.168.10.66 1.为保 ...

  4. 大数据入门到精通12--spark dataframe 注册成hive 的临时表

    一.获得最初的数据并形成dataframe val ny= sc.textFile("data/new_york/")val header=ny.firstval filterNY ...

  5. DOM 节点node

    DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构,即在HTML中所有内容都是节点.文档节点是每个文档的根节点,文档节点有一个子节点,称为文档元素.每个文档只能有一个文档元素.在HTM ...

  6. Java 运行时常量池

    运行时常量池是方法区的一部分.class中除了有类的版本,字段,方法,接口等描述信息外,还有一项信息是常量池,用于存放编译期生成的各种字面量和符号引用,这部分内容将在类加载后存放在方法区的运行时常量池 ...

  7. NodeJs第3方包说明

    formidable 作用:实现简单文件上传 var formidable = require('formidable'); var form = new formidable.IncomingFor ...

  8. netty(六) websocket开发应用

    package com.lance.net.server.common; import java.net.InetSocketAddress; import org.springframework.s ...

  9. FOB cost---从工厂到码头的费用

    1.主要是港杂费:陆运400元起,2个方450元,三个方500元,3个方以上按100元/方算起.

  10. Curl 基本命令

    下载单个文件,默认将输出打印到标准输出中(STDOUT)中 curl http://www.centos.org 通过-o/-O选项保存下载的文件到指定的文件中:-o:将文件保存为命令行中指定的文件名 ...