suchen

Heim  >  Artikel  >  Web-Frontend  >  Native js und jQuery implementieren Ein- und Ausblendkarussell effect_jquery

Native js und jQuery implementieren Ein- und Ausblendkarussell effect_jquery

WBOY
WBOYOriginal
2016-05-16 15:23:281509Durchsuche

Das Beispiel in diesem Artikel stellt den Schlüsselcode zum Realisieren des Ein- und Ausblend-Karusselleffekts basierend auf jQuery vor und teilt ihn als Referenz mit Ihnen. Der spezifische Inhalt lautet wie folgt:
Grundprinzip: Positionieren Sie alle Bilder absolut an der gleichen Position, setzen Sie die Transparenz auf 0 und verwenden Sie dann das Ein- und Ausblenden von jQuery, um den Bildwechseleffekt zu erzielen.
HTML-Code: 

<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'>&lt</div>
 <div id='next'>&gt</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(); 
})

Am Ende des Artikels habe ich eine kleine Frage an Sie gestellt und hoffe, dass Sie mir eine Lösung geben können.
Wenn Sie fadeIn zum Einblenden verwenden, kann dies letztendlich nur durch die Verwendung von fadeTo erreicht werden.
Lassen Sie mich ein kleines Beispiel mit Ihnen teilen: Native JS implementiert den Ein-/Ausblendeffekt (fadeIn/fadeOut/fadeTo)
Der Fade-Effekt wird oft in alltäglichen Projekten verwendet. Leider gibt es in nativem JS keine ähnliche Methode, und manchmal lohnt es sich nicht, eine jQuery-Bibliothek einzuführen, daher habe ich selbst eine geschrieben . Freunde, die es haben, können es auch direkt verwenden, um die Transparenz von Elementen im Code festzulegen, die gemäß den IE-Regeln (0 ~ 100) festgelegt wird 1,00), bitte berücksichtigen Sie bei der Verwendung unten den Punkt, um den Unterschied genau auszudrücken.
Parameterbeschreibung:
Sowohl fadeIn() als auch fadeOut() haben drei Parameter. Der erste ist das erforderliche Ereignis; der zweite ist die Ein- und Ausblendgeschwindigkeit, eine positive Ganzzahl, die Größe wird von Ihnen selbst gewichtet und ist optional; Der dritte ist der angegebene Ein- und Ausblendpunkt (ähnlich wie fadeTo() in jQuery), ein positiver ganzzahliger Wert von 0 bis 100, der ebenfalls ein optionaler Parameter ist.

<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 &#63; 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>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass es für alle hilfreich ist, natives js und jQuery zu lernen, um den Ein- und Ausblend-Karusselleffekt zu erzielen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Analyse einer JS-Front-End-Interviewfrage_Javascript-FähigkeitenNächster Artikel：Analyse einer JS-Front-End-Interviewfrage_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen