首頁 > 開發者 > JavaScript
原生js和jQuery實現淡入淡出輪播效果，
本文執行個體為大家介紹了基於jQuery實現淡入淡出輪播效果的關鍵代碼，分享給大家供大家參考，具體內容如下：
基本原理：將所有圖片絕對位置在同一位置，透明度設為0，然後通過jQuery的淡入淡出實現圖片的轉場效果。
html代碼：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>一個輪播</title><style> #scrollPlay{ width: 730px; height: 336px; /*overflow: hidden;*/ } #pre{ position: absolute; margin-top: 150px; width:30px; height: 30px; background: #000; color:#fff; opacity: 0.7; text-align: center; line-height: 30px; font-size: 20px; z-index: 10; } img{ opacity: 0; position: absolute; } #next{ position: absolute; margin-left:700px; margin-top: 150px; width:30px; height: 30px; background: #000; color:#fff; opacity: 0.7; text-align: center; line-height: 30px; font-size: 20px; z-index: 10; } span{ display: block; width: 15px; height: 15px; float: left; border: 1px solid #fff; } #buttons{ position: absolute; background: #000; margin-top: 300px; margin-left: 300px; z-index: 10; } .onactive{ background: green; }</style><script src='jquery.js'></script><script src='index.js'></script></head><body> <div id='scrollPlay'> <div id='buttons'> <span index = 0 class='onactive'></span> <span index = 1></span> <span index = 2></span> <span index = 3></span> <span index = 4></span> </div> <div id='pre'><</div> <div id='next'>></div> <img src='images/1.jpg' alt='pics' style='opacity:1'> <img src='images/2.jpg' alt='pics'> <img src='images/3.jpg' alt='pics'> <img src='images/4.jpg' alt='pics'> <img src='images/5.jpg' alt='pics'> </div></body> </html>
JS：
$(function(){ var index = 0; var flag = false; //用於判斷是否處於動畫狀態 //切換函數 function move(offset){ flag=true; //console.log(offset) $('img').eq(index).fadeOut('slow',function(){ if(offset>0){ if(index ==4){ index=0; }else{ //console.log(index); index=index+offset; //console.log(index); } } if(offset<0){ if(index==0){ index=4; }else{ index=index+offset } } $('img').eq(index).fadeTo('slow',1) //使用fadeIn不成功:$('img').eq(index).fadeIn('slow') showButton(); flag=false; }); } //點擊切換上一張 $('#pre').click(function(){ if(flag==false){ move(-1) } }) //點擊切換下一張 $('#next').click(function(){ if(flag==false){ move(1) } }) //點擊按鈕直接切換 $('span').click(function(){ if(flag==false){ var i= $(this).attr('index') //console.log(i) //console.log(index) //console.log(i-index) move(i-index) showButton(); } }) //高亮顯示按鈕 function showButton(){ if($('span').hasClass('onactive')){ $('span').removeClass(); } $('span').eq(index).addClass('onactive') } //自動播放 var timer; function go(){ timer = setInterval(function(){ $('#next').trigger('click'); },3000) } //滑鼠移至上方，清除自動播放 $('#scrollPlay').mouseover(function(){ clearInterval(timer) }) //滑鼠移開，開始自動播放 $('#scrollPlay').mouseout(function(){ go(); }) go(); })
文章最後為大家提了一個小問題，希望大家能給出解決方案。
使用fadeIn淡入時卻無效果，最後只能使用fadeTo實現，這是什麼原因？
為大家分享一個小例子：原生JS實現淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常項目中經常用到,可惜原生JS沒有類似的方法,而有時小的頁面並不值得引入一個jQuery庫,所以就自己寫了一個,已封裝, 有用得著的朋友, 可以直接使用. 代碼中另附有一個設定元素透明度的方法, 是按IE規則(0~100)設定, 若改成標準設定方法(0.00~1.00), 下面使用時請考慮浮點精確表達差值.
參數說明:
fadeIn()與fadeOut()均有三個參數,第一個是事件, 必填; 第二個是淡入淡出速度, 正整數, 大小自己權衡, 選擇性參數; 第三個, 是指定淡入淡出到的透明度值(類似於jQuery中的fadeTo()), 0~100的正整數值, 也是選擇性參數.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>原生JS實現淡入淡出效果</title> <style> /*demo css*/ #demo div.box {float:left;width:31%;margin:0 1%} #demo div.box h2{margin-bottom:10px} #demo div.box h2 input{padding:5px 8px;font-size:14px;font-weight:bolder} #demo div.box div{text-indent:10px; line-height:22px;border:2px solid #555;padding:0.5em;overflow:hidden} </style> <script> window.onload = function(){ //底層共用 var iBase = { Id: function(name){ return document.getElementById(name); }, //設定元素透明度,透明度值按IE規則計,即0~100 SetOpacity: function(ev, v){ ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100; } } //淡入效果(含淡入到指定透明度) function fadeIn(elem, speed, opacity){ /* * 參數說明 * elem==>需要淡入的元素 * speed==>淡入速度,正整數(可選) * opacity==>淡入到指定的透明度,0~100(可選) */ speedspeed = speed || 20; opacityopacity = opacity || 100; //顯示元素,並將元素值為0透明度(不可見) elem.style.display = 'block'; iBase.SetOpacity(elem, 0); //初始化透明度變化值為0 var val = 0; //迴圈將透明值以5遞增,即淡入效果 (function(){ iBase.SetOpacity(elem, val); val += 5; if (val <= opacity) { setTimeout(arguments.callee, speed) } })(); } //淡出效果(含淡出到指定透明度) function fadeOut(elem, speed, opacity){ /* * 參數說明 * elem==>需要淡入的元素 * speed==>淡入速度,正整數(可選) * opacity==>淡入到指定的透明度,0~100(可選) */ speedspeed = speed || 20; opacityopacity = opacity || 0; //初始化透明度變化值為0 var val = 100; //迴圈將透明值以5遞減,即淡出效果 (function(){ iBase.SetOpacity(elem, val); val -= 5; if (val >= opacity) { setTimeout(arguments.callee, speed); }else if (val < 0) { //元素透明度為0後隱藏元素 elem.style.display = 'none'; } })(); } var btns = iBase.Id('demo').getElementsByTagName('input'); btns[0].onclick = function(){ fadeIn(iBase.Id('fadeIn')); } btns[1].onclick = function(){ fadeOut(iBase.Id('fadeOut'),40); } btns[2].onclick = function(){ fadeOut(iBase.Id('fadeTo'), 20, 10); } } </script> </head> <body> <!--DEMO start--> <div id="demo"> <div class="box"> <h2><input type="button" value="點擊淡入" /></h2> <div id="fadeIn" style="display:none"> <p>幫客之家</p> <p>www.jb51.net</p> </div> <p>幫客之家是國內專業的網站建設資源.</p> </div> <div class="box"> <h2><input type="button" value="點擊淡出" /></h2> <div id="fadeOut"> <p>幫客之家</p> <p>www.jb51.net</p> </div> <p>幫客之家是國內專業的網站建設資源.</p> </div> <div class="box"> <h2><input type="button" value="點擊淡出至指定透明度" /></h2> <div id="fadeTo"> </div> <p>幫客之家是國內專業的網站建設資源.</p> </div> </div> <!--DEMO end--> </body> </html>
以上就是本文的全部內容，希望對大家學習原生js和jQuery實現淡入淡出輪播效果有所協助。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
