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布局,所以没有使 ...
随机推荐
- ubuntu搭建 zabbix3.2 with mysql database （Ubuntu 14.04.5 LTS）
官网文档 服务构建:https://www.zabbix.com/documentation/3.2/manual/installation/install_from_packages/server_ ...
- SpringMvc开发步骤
1.导入基本jar包 2.在Web.xml中配置DispatcherServlet <!-- 配置 DispatcherServlet --> <servlet> <se ...
- File API文件操作之FileReader
近来研究点对点的文件传输,想到一种方案FileReader+WebRtc. 当我看到FileReader的时候,哎呀,不错的东西啊,仔细一看属于File API,或者叫做Web API. File A ...
- margin负值的作用
一.左右负margin改变自身宽度 当元素不存在width或者width:auto的时候,负margin会增加元素的宽度. html <div class="parent"& ...
- Python（三）字典的增删改查和遍历
一.增加
- unity3d 打包个人记录
证书问题Android:CreateCer.bat ztmyseabed 路径:tool/Build/Windows/Android下iOS:MacCer文件夹如何上传ipa:修改版本号version ...
- 从Unity中的Attribute到AOP(八)
本文将讲一下在UnityEditor命名空间下的一些特性. CallBackOrder,这个Attribute是所有带callback index的Attribute的基类,由于官方也没有给出详细的说 ...
- mybatis动态sql排序无效
order by 字段,在用动态sql时会出现问题,排序无效,而且在日志里查询不到,不能发现这个错误. 通常,咱们的动态sql一般都会用#代替$,因为#可以防止sql注入问题. 但是在order by ...
- ABP Zero示例项目问题总结
1.ABP Zero项目,登录时出现如图“Empty or invalid anti forgery header token.”错误提示 ABP Zero项目,登录时出现如图“Empty or in ...
- Python 解析构建数据大杂烩 -- csv、xml、json、excel
Python 可以通过各种库去解析我们常见的数据.其中 csv 文件以纯文本形式存储表格数据,以某字符作为分隔值,通常为逗号:xml 可拓展标记语言,很像超文本标记语言 Html ,但主要对文档和数据 ...