原生js和jQuery實(shí)現(xiàn)淡入淡出輪播效果
更新時間：2022年05月16日 15:28:41 作者：Big_Dot
這篇文章主要介紹了原生js和jQuery實(shí)現(xiàn)淡入淡出輪播效果，介紹到了jQuery實(shí)現(xiàn)淡入淡出輪播效果的基本原理，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家介紹了基于jQuery實(shí)現(xiàn)淡入淡出輪播效果的關(guān)鍵代碼，分享給大家供大家參考，具體內(nèi)容如下：
基本原理：將所有圖片絕對定位在同一位置，透明度設(shè)為0，然后通過jQuery的淡入淡出實(shí)現(xiàn)圖片的切換效果。
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; //用于判斷是否處于動畫狀態(tài)
//切換函數(shù)
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;
});
}
//點(diǎn)擊切換上一張
$('#pre').click(function(){
if(flag==false){
move(-1)
}
})
//點(diǎn)擊切換下一張
$('#next').click(function(){
if(flag==false){
move(1)
}
})
//點(diǎn)擊按鈕直接切換
$('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)
}
//鼠標(biāo)懸停，清除自動播放
$('#scrollPlay').mouseover(function(){
clearInterval(timer)
})
//鼠標(biāo)移開，開始自動播放
$('#scrollPlay').mouseout(function(){
go();
})
go();
})文章最后為大家提了一個小問題，希望大家能給出解決方法。
使用fadeIn淡入時卻無效果，最后只能使用fadeTo實(shí)現(xiàn)，這是什么原因？
為大家分享一個小例子：原生JS實(shí)現(xiàn)淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常項(xiàng)目中經(jīng)常用到,可惜原生JS沒有類似的方法,而有時小的頁面并不值得引入一個jQuery庫,所以就自己寫了一個,已封裝, 有用得著的朋友, 可以直接使用. 代碼中另附有一個設(shè)置元素透明度的方法, 是按IE規(guī)則(0~100)設(shè)置, 若改成標(biāo)準(zhǔn)設(shè)置方法(0.00~1.00), 下面使用時請考慮浮點(diǎn)精確表達(dá)差值.
參數(shù)說明:
fadeIn()與fadeOut()均有三個參數(shù),第一個是事件, 必填; 第二個是淡入淡出速度, 正整數(shù), 大小自己權(quán)衡, 可選參數(shù); 第三個, 是指定淡入淡出到的透明度值(類似于jQuery中的fadeTo()), 0~100的正整數(shù)值, 也是可選參數(shù).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>原生JS實(shí)現(xiàn)淡入淡出效果</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);
},
//設(shè)置元素透明度,透明度值按IE規(guī)則計,即0~100
SetOpacity: function(ev, v){
ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
}
}
//淡入效果(含淡入到指定透明度)
function fadeIn(elem, speed, opacity){
/*
* 參數(shù)說明
* elem==>需要淡入的元素
* speed==>淡入速度,正整數(shù)(可選)
* opacity==>淡入到指定的透明度,0~100(可選)
*/
speedspeed = speed || 20;
opacityopacity = opacity || 100;
//顯示元素,并將元素值為0透明度(不可見)
elem.style.display = 'block';
iBase.SetOpacity(elem, 0);
//初始化透明度變化值為0
var val = 0;
//循環(huán)將透明值以5遞增,即淡入效果
(function(){
iBase.SetOpacity(elem, val);
val += 5;
if (val <= opacity) {
setTimeout(arguments.callee, speed)
}
})();
}
//淡出效果(含淡出到指定透明度)
function fadeOut(elem, speed, opacity){
/*
* 參數(shù)說明
* elem==>需要淡入的元素
* speed==>淡入速度,正整數(shù)(可選)
* opacity==>淡入到指定的透明度,0~100(可選)
*/
speedspeed = speed || 20;
opacityopacity = opacity || 0;
//初始化透明度變化值為0
var val = 100;
//循環(huán)將透明值以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="點(diǎn)擊淡入" /></h2>
<div id="fadeIn" style="display:none">
<p>腳本之家</p>
<p>www.dbjr.com.cn</p>
</div>
<p>腳本之家是國內(nèi)專業(yè)的網(wǎng)站建設(shè)資源.</p>
</div>
<div class="box">
<h2><input type="button" value="點(diǎn)擊淡出" /></h2>
<div id="fadeOut">
<p>腳本之家</p>
<p>www.dbjr.com.cn</p>
</div>
<p>腳本之家是國內(nèi)專業(yè)的網(wǎng)站建設(shè)資源.</p>
</div>
<div class="box">
<h2><input type="button" value="點(diǎn)擊淡出至指定透明度" /></h2>
<div id="fadeTo">
</div>
<p>腳本之家是國內(nèi)專業(yè)的網(wǎng)站建設(shè)資源.</p>
</div>
</div>
<!--DEMO end-->
</body>
</html> 以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)原生js和jQuery實(shí)現(xiàn)淡入淡出輪播效果有所幫助。
相關(guān)文章
本代碼將實(shí)現(xiàn)以下樣式及功能：日歷標(biāo)題背景色、日歷標(biāo)題字體色、日歷背景色、日歷字體色、假日字體色、背景水印色、是否顯示上月和下月的日期，感興趣的朋友可以了解下哈2013-04-04
這篇文章主要為大家詳細(xì)介紹了layui表格效果的實(shí)現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
jQuery實(shí)現(xiàn)按鈕的點(diǎn)擊 全選/反選 單選框/復(fù)選框 文本框 表單驗(yàn)證
這篇文章主要介紹了jQuery實(shí)現(xiàn)按鈕的點(diǎn)擊 全選/反選 單選框/復(fù)選框 文本框 表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jQuery實(shí)現(xiàn)的中英文切換功能,結(jié)合實(shí)例形式分析了jQuery結(jié)合插件translate.js實(shí)現(xiàn)中英文翻譯的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了jQuery對下拉框,單選框,多選框的操作需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
jQuery發(fā)請求傳輸中文參數(shù)亂碼問題的解決方案
這篇文章主要介紹了jQuery發(fā)請求傳輸中文參數(shù)亂碼問題的解決方案,需要的朋友可以參考下2018-05-05
基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼
基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼，需要的朋友可以參考下。2011-04-04
jquery鍵盤事件使用介紹，需要的朋友可以參考下。2011-11-11
本篇文章主要是對Cookie中的Path與domain進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了jQuery實(shí)現(xiàn)的兼容性浮動層,可兼容IE、火狐等主流瀏覽器,涉及jQuery針對頁面元素的運(yùn)算與屬性的動態(tài)設(shè)置相關(guān)技巧,需要的朋友可以參考下2016-08-08