网站banner无缝轮播
网站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: 0;
margin: 0;
}
ul,ul li{
list-style: none;
margin: 0;
padding: 0;
}
.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: 0;
transition: opacity 0.8s ease;
}
#banner #prevBtn{
left:0;
}
#banner #nextBtn{
right:0;
}
#banner:hover #prevBtn,#banner:hover #nextBtn{
opacity: 1;
}
.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无缝轮播【小封装】
转载:http://www.qdfuns.com/notes/23446/d1691a1edf5685396813cc85ae6ab10f.html 一直在重复的写banner,写了了好几个,然后每次 ...
- 【实践】纯jquery实现图片滑动无缝轮播，带左右按钮及控制按钮
在此随笔之前,博主已经做过一次图片滑动轮播,如过你也有看过就会知道里面的效果在自动轮播的时候有一个不太美观的效果,就是当最后一张图片滑动切换到第一张图片的时候会看到一个快速向左滑动的效果,这是很不美观 ...
- 原生js实现无缝轮播
原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...
- jQuery图片无缝轮播
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果
1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...
- jQuery插件slides实现无缝轮播图特效
初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- JQuery制作基础的无缝轮播与左右点击效果
在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...
随机推荐
- Chrome开发者工具不完全指南（一、基础功能篇）
就算你不是一名前端开发工程师,相信你也不会对Chrome浏览器感到陌生.根据最新的一份(2015/06)的浏览器市场占有率报告,Chrome近乎占有浏览器天下的半壁江山.简单.快捷使它成为了新时代人们 ...
- salesforce 零基础学习（四十五）Approval Lock & UnLock相关注意事项
我们都知道,当一条记录进入审批流程以后会自动加锁,apex提供Approval类的lock和unlock方法可以让我们使用代码对记录进行加锁和解锁. 项目中遇到一个需求,需要当某种情况下对记录进行先解 ...
- javascript的快速排序法
在排序方式中,快速是比较普遍使用的,因为其速度快. 因为其是不断的递归,而且是根据基准点的左右两边开始递归,直到数组只有一个值的时候才返回. 这个基准点是自己定的. 一般取中间,比较好理解. < ...
- WPF如何仿制QQ2013登录窗口的关闭效果
昨天,有位朋友问我,WPF能做出像QQ2013窗口在关闭时那个貌似透明过渡的动画吗?我就歪着脸跟他说:"只有你想不到的,没有WPF做不到的". 他又接着说:"我知道肯定会 ...
- android知识点随笔
android project中Manifest.xml中的<uses-sdk>标签元素决定的. 此标签包含如下3个属性: android:minSdkVersion —— 此属性决定你的 ...
- 爆一个VS2015 Update1更新带来的编译BUG【已有解决方案】
一个编译的BUG,在原生的VS2015中没有问题,但更新至VS2015 Update1之后就有了,大概是Update1用了新的编译器,害得我好苦.经测试,VS2013 Update5中也存在这个问题, ...
- SubSonic3.0.0.4.3源码包与调用Dll
版本修改历史 3.0.0.4.3版修复了下面问题: 修正多表关联查询时,使用左关联和右关联出错问题修正DbDataProvider.cs类的ToEnumerable函数打开数据库链接后没有关闭的问题添 ...
- (转)对Lucene PhraseQuery的slop的理解
所谓PhraseQuery,就是通过短语来检索,比如我想查"big car"这个短语,那么如果待匹配的document的指定项里包含了"big car"这个短语 ...
- Redis入门
一.安装 目前,官方最新稳定版本为3.0.7 # wget http://download.redis.io/releases/redis-3.0.7.tar.gz # cd /usr/local/ ...
- Hammer.js分析（一）——基础结构
从github上面将源码下载下来,会发现有个src文件夹.当前版本是2.0.6. 总的结构如下: 一.常量 这里将常量全部列在一起是可以在对比源码的时候,更方便的查看相应内容. var VENDOR_ ...