banner无缝轮播【小封装】
转载：http://www.qdfuns.com/notes/23446/d1691a1edf5685396813cc85ae6ab10f.html
一直在重复的写banner,写了了好几个，然后每次写，不停的造轮子，然后渐渐的学会封装，虽然还是不太懂更深层次的东西，但在不断的进步中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>图片轮播</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
html,body{
padding:;
margin:;
}
ul,ul li{
list-style: none;
margin:;
padding:;
}
.box{
} #banner{
position: relative;
height:auto;
overflow: hidden;
}
#banner ul{
position:absolute;
}
#banner ul li{
float: left;
}
#banner ul li img{
width: 100%;
height: 100%;
}
#banner #prevBtn,#banner #nextBtn{
height:80px;
width:30px;
background:rgba(0,0,0,0.5);
position:absolute;
top:50%;
margin-top:-40px;
font-size:30px;
line-height:80px;
text-align:center;
text-decoration:none;
color:white;
opacity:;
transition: opacity 0.8s ease;
}
#banner #prevBtn{
left:;
}
#banner #nextBtn{
right:;
}
#banner:hover #prevBtn,#banner:hover #nextBtn{
opacity:;
}
.dot{
height:10px;
width:10px;
border-radius:10px;
background:#2196f3;
display:inline-block;
margin:5px;
}
.on{
background: #009688;
}
</style>
</head>
<body>
<div class="box">
<div id="banner">
<ul id="banner-wrap">
<li>
<img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img1.jpg">
</li>
<li>
<img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img2.jpg">
</li>
<li>
<img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img3.jpg">
</li>
<li>
<img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img4.jpg">
</li>
<li>
<img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img5.jpg">
</li>
</ul>
</div>
</div>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script>
<script type="text/javascript">
(function($,window,document,undefinen){
$.fn.bannerSwiper=function(option){
this.default={
boxWrap:null,//必填
nextBtn:false,//是否往下启动按钮
prevBtn:false,//是否往上启动按钮
autoPlay:false,//是否启动自动播放
times:3000,//自动轮播的时间间隔,
speed:600,//点击按钮是切换的速度
circle:false,//是否启动小圆点
circleAlign:"center",//小圆点的对其方式
circleClick:false//小圆点是否可以点击
}
var self=this;
this.time=null;
this.options=$.extend({},this.default,option);
self.flag=true;
// 插件入口
this.init=function(){
this.bulid();
}
this.bulid=function(){
var self=this;
var wrap=self.options.boxWrap;
self.num=1;
self.nowTime=+new Date();
self.width=$(window).width();
var firstImg=$(wrap).find('li').first();
var lastImg=$(wrap).find('li').last();
$(wrap).append(firstImg.clone());
$(wrap).prepend(lastImg.clone());
self.length=$(wrap).find('li').length;
$(wrap).width(self.width*self.length);
$(wrap).find('li').width(self.width)
$(wrap).parent().height(480);
$(wrap).parent().width(self.width);
$(wrap).css({'left':-self.width*self.num})
// 是否启动自动轮播
if(self.options.autoPlay){
self.plays();
}
// 是否启动按钮
if(self.options.nextBtn){
self.NextBtn();
}
// 是否启动按钮
if(self.options.prevBtn){
self.prevBtn();
}
// 是否启动小圆点
if(self.options.circle){
self.circle()
}
if(self.options.circleClick){
self.clickCircle();
} }
// // 鼠标移入时
self.on('mouseenter',function(){
self.stops();
})
// 鼠标移出时
self.on('mouseleave',function(){
self.plays(1);
}) // 开始计时器，自动轮播
this.plays=function(){
var self=this;
// self.stops();
console.log('play')
this.time=setInterval(function(){
self.go(-self.width)
},self.options.times);
}
// 停止计时器
this.stops=function(){
console.log('stop');
clearInterval(self.time)
}
// 手动创建按钮元素
this.prevBtn=function(){
var self=this;
var ele=$("<a href='javascript:;' id='prevBtn'><</a>");
self.append(ele);
$('#prevBtn').bind("click",function(){
self.go(self.width);
})
}
// 手动创建按钮元素
this.NextBtn=function(){
var self=this;
var ele=$("<a href='javascript:;' id='nextBtn'>></a>");
self.append(ele)
$('#nextBtn').bind("click",function(){
self.go(-self.width);
})
}
// 手动创建小圆点
this.circle=function(){
var self=this;
var ele=$('<div id="circle-wrap"></div>');
for(var i=0;i<self.length-2;i++){
$('<a class="dot" href="javascript:;"></a>').appendTo(ele)
}
ele.css({
"position":"absolute",
'bottom':'0',
'right':'0',
'left':'0',
'height':'20px',
"padding":"0 10px",
'text-align':self.options.circleAlign
});
self.append(ele);
self.playCircle(this.num-1); }
//小圆点指定当前项
this.playCircle=function(num){
$('#circle-wrap').find('.dot').eq(num).addClass('on').siblings().removeClass('on');
}
// 点击小圆点
this.clickCircle=function(){
var self=this;
$('#circle-wrap').find('.dot').on('click',function(){
self.num=$(this).index()+1;
self.circlePlay()
})
}
// 点击小圆点，图片切换
this.circlePlay=function(){
self.flag=true;
if(self.flag){
self.flag=false;
$(self.options.boxWrap).stop().animate({
'left':-self.num*self.width
},self.options.speed,function(){
self.flag=true;
});
}
self.playCircle(this.num-1);
}
// 点击按钮，进行轮播,以及自动轮播
this.go=function(offset){
var self=this;
if(self.flag){
self.flag=false;
if(offset<0){
self.num++;
if(self.num>self.length-2){
self.num=1;
}
}
if(offset>0){
self.num--;
if(self.num<=0){
self.num=self.length-2
}
}
if(Math.ceil($(self.options.boxWrap).position().left)<-(self.length-2)*self.width){
$(self.options.boxWrap).css({
'left':-self.width
});
}
if(Math.ceil($(self.options.boxWrap).position().left)>-self.length){
$(self.options.boxWrap).css({
'left':-self.width*(self.length-2)
})
}
self.playCircle(this.num-1);
$(self.options.boxWrap).stop().animate({
'left':$(self.options.boxWrap).position().left+offset
},self.options.speed,function(){
self.flag=true;
});
}
}
this.init();
}
})(jQuery,window,document)
$('#banner').bannerSwiper({
boxWrap:"#banner-wrap",
nextBtn:true,
prevBtn:true,
autoPlay:true,
circle:true,
circleClick:true
})
</script>
</body>
</html>
banner无缝轮播【小封装】的更多相关文章
- 网站banner无缝轮播
网站banner无缝轮播 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- JQ无缝轮播图-插件封装
类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...
- 原生js实现无缝轮播
原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...
- jQuery图片无缝轮播
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq写无缝轮播
今天分享一下我自己早几天写的一个效果:无缝轮播,虽然不难,很简单,也没有封装处理过,但是还是希望能帮到一些前端的小伙伴吧,如果有小伙伴感觉有更简化的写法希望可以一起交流一下,技术在于交流嘛,我的邮箱是 ...
- js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- 记一个jquery 无缝轮播的制作方法
接触前端也很久了,今天才发现,要做好一个轮播,其实有很多东西需要考虑进去,否则做出来的轮播效果并不好,下面我就来做一个轮播,是依赖jquery来写的 1.要做轮播,首先需要的是HTML的内容,css的 ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
随机推荐
- PHP curl请求https遇到的坑
PHP里curl对https的证书配置默认是服务器端要求验证的,如果服务器端没有配置证书验证,则无法请求https路径.如果为了简便使用不需要配置https证书的话,配置curl时将以下两项设置为fa ...
- Appium 命令行模式下遇到的问题总结及解决方案 npm ERR! tar.unpack unzip(或者untar) error
安装了GUI Appium后,卸载删除问题后,使用命令行模式安装. 一. 遇到问题: nalideMacBook-Pro:~ nali$ npm install -g appium npm ERR! ...
- TextView 的新特性，Autosizing 到底是如何实现的？ | 源码分析
一.前言 Hi,大家好,我是承香墨影! 前两天聊了一下 Autosizing 的使用,反映还不错.毕竟是这种能解决实际问题的新 Api,确实在需要的时候,用起来会很顺手. 简单回顾一下,Autosiz ...
- C#操作MongoDB的简单实例
最近比较忙,很久没更新了(虽然没人看,也没人在乎,也要记得be yourself), 前面分享了一些mongodb的安装和简单的语法,今天模仿支付宝首页的模块移动功能,用mongo做一个简单的后台实例 ...
- 个人项目--“”小鱼企业级开发系统“”Svn地址分享
由于精力有限,博主现在只维护这一个系统,会不时的更新代码提交. ""小鱼企业级开发系统""的Svn地址:http://code.taobao.org/svn/S ...
- Spring-Blog:个人博客（一）-Mybatis 读写分离
概述: 2018,在平(tou)静(lan)了一段时间后,开始找点事情来做.这一次准备开发一个个人博客,在开发过程之中完善一下自己的技术.本系列博客只会提出一些比较有价值的技术思路,不会像写流水账一样 ...
- ascii、unicode、utf-8、gbk区别及转换
一.编码 ascii: A:00000010 8位 一个字节 unicode: A:00000000 00000001 00000010 00000100 32位 四个字节 中:00000000 00 ...
- 【JavaScript数组】
1.什么是数组--Array 数组就是一组数据的集合 其表现形式就是内存中的一段连续的内存地址 数组名称其实就是连续内存地址的首地址 2.关于js中的数组特点 数组定义时无需指定数据类型 数组定义时可 ...
- CSS中伪类选择器及伪元素
1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...
- border-image详解
一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人.可惜目前支持的浏览器有限,仅Firefox3.5,chrom ...