本文實(shí)例為大家分享了js圖片輪播的具體代碼,供大家參考,具體內(nèi)容如下
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比薛城網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式薛城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋薛城地區(qū)。費(fèi)用合理售后完善,十余年實(shí)體公司更值得信賴。
主要html代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/css.css"> <script type="text/javascript" src="js/animate.js"></script> </head> <body> <div class="w-wrap" id="js_wrap"> <div class="wrap-slide" id="wrap_slide"> <ul> <li><a href="#"><img src="images/slidepic1.jpg" alt=""></a></li> <li><a href="#"><img src="images/slidepic2.jpg" alt=""></a></li> <li><a href="#"><img src="images/slidepic3.jpg" alt=""></a></li> <li><a href="#"><img src="images/slidepic4.jpg" alt=""></a></li> <li><a href="#"><img src="images/slidepic5.jpg" alt=""></a></li> <!-- <li><a href="#"><img src="images/slidepic6.jpg" alt=""></a></li> --> </ul> <div class="wrap-slide-arrow" id="wrap_slide_arrow"> <a href="javascript:;" class="prev"></a> <a href="javascript:;" class="next"></a> </div> </div> </div> <script> function $(id){ return document.getElementById(id);} var js_wrap = $("js_wrap"); var wrap_slide = $("wrap_slide"); var wrap_slide_arrow = $("wrap_slide_arrow"); var lis = wrap_slide.children[0].children; var json = [ { //1 width: 400, top: 20, left: 50, opacity: 20, z: 2 }, { //2 width: 600, top: 70, left: 0, opacity: 80, z: 3 }, { //3 width: 800, top: 100, left: 200, opacity: 100, z: 4 }, { //4 width: 600, top: 70, left: 600, opacity: 80, z: 3 }, { //5 width: 400, top: 20, left: 750, opacity: 20, z: 2 }/*, { //6 width: 300, top: 10, left: 400, opacity: 10, z: 1 }*/ ] change(); //將各個(gè)圖片按照json鋪開(kāi)層次 var jieliu = true; //兩個(gè)按鈕點(diǎn)擊事件 var as = wrap_slide_arrow.children; for(var k in as){ as[k].onclick = function(){ if(this.className == "prev"){ /*alert("左側(cè)按鈕");*/ //所有圖片逆時(shí)針旋轉(zhuǎn),相當(dāng)于圖片不動(dòng),json的第一個(gè)刪除并插到最后一個(gè) if(jieliu == true){ change(false); jieliu = false; } }else if(this.className == "next"){ /*alert("右側(cè)按鈕");*/ //所有圖片順時(shí)針旋轉(zhuǎn),相當(dāng)于圖片不動(dòng),json的最后一個(gè)刪除并插到第一個(gè) if(jieliu == true){ change(true); jieliu = false; } } } } function change(flag){ if(flag){ //所有圖片順時(shí)針旋轉(zhuǎn),相當(dāng)于圖片不動(dòng),json的最后一個(gè)刪除并插到第一個(gè) json.unshift(json.pop()); }else{ //所有圖片逆時(shí)針旋轉(zhuǎn),相當(dāng)于圖片不動(dòng),json的第一個(gè)刪除并插到最后一個(gè) json.push(json.shift()); } for(var k in json){ animate(lis[k],{ width: json[k].width, top: json[k].top, left: json[k].left, opacity: json[k].opacity, zIndex: json[k].z },function(){ jieliu = true;}); //當(dāng)動(dòng)畫執(zhí)行完,執(zhí)行回調(diào)函數(shù),此時(shí)置節(jié)流為true } } var timer = null; timer = setInterval(autoPlay,2000); function autoPlay(){ if(jieliu == true){ change(true); jieliu = false; } } js_wrap.onmouseover = function(){ clearInterval(timer); animate(wrap_slide_arrow,{opacity:100}); } js_wrap.onmouseout = function(){ clearInterval(timer); timer = setInterval(autoPlay,2000); animate(wrap_slide_arrow,{opacity:0}); } /*js_wrap.onmouseover = function(){ animate(wrap_slide_arrow,{opacity:100}); } js_wrap.onmouseout = function(){ animate(wrap_slide_arrow,{opacity:0}); }*/ </script> </body> </html>
主要css代碼:
/*初始化 reset*/ blockquote,body,button,dd,dl,dt,fieldset,form,h2,h3,h4,h5,h6,h7,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0} body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微軟雅黑", SimSun, "宋體", sans-serif;color: #666;} ol,ul{list-style:none} a{text-decoration:none} fieldset,img{border:0;vertical-align:top;} a,input,button,select,textarea{outline:none;} a,button{cursor:pointer;} .w-wrap{ width: 1200px; margin: 100px auto; } .wrap-slide{ position: relative; } .wrap-slide li{ position: absolute; left: 200px; top: 0; } .wrap-slide li img{ width: 100%; } .wrap-slide-arrow{ opacity: 0; position: relative; } .prev,.next{ width: 76px; height: 112px; position: absolute; top: 50%; margin-top: -56px; background: url(../images/prev.png) no-repeat; } .next{ right: 0; background: url(../images/next.png) no-repeat; }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
當(dāng)前題目:JS實(shí)現(xiàn)旋轉(zhuǎn)木馬式圖片輪播效果
標(biāo)題網(wǎng)址:http://muchs.cn/article32/pdjspc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)建站、外貿(mào)網(wǎng)站建設(shè)、面包屑導(dǎo)航、Google、靜態(tài)網(wǎng)站、虛擬主機(jī)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)