具體代碼如下: ...
具體代碼如下:
<!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:;" class='bannerLeft'></a>
<a href="javascript:;" class='bannerRight'></a>
</div>
<script>
jQuery.fn.extend({
banner:myBanner
})
//通過jQuery選擇器或者篩選的方法獲取到的jQuery集合是不存在dom映射機制的，之前獲取到的dom集合，之後再頁面中HTML結構改變了，集合中的內容不會跟著自動發生變化（JS獲取的元素集合有DOM映射的機制）
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讀取數據
var jsonData = null;
$.ajax({
url:ajaxURL+"?_="+Math.random(),
type:'get',
dataType::"json",
async:false,//當前的請求是同步的
success:function(data){
jsonData = data;
}
})
//2、實現數據的綁定
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、實現圖片的延遲載入
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)等價於$(item)
oImg.onload = function(){
$(_this).prop('src',this.src).css("display","block")//內置屬性使用prop
}
})
$divList.eq(0).css("zIndex",1).animate({opacity:1},300);
}
//封裝一個輪播圖切換的效果
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、實現自動輪播
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、控制左右按鈕的顯示隱藏和自動輪播的開始和暫停
$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、實現焦點切換
$oLis.on('click',function(){
step = $(this).index();
changeBanner();
})
//7、實現左右切換
$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>
