jquery版輪播圖效果和extend擴(kuò)展
更新時(shí)間：2017年07月18日 16:36:11 作者：diasa
這篇文章主要為大家詳細(xì)介紹了jquery版輪播圖效果，以及extend擴(kuò)展的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jquery版本輪播圖及extend擴(kuò)展的具體代碼，供大家參考，具體內(nèi)容如下
具體代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
-webkit-user-select:none;
}
ul,li{
list-style:none;
}
img{
display:block;
border:none;
}
a{
text-decoration: none;
}
.banner{
position:relative;
margin:10px auto;
width:1000px;
height:300px;
overflow:hidden;
}
.bannerInner{
width:100%;
height:100%;
background:url("../img/default.gif") no-repeat center center;
}
.bannerInner div{
position:absolute;
top:0;
left:0;
z-index:0;
width:100%;
height:100%;
opacity: 0;
filter:alpha(opacity=0);
}
.bannerInner div img{
display:none;
width:100%;
height:100%;
}
.banner .bannerTip{
position:absolute;
right:20px;
bottom:20px;
z-index:10;
overflow:hidden;
}
.banner .bannerTip li{
float:left;
margin-left:10px;
width:18px;
height:18px;
background:lightblue;
border-radius:50%;
cursor:pointer;
}
.banner .bannerTip li.bg{
background:orange;
}
.banner a{
display:none;
position:absolute;
top:50%;
margin-top:-22.5px;
z-index:10;
width:30px;
height:45px;
opacity: 0.5;
filter:alpha(opacity=50);
background-image:url('../img/pre.png');
}
.banner a.bannerLeft{
left:20px;
background-position:0 0;
}
.banner a.bannerRight{
right:20px;
background-position:-50px 0;
}
.banner a:hover{
opacity: 1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<div class='banner' id='bannerFir'>
<div class='bannerInner'>
<div><img src="" alt="" trueImg='img/banner1.jpg'></div>
<div><img src="" alt="" trueImg='img/banner2.jpg'></div>
<div><img src="" alt="" trueImg='img/banner3.jpg'></div>
<div><img src="" alt="" trueImg='img/banner4.jpg'></div>
</div>
<ul class='bannerTip'>
<li class='bg'></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class='bannerLeft'></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class='bannerRight'></a>
</div>
<script>
jQuery.fn.extend({
banner:myBanner
})
//通過jQuery選擇器或者篩選的方法獲取到的jQuery集合是不存在dom映射機(jī)制的，之前獲取到的dom集合，之后再頁面中HTML結(jié)構(gòu)改變了，集合中的內(nèi)容不會(huì)跟著自動(dòng)發(fā)生變化（JS獲取的元素集合有DOM映射的機(jī)制）
function myBanner(selector,ajaxURL,interval){
var $banner = $("#"+selector);
var $bannerInner = $banner.children(".bannerInner"),$divList = null,$imgList = null;
var $bannerTip = $banner.children(".bannerTip"),$oLis = null
var $bannerLeft = $banner.children(".bannerLeft"),$bannerRight = $banner.children(".bannerRight")
//1、Ajax讀取數(shù)據(jù)
var jsonData = null;
$.ajax({
url:ajaxURL+"?_="+Math.random(),
type:'get',
dataType::"json",
async:false,//當(dāng)前的請求是同步的
success:function(data){
jsonData = data;
}
})
//2、實(shí)現(xiàn)數(shù)據(jù)的綁定
function bindData(){
var str = "",str2 = "";
if(jsonData){
//原生的jsonData使用$.each()
$.each(jsonData,function(index,item){
str+='<div><img src="" alt="" trueImg="'+item["img"]+'"></div>';
index===0?str2+='<li class="bg"></li>':str2+='<li></li>'
})
$bannerInner.html(str);
$bannerTip.html(str2);
$divList = $bannerInner.children("div")
$imgList = $bannerInner.find('img')
$oLis = $bannerTip.children("li")
}
}
//3、實(shí)現(xiàn)圖片的延遲加載
window.setTimeout(lazyImg,500);
function lazyImg(){
//jquery元素集合 直接寫$imgList.each()
$imgList.each(function(index,item){
var _this = this;
var oImg = new Image;
oImg.src = $(this).attr("trueImg");//$(this)等價(jià)于$(item)
oImg.onload = function(){
$(_this).prop('src',this.src).css("display","block")//內(nèi)置屬性使用prop
}
})
$divList.eq(0).css("zIndex",1).animate({opacity:1},300);
}
//封裝一個(gè)輪播圖切換的效果
function changeBanner(){
var $curDiv = $divList.eq(step);
$curDiv.css("zIndex",1).siblings().css("zIndex",0);
$curDiv.animate({opacity:1},300,function(){
$(this).siblings().css("opacity",0)
})
$oLis.eq(step).addClass("bg").siblings().removeClass('bg')
}
//4、實(shí)現(xiàn)自動(dòng)輪播
interval = interval || 3000;
var step = 0,autoTimer = null;
autoTimer = window.setInterval(autoMove,interval)
function autoMove(){
if(step === jsonData.length-1){
step = -1;
}
step++;
changeBanner();
}
//5、控制左右按鈕的顯示隱藏和自動(dòng)輪播的開始和暫停
$banner.on('mouseover',function(){
window.clearInterval(autoTimer);
$bannerLeft.css("display","block")
$bannerRight.css("display","block")
}).on('mouseout',function(){
autoTimer = window.setInterval(autoMove,interval);
$bannerLeft.css("display","none")
$bannerRight.css("display","none")
})
//6、實(shí)現(xiàn)焦點(diǎn)切換
$oLis.on('click',function(){
step = $(this).index();
changeBanner();
})
//7、實(shí)現(xiàn)左右切換
$bannerRight.on('click',autoMove);
$bannerLeft.on('click',function(){
if(step===0){
step = jsonData.length;
}
step--;
changeBanner();
});
}
//外部使用
$().banner("bannerFir","json/banner.txt",1000)
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jquery實(shí)現(xiàn)左右輪播圖效果
- JQuery和html+css實(shí)現(xiàn)帶小圓點(diǎn)和左右按鈕的輪播圖實(shí)例
- jQuery制作全屏寬度固定高度輪播圖(實(shí)例講解)
- jquery實(shí)現(xiàn)左右滑動(dòng)式輪播圖
- jQuery實(shí)現(xiàn)一個(gè)簡單的輪播圖
- jQuery按需加載輪播圖(web前端性能優(yōu)化)
- jquery實(shí)現(xiàn)輪播圖效果
- 用jQuery實(shí)現(xiàn)優(yōu)酷首頁輪播圖
- jQuery無縫輪播圖代碼
- jquery 實(shí)現(xiàn)輪播圖詳解及實(shí)例代碼
- 原生Javascript和jQuery做輪播圖簡單例子
- jQuery實(shí)現(xiàn)簡潔的輪播圖效果實(shí)例
- jquery寫出PC端輪播圖實(shí)例
相關(guān)文章
jQuery Validate 相關(guān)參數(shù)及常用的自定義驗(yàn)證規(guī)則
這篇文章主要介紹了jQuery Validate 相關(guān)參數(shù)及常用的自定義驗(yàn)證規(guī)則,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
使用jquery實(shí)現(xiàn)鼠標(biāo)滑過彈出更多相關(guān)信息層附源碼下載
當(dāng)要在有限的空間展示更多的信息時(shí)，我們經(jīng)常會(huì)采取鼠標(biāo)滑過彈出更多相關(guān)信息層，提高互動(dòng)性。尤其可以應(yīng)用在公司照片墻、招聘網(wǎng)站求職者信息展示等等場景，本文給大家分享使用jquery實(shí)現(xiàn)鼠標(biāo)滑過彈出更多相關(guān)信息層附源碼下載，感興趣的朋友參考下2015-11-11
jQuery用FormData實(shí)現(xiàn)文件上傳的方法
眾所周知文件上傳是Web開發(fā)中的重要話題，最直接和簡單的方式是通過表單直接提交文件。 下面這篇文章小編就來和大家分享jQuery利用FormData實(shí)現(xiàn)文件上傳的方法，文中介紹的方法簡單易懂，相信對大家的理解和學(xué)習(xí)很有幫助，有需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
本文給大家匯總介紹了jQuery的四種選擇器的使用方法以及示例，非常的簡單實(shí)用，希望對大家學(xué)習(xí)jquery能夠有所幫助。2016-06-06
一款接近完美的jquery浮動(dòng)層，會(huì)隨著滾動(dòng)條而自動(dòng)滾動(dòng)，始終維持在頁面的中間部分，利用浮動(dòng)層你可以制作一個(gè)QQ在線客服。2011-08-08
javascript loadScript異步加載腳本示例講解
本文講解了javascript異步加載腳本并觸發(fā)回調(diào)函數(shù)的方法，在加載遠(yuǎn)程數(shù)據(jù)的時(shí)候可以用到，下面提供代碼示例和源碼2013-11-11
本文詳細(xì)介紹下使用JQuery實(shí)現(xiàn)圖片的展開和伸縮，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
jQuery Ajax傳值到Servlet出現(xiàn)亂碼問題的解決方法
jquery ajax 傳值給Servlet,在Servlet里Get接受參數(shù)亂碼,怎么解決呢？下面小編給大家?guī)砹薺query ajax傳值到Servlet出現(xiàn)亂碼問題的解決方法，一起看看吧2016-10-10
本篇文章主要是對jquery 刪除字符串最后一個(gè)字符的方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
jquery實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效，功能實(shí)現(xiàn)非常簡單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08