【无缝】JQuery前端开发轮播代码

前端开发轮播代码|java前端开发jquery|免费前端开发工具

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<title>网页轮播图前端开发工程师水平</title>
<script src=”http://www.xipwang.cn/js/jquery.min.js” type=”text/javascript” charset=”utf-8″></script>
</head>
<style type=”text/css”>
*{
margin:0;
padding:0
}
#container{
position:relative;
overflow:hidden;
margin:0auto;
width:100%
}
#container.main{
position:absolute;
}
#container.main.section{
float:left;
}
#container.main.sectionimg{
display:block;
}
#container.pegelist{
position:absolute;
bottom:10px;
width:100%;
text-align:center;
}
#container.pegelistspan{
width:12px;
height:12px;
display:inline-block;
margin:10px;
background:#333;
border-radius:50%;
cursor:pointer;
}
#container.pegelist.active{
border:2pxsolid#fff;
background:none;
width:10px;
height:10px;
}
#container.css-btn{
text-align:center;
line-height:40px;
width:40px;
background:#333;
height:40px;
display:block;
position:absolute;
top:45%;
z-index:111;
opacity:0.8;
color:#fff;
cursor:pointer;
display:none;
}
#container.css-btn:hover{
opacity:0.5
}
#container.prev-btn{
left:10%;
}
#container.next-btn{
right:10%
}
.progressBar{
position:absolute;
width:0;
height:5px;
;
bottom:0;
background:#f00
}
</style>
<body>
<divid=”container” data-Seamless>
<divclass=”main”>
<divclass=”section”>
<imgsrc=”http://www.xipwang.cn/wp-content/uploads/2016/09/b4.jpg” alt=”” width=”100%”>
</div>
<divclass=”section”>
<imgsrc=”http://www.xipwang.cn/wp-content/uploads/2016/09/b3.jpg” alt=”” width=”100%”>
</div>
<divclass=”section”>
<imgsrc=”http://www.xipwang.cn/wp-content/uploads/2016/09/b2.jpg” alt=”” width=”100%”>
</div>
<divclass=”section”>
<imgsrc=”http://www.xipwang.cn/wp-content/uploads/2016/09/b1.jpg” alt=”” width=”100%”>
</div>
</div>
</div>
<script type=”text/javascript”>
;
(function ($, wd, dc, undefined) {
varSeamless= (function(){
functionSeamless(element,options){
this.element=element;
this.settings=$.extend(true,$.fn.Seamless.defaults,options||{});
this.init();
};
Seamless.prototype ={
init:function(){
$this=this;
$this.show=null;
$this.index =0;
$this.flag=true;
$this.dom=$this.settings.domEle;
$this.setsize=$this.settings.setsize==false?true:false
$this.width;//轮播宽度
$this.height;//轮播高度
$this.main=$this.element.find($this.dom.main);
$this.setions=$this.element.find($this.dom.sections);
//是否设置轮播大小
this._setSize();
//初始化轮播
this.setSeamcss();
//上一页切换
this._prev();
//下一页切换
this._next();
//是否自动轮播
this.isAuto();
},
_setSize:function(){//是否设置轮播大小
$this=this
if ($this.setsize) {
$this.width =$this.setions.width();
$this.height =$this.setions.height();
$this.element.width($this.width);
$this.element.height($this.height);
$this.setions.width($this.width);
}else{
if ($this.settings.width >$(window).width()) {
$this.element.wrap(‘<div class=”Seamless-wrapper”></div>’);
$this.element.parent().css(“overflow”,”hidden”);
$this.element.css({
left: ‘50%’,
marginLeft: -($this.settings.width / 2),
});
$this.width =$this.settings.width;
$this.height =$this.settings.height;
}else{
$this.width =$this.settings.width;
$this.height =$this.settings.height;
}
$this.element.width($this.width);
$this.element.height($this.height);
$this.setions.width($this.width);
};
},
getCont:function(){//获取轮播长度
return$this.setions.length;
},
_prev:function(){//上一张
var$this=this
this.element.find($this.dom.prev).on(“click”,function(){
if ($this.flag) {
$this.flag=false;
$this.index–;
$this._moveSeamless();
};
});
},
_next:function(){// 下一张
var$this=this
this.element.find($this.dom.next).on(“click”,function(){
if ($this.flag) {
$this.index++;
$this.flag=false;
$this._moveSeamless();
};
});
},
isAuto:function(){//自动轮播
var$this=this
if ($this.settings.isAuto) {
$this.playGo();
$this.main.parent().hover(function(){
$this.stopPaly();
$this.element.find($this.dom.next).fadeIn();
$this.element.find($this.dom.prev).fadeIn();
},function(){
$this.playGo();
$this.element.find($this.dom.next).fadeOut();
$this.element.find($this.dom.prev).fadeOut();
})
};
},
playGo:function(){//开始轮播
$this.show=setInterval(function(){
$this.index++;
$this._progressBar(function(){
$this._moveSeamless();
});
},$this.settings.time);
},
stopPaly:function(){// 暂停轮播
var$this=this
clearInterval($this.show);
},
createDom:function(){//创建 切换按钮
$this=this;
varpagelist=$this.dom.pegebox.substring(1)
varswitchbox='<div class></div>’
varswitchBtn='<span class=”prev-btn css-btn”><</span>’+
‘<span class=”next-btn css-btn”>></span>’
varhtmlbtn=”<div class=”+pagelist+”>”
for (vari=0;i<this.getCont();i++) {
htmlbtn+='<span></span>’
};
this.element.append(‘<div class=”progressBar”></div>’)
this.element.append(htmlbtn);
this.element.append(switchBtn);
if (this.element.width() >1366) {
this.element.find($this.dom.next).css({
right: 15 + “%”
})
this.element.find($this.dom.prev).css({
left: 15 + “%”
})
}
},
pegeCurrent:function(){//当前页数
$this=this
$this.element.find($this.dom.pegebox).children().on(“click”,function(){
$this.index =$(this).index();
$this._moveSeamless($this.index);
$this.element.find($this.dom.pegebox).children().eq($(this).index())
.addClass($this.dom.active).siblings().removeClass($this.dom
.active);
});
},
setSeamcss:function(){
$this=this;
$this.main.prepend($this.setions.last().clone());
$this.main.append($this.setions.first().clone());
$this.size =$this.getCont();
$this.main.width(($this.size +2) *$this.width);
$this.main.css(“left”,-$this.width);
this.createDom();
this.pegeCurrent();
$this.element.find($this.dom.pegebox).children().eq($this.index).addClass(
$this.dom.active);
},
_moveSeamless:function(){//滚动方法
$this=this;
$this.main.stop().animate({
left: “-” + ($this.index + 1) * $this.width
},$this.settings.speedMove,function(){
$this.flag=true;
varpagelist=$this.element.find($this.dom.pegebox).children()
pagelist.removeClass($this.dom.active)
pagelist.eq($this.index).addClass($this.dom.active).siblings()
});
if ($this.index ==$this.getCont()) {
$this.index =0;
$this.main.animate({
left: “-” + $this.width
},0);
};
if ($this.index <0) {
$this.index =$this.getCont() -1
$this.main.animate({
left: “-” + ($this.size) * $this.width
},0)
};
},
_progressBar:function(clallback){//进度条
if (!$this.settings.progressBar) {
$this.element.find($this.dom.progressBar).css(“background”,”none”)
}
this.element.find($this.dom.progressBar).animate({
width: 100 + “%”
},$this.settings.time/2,function(){
$(this).width(0);
if (typeofclallback==”function”) {
clallback();
};
})
},
};
returnSeamless;
})();
$.fn.Seamless=function(options){
returnthis.each(function(){
var$this=$(this);
instance=$this.data(“Seamless”);
if (!instance) {
$this.data(“Seamless”, (instance=newSeamless($this,options)));// 传递jquery对象
};
if ($.type(options) ===”string”) returninstance[options]();
});
};
$.fn.Seamless.defaults={
domEle: {
main: “.main”,
sections: “.section”,
active: “active”,
prev: “.prev-btn”,
next: “.next-btn”,
pegebox: “.pegelist”,
progressBar: “.progressBar”
},
isAuto: true, //是否自动播放
time: 3000, //轮播间隔时间
setsize: false, //默认false 取图片大小为轮播的尺寸
width: 1920, //自定义轮播宽度
height: 480, //自定义轮播高度
speedMove: 800, //轮播移动的速度
progressBar: false, //是否显示轮播进度条
};
})(jquery, window, document);
$(function(){
$(“#container”).Seamless({
progressBar: true, //是否显示轮播进度条
isAuto: true, //是否自动播放
time: 2500, //轮播间隔时间
setsize: true, //默认false 取图片大小为轮播的尺寸
width: 1440, //自定义轮播宽度
height: 450, //自定义轮播高度
speedMove: 800, //轮播移动的速度
});
})
</script>
</body>
</html>
jquery 游戏web前端开发工具|jquery前端开发工程师 会的|jquery 视觉设计 前端开发
» 本文来自:前端开发者 » 《【无缝】JQuery前端开发轮播代码》
» 本文链接地址:https://www.rokub.com/3677.html
» 您也可以订阅本站:https://www.rokub.com
赞(1)
64K

评论 抢沙发

评论前必须登录!