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
})
//通過(guò)jQuery選擇器或者篩選的方法獲取到的jQuery集合是不存在dom映射機(jī)制的，之前獲取到的dom集合，之后再頁(yè)面中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)前的請(qǐ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元素集合 直接寫(xiě)$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)輪播的開(kāi)始和暫停
$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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(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è)簡(jiǎn)單的輪播圖
- jQuery按需加載輪播圖(web前端性能優(yōu)化)
- jquery實(shí)現(xiàn)輪播圖效果
- 用jQuery實(shí)現(xiàn)優(yōu)酷首頁(yè)輪播圖
- jQuery無(wú)縫輪播圖代碼
- jquery 實(shí)現(xiàn)輪播圖詳解及實(shí)例代碼
- 原生Javascript和jQuery做輪播圖簡(jiǎn)單例子
- jQuery實(shí)現(xiàn)簡(jiǎn)潔的輪播圖效果實(shí)例
- jquery寫(xiě)出PC端輪播圖實(shí)例
相關(guān)文章
jQuery簡(jiǎn)單獲取DIV和A標(biāo)簽元素位置的方法
這篇文章主要介紹了jQuery簡(jiǎn)單獲取DIV和A標(biāo)簽元素位置的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面div及A標(biāo)簽元素相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
jquery 層次選擇器siblings與nextAll的區(qū)別介紹
jquery 層次選擇器包括siblings與nextAll，本文為大家介紹下具體的使用方法，想學(xué)習(xí)的朋也可以參考下，希望對(duì)大家有所幫助2013-08-08
jquery中的each()非常好用，用起來(lái)非常的爽，下面小編給大家介紹jquery中each()的用法詳細(xì)介紹，感興趣的朋友一起看看吧2016-05-05
jQuery.cookie.js實(shí)現(xiàn)記錄最近瀏覽過(guò)的商品功能示例
這篇文章主要介紹了jQuery.cookie.js實(shí)現(xiàn)記錄最近瀏覽過(guò)的商品功能,結(jié)合實(shí)例形式分析了基于jQuery.cookie.js插件創(chuàng)建cookie及保存瀏覽記錄的操作技巧,需要的朋友可以參考下2017-01-01
jQueryMobile之Helloworld與頁(yè)面切換的方法
這篇文章主要介紹了jQueryMobile之Helloworld與頁(yè)面切換的方法,實(shí)例分析了jQueryMobile的基礎(chǔ)用法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
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實(shí)現(xiàn)單擊按鈕遮罩彈出對(duì)話框效果(1)
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)單擊按鈕遮罩彈出對(duì)話框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
jquery實(shí)現(xiàn)簡(jiǎn)潔文件上傳表單樣式
這篇文章向大家推薦了一款基于jquery實(shí)現(xiàn)的簡(jiǎn)潔文件上傳表單樣式，實(shí)現(xiàn)效果大方精致，極力推薦給大家，希望大家可以喜歡。2015-11-11
基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼
基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼，需要的朋友可以參考下。2011-04-04