jQuery實(shí)現(xiàn)的網(wǎng)站banner圖片無(wú)縫輪播效果完整實(shí)例
更新時(shí)間：2019年01月28日 09:50:42 作者：熊哥club
這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)站banner圖片無(wú)縫輪播效果,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合時(shí)間函數(shù)實(shí)現(xiàn)圖片定時(shí)輪播切換相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)的網(wǎng)站banner圖片無(wú)縫輪播效果。分享給大家供大家參考，具體如下：
<!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=" rel="external nofollow" 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,//是否往下啟動(dòng)按鈕
prevBtn:false,//是否往上啟動(dòng)按鈕
autoPlay:false,//是否啟動(dòng)自動(dòng)播放
times:3000,//自動(dòng)輪播的時(shí)間間隔,
speed:600,//點(diǎn)擊按鈕是切換的速度
circle:false,//是否啟動(dòng)小圓點(diǎn)
circleAlign:"center",//小圓點(diǎn)的對(duì)其方式
circleClick:false//小圓點(diǎn)是否可以點(diǎn)擊
}
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})
// 是否啟動(dòng)自動(dòng)輪播
if(self.options.autoPlay){
self.plays();
}
// 是否啟動(dòng)按鈕
if(self.options.nextBtn){
self.NextBtn();
}
// 是否啟動(dòng)按鈕
if(self.options.prevBtn){
self.prevBtn();
}
// 是否啟動(dòng)小圓點(diǎn)
if(self.options.circle){
self.circle()
}
if(self.options.circleClick){
self.clickCircle();
}
}
// // 鼠標(biāo)移入時(shí)
self.on('mouseenter',function(){
self.stops();
})
// 鼠標(biāo)移出時(shí)
self.on('mouseleave',function(){
self.plays(1);
})
// 開(kāi)始計(jì)時(shí)器，自動(dòng)輪播
this.plays=function(){
var self=this;
// self.stops();
console.log('play')
this.time=setInterval(function(){
self.go(-self.width)
},self.options.times);
}
// 停止計(jì)時(shí)器
this.stops=function(){
console.log('stop');
clearInterval(self.time)
}
// 手動(dòng)創(chuàng)建按鈕元素
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);
})
}
// 手動(dòng)創(chuàng)建按鈕元素
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);
})
}
// 手動(dòng)創(chuàng)建小圓點(diǎn)
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:;" rel="external nofollow" ></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);
}
//小圓點(diǎn)指定當(dāng)前項(xiàng)
this.playCircle=function(num){
$('#circle-wrap').find('.dot').eq(num).addClass('on').siblings().removeClass('on');
}
// 點(diǎn)擊小圓點(diǎn)
this.clickCircle=function(){
var self=this;
$('#circle-wrap').find('.dot').on('click',function(){
self.num=$(this).index()+1;
self.circlePlay()
})
}
// 點(diǎn)擊小圓點(diǎn)，圖片切換
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);
}
// 點(diǎn)擊按鈕，進(jìn)行輪播,以及自動(dòng)輪播
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>
運(yùn)行效果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery圖片操作技巧大全》、《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery.parseJSON()函數(shù)詳解
- jQuery each和js forEach用法比較
- 詳解JavaScript原生封裝ajax請(qǐng)求和Jquery中的ajax請(qǐng)求
- Jquery實(shí)現(xiàn)無(wú)縫向上循環(huán)滾動(dòng)列表的特效
- jquery無(wú)縫圖片輪播組件封裝
- 在Vue項(xiàng)目中引入JQuery-ui插件的講解
- 在vue項(xiàng)目中使用Jquery-contextmenu插件的步驟講解
- Node.js Event Loop各階段講解
- 零基礎(chǔ)之Node.js搭建API服務(wù)器的詳解
- Jquery的autocomplete插件用法及參數(shù)講解
相關(guān)文章
jquery基礎(chǔ)知識(shí)第一講之認(rèn)識(shí)jquery
jquery基礎(chǔ)知識(shí)第一講之初次見(jiàn)面，對(duì)jquery有一個(gè)初步認(rèn)識(shí)，為之后的學(xué)習(xí)打下基礎(chǔ)，感興趣的小伙伴們可以參考一下2016-03-03
下面小編就為大家?guī)?lái)一篇關(guān)于Jquery中的事件綁定總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
jquery使用echarts實(shí)現(xiàn)有向圖可視化功能示例
這篇文章主要介紹了jquery使用echarts實(shí)現(xiàn)有向圖可視化功能,結(jié)合完整實(shí)例形式分析了jquery的echarts.js插件實(shí)現(xiàn)有向圖可視化相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-11-11
jQuery+PHP+MySQL實(shí)現(xiàn)無(wú)限級(jí)聯(lián)下拉框效果
這篇文章主要介紹了jQuery+PHP+MySQL實(shí)現(xiàn)無(wú)限級(jí)聯(lián)效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了jQuery中:file選擇器用法,實(shí)例分析了:file選擇器的功能、定義及選取類型為file的<input>元素的使用技巧,需要的朋友可以參考下2015-01-01
JQuery是一個(gè)很優(yōu)秀的JS框架，我們?cè)谧鯽jax項(xiàng)目開(kāi)發(fā)是避免不了使用該框架來(lái)實(shí)現(xiàn)一些ajax的效果，其中該框架中有一個(gè)load()方法，該方法是用來(lái)在頁(yè)面不刷新的情況下動(dòng)態(tài)裝載服務(wù)器端的文件。2009-09-09
jquery實(shí)現(xiàn)全選、不選、反選的兩種方法
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)全選、不選、反選的兩種方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
jQuery實(shí)現(xiàn)選項(xiàng)聯(lián)動(dòng)輪播效果【附實(shí)例】
下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)選項(xiàng)聯(lián)動(dòng)輪播效果【附實(shí)例】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-04-04
jQuery AJAX 調(diào)用WebService實(shí)現(xiàn)代碼
用jQuery調(diào)用其他項(xiàng)目的WebService的代碼，需要的朋友可以參考下。2010-03-03
在ASP.net中母版頁(yè)加載js文件，頁(yè)面中調(diào)用時(shí)出錯(cuò)、tablesorter加載失敗等等,需要的朋友可以參考下2014-02-02