js學(xué)習(xí)總結(jié)_輪播圖之漸隱漸現(xiàn)版(實(shí)例講解)
更新時(shí)間：2017年07月17日 07:54:54 投稿：jingxian
下面小編就為大家?guī)?lái)一篇js學(xué)習(xí)總結(jié)_輪播圖之漸隱漸現(xiàn)版(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lá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
}
img{
display: block;
border:none;
}
.banner{
position:relative;
width:1000px;
height:300px;
margin:0 auto;
overflow:hidden;
}
.banner .bannerInner{
width:100%;
height:100%;
background:url("../img/default.gif") no-repeat center center #e1e1e1;
}
.banner .bannerInner div{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:0;
opacity:0;
filter:alpha(opacity=0);
}
.banner .bannerInner img{
display:none;
width:100%;
height:100%s;
}
.banner .bannerTip{
position:absolute;
height:18px;
overflow:hidden;
right:20px;
bottom:20px;
z-index:10;
}
.banner .bannerTip li{
float:left;
margin-left:10px;
width:18px;
height:18px;
background:lightblue;
cursor:pointer;
border-radius:50%;
}
.banner .bannerTip li.bg{
background:red;
}
.banner a{
display:none;
position:absolute;
top:50%;
z-index:20;
margin-top:-22.5px;
width:30px;
height:45px;
background:url("../img/pre.png");
opacity:0.5;
filter:alpha(opacity=50);
}
.banner a:hover{
opacity:1;
filter:alpha(opacity=100);
}
.banner a.bannerLeft{
left:20px;
background-position:0 0;
}
.banner a.bannerRight{
right:20px;
background-position:-50px 0;
}
</style>
</head>
<body>
<div class='banner' id='banner'>
<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>
var banner = document.getElementById('banner');
var bannerInner = utils.firstChild(banner),bannerTip = utils.children(banner,"ul")[0],bannerLink = utils.children(banner,'a'),bannerLeft = bannerLink[0],bannerRight = bannerLink[1];
var divList = bannerInner.getElementsByTagName('div');
var imgList = bannerInner.getElementsByTagName('img');
var oLis = bannerTip.getElementsByTagName('li');
//1、Ajax讀取數(shù)據(jù)
var jsonData = null;
~function(){
var xhr = new XMLHttpRequest;
xhr.open("get","json/banner.txt?_="+Math.random(),false);
xhr.onreadystatechange = function(){
if(xhr.readyState ===4 && /^2\d{2}$/.test(xhr.status)){
jsonData = utils.formatJSON(xhr.responseText)
}
}
xhr.send(null)
}()
//2、數(shù)據(jù)綁定
~function(){
var str = "",str2 = "";
if(jsonData){
for(var i = 0,len=jsonData.length;i<len;i++){
var curData = jsonData[i];
str+='<div><img src="" alt="" trueImg="'+curData['img']+'"></div>';
i===0?str2+="<li class='bg'></li>":str2+="<li></li>"
}
}
bannerInner.innerHTMl = str;
bannerTip.innerHTML = str2;
}()
//3、圖片的延遲加載
window.setTimeout(lazyImg,500)
function lazyImg(){
for(var i = 0,len = imgList.length;i<len;i++){
~function(i){
var curImg = imgList[i];
var oImg = new Image;
oImg.src = curImg.getAttribute('trueImg');
oImg.onload = function(){
curImg.src = this.src;
curImg.style.display = block;
//只對(duì)第一張?zhí)幚?
if(i===0){
var curDiv = curImg.parentNode;
curDiv.style.zIndex = 1;
myAnimate(curDiv,{opacity:1},200);
}
oImg = null;
}
}(i)
}
}
//4、自動(dòng)輪播
var interval = 3000,autoTimer = null,step = 0;
autoTimer = window.setInterval(autoMove,interval);
function autoMove(){
//當(dāng)已經(jīng)把最后一張展示完成后(step等于最后一張的索引),我們應(yīng)該展示第一張，我們讓step = -1,這樣再經(jīng)過(guò)一次累加，step就變?yōu)?，來(lái)展示第一張
if(step === jsonData.length-1){
step = -1
}
step++;
setBanner();
}
//實(shí)現(xiàn)輪播圖切換效果的代碼
function setBanner(){
//1、讓step索引對(duì)應(yīng)的那個(gè)DIV的zIndex的值為1，其他的zIndex為0
for(var i = 0,len = divList.length;i<len;i++){
var curDiv = divList[i];
if(i===step){
utils.css(curDiv,"zIndex",1)
//2、讓當(dāng)前的透明度從0變?yōu)?,當(dāng)動(dòng)畫結(jié)束，我們需要讓其他的div的透明度的值直接變?yōu)?
myAnimate(curDiv,{opacity:1},200,function(){
var curDivSib = utils.siblings(this);
for(var k = 0,len = curDivSib.length;k<len;k++){
utils.css(curDivSib[k],'opacity',0)
}
})
continue
}
utils.css(curDiv,"zIndex",0)
}
//實(shí)現(xiàn)焦點(diǎn)對(duì)其
for(i = 0,len = oLis.length;i<len;i++){
var curLi = oLis[i];
i === step?utils.addClass(curLi,"bg"):utils.removeClass(curLi,"bg");
}
}
//5、實(shí)現(xiàn)鼠標(biāo)懸停停止自動(dòng)輪播和離開在開啟自動(dòng)輪播
banner.onmouseover = function(){
window.clearInterval(autoTimer);
bannerLeft.style.display = bannerRight.style.display = "block"
}
banner.onmouseout = function(){
autoTimer = window.setInterval(autoMove,interval);
bannerLeft.style.display = bannerRight.style.display = "none"
}
//6、實(shí)現(xiàn)點(diǎn)擊焦點(diǎn)切換
~function(){
for(var i = 0,len = oLis.length;i<len;i++){
var curLi = oLis[i];
curLi.index = i;
curLi.onclick = function(){
step = this.index;
setBanner();
}
}
}()
//7、實(shí)現(xiàn)左右切換
bannerRight.onclick = autoMove;
bannerLeft.onclick = function(){
if(step === 0){
step = jsonData.length;
}
step--;
setBanner();
}
</script>
</body>
</html>
以上這篇js學(xué)習(xí)總結(jié)_輪播圖之漸隱漸現(xiàn)版(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
屏蔽網(wǎng)頁(yè)右鍵復(fù)制和ctrl+c復(fù)制的js代碼
解決的方法就是直接把網(wǎng)頁(yè)保存下來(lái)然后刪掉下面這段js代碼，然后就可以正常用右鍵菜單,也可以通過(guò)設(shè)置瀏覽器的安全級(jí)別到最高級(jí)別來(lái)解決問(wèn)題2013-01-01
這篇文章主要為大家詳細(xì)介紹了javascript canvas檢測(cè)小球碰撞，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
這篇文章主要介紹了JS如何判斷對(duì)象是否包含某個(gè)屬性,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
javascript屬性訪問(wèn)表達(dá)式用法分析
這篇文章主要介紹了javascript屬性訪問(wèn)表達(dá)式用法,實(shí)例分析了javascript屬性訪問(wèn)表達(dá)式的功能與使用方法,需要的朋友可以參考下2015-04-04
Js+XML 操作...2006-09-09
這篇文章主要介紹了JS去除iframe滾動(dòng)條的方法,涉及javascript操作iframe中屬性的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
JS實(shí)現(xiàn)頁(yè)面導(dǎo)航與內(nèi)容相互錨定實(shí)例詳解
這篇文章主要為大家介紹了JS實(shí)現(xiàn)頁(yè)面導(dǎo)航與內(nèi)容相互錨定實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
js網(wǎng)頁(yè)實(shí)時(shí)倒計(jì)時(shí)精確到秒級(jí)
網(wǎng)頁(yè)實(shí)時(shí)倒計(jì)時(shí)，精確到秒級(jí)，和天數(shù)倒計(jì)時(shí)原理一樣,需要的朋友可以參考下2014-02-02
JS/jQ實(shí)現(xiàn)免費(fèi)獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)效果
這篇文章主要介紹了JS/jQ實(shí)現(xiàn)免費(fèi)獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)效果的相關(guān)資料,通過(guò)定義兩個(gè)接口，發(fā)送驗(yàn)證請(qǐng)求和返回?cái)?shù)據(jù)驗(yàn)證手機(jī)號(hào)和驗(yàn)證是否一致，后臺(tái)根據(jù)接口去實(shí)現(xiàn)，需要的朋友可以參考下2016-06-06
js中字符串編碼函數(shù)escape()、encodeURI()、encodeURIComponent()區(qū)別詳解
JavaScript中有三個(gè)可以對(duì)字符串編碼的函數(shù)，分別是： escape,encodeURI,encodeURIComponent，相應(yīng)3個(gè)解碼函數(shù)：unescape,decodeURI,decodeURIComponent 。接下來(lái)通過(guò)本文給大家介紹三者之家的區(qū)別，感興趣的朋友一起學(xué)習(xí)吧2016-04-04