本文實(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ì)有所幫助。
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2024 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
