丰满少妇三级全黄,白又丰满大屁股bbbbb

Home

Web Front-end

JS Tutorial

Native js and jquery implement image carousel fade-in and fade-out effect_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:02 PM

jquery Native js Image Carousel

圖片輪播有很多種方式，這里采用其中的淡入淡出形式

js原生和jQuery都可以實現(xiàn)，jquery因為封裝了很多用法，所以用起來就簡單許多，轉換成js使用，其實也就是用js原生模擬出這些用法。

但不管怎樣，構造一個最基本的表現(xiàn)層是必須的

簡單的圖片輪播一般由幾個部分構成。

對于淡入淡出式

1.首先是個外圍部分（其實也就是最外邊的整體wrapper)

2.接著就是你設置圖片輪播的地方（也就是一個banner吧）

3.然后是一個圖片組（可以用新的div 也可以直接使用 ul-->li形式）

4.然后是一個透明背景層，放在圖片底部

5.然后是一個圖片描述info層，放在透明背景層的左下角（div 或 ul-->li)

6.然后是一個按鈕層，用來定位圖片組的index吧,放在透明背景層的右下角(div 或 ul-->li)

7.當然了，有些時候還在圖片兩端放兩個箭頭 < 和 >? ,指示圖片輪播方向（這里先不用，如果要使用也同理）

由此，可以先構造出html結構

<div class="wrapper"><!-- 最外層部分 -->
    <div class="banner"><!-- 輪播部分 -->
      <ul class="imgList"><!-- 圖片部分 -->
        <li class="imgOn"><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
      <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
      <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
      <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
      <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
      </ul>
      <div class="bg"></div> <!-- 圖片底部背景層部分-->
      <ul class="infoList"><!-- 圖片左下角文字信息部分 -->
        <li class="infoOn">puss in boots1</li>
        <li>puss in boots2</li>
        <li>puss in boots3</li>
        <li>puss in boots4</li>
        <li>puss in boots5</li>
      </ul>
      <ul class="indexList"><!-- 圖片右下角序號部分 -->
        <li class="indexOn">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </div>

圖片部分的alt說明即為infoList部分的信息內(nèi)容，有些時候就可以綁定一下下。要注意的是，imgList中圖片的寬度和高度最后馬上設定，如果在css中才統(tǒng)一設定會變慢一些。

我給三個部分的active都添加的對應的on類，實際使用的時候可能不需要那么多active

接下來給它設置一下css樣式

<style type="text/css">
  body,div,ul,li,a,img{margin: 0;padding: 0;}
  ul,li{list-style: none;}
  a{text-decoration: none;}
  .wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
  .banner{width: 400px;height: 200px;overflow: hidden;}
  .imgList{width:400px;height:200px;z-index: 10;}
  .imgList li{display: none;}
  .imgList .imgOn{display: inline;}
  .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
  .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
  .infoList li{display: none;}
  .infoList .infoOn{display: inline;color: white;}
  .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
  .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
  .indexList .indexOn{background: red;font-weight: bold;color: white;}
</style>

說明一下：

1、banner即為圖片輪播的范圍，這里設定為寬400高200，圖片的ul外圍也如此設置。

2、要顯示active項，所以先統(tǒng)一所有l(wèi)i設置display:none,再添加個on類設置 display:inline

3、因為當使用jquery的fadeIn()時，是變化為display:list-item,所以要在banner那里加上overflow:hidden ,不然如果快速切換圖片的話，整體圖片高度會超出所給的高度。

4、要注意給每個部分添加 z-index值，防止被覆蓋無法展現(xiàn)出來的現(xiàn)象

寫到這里，先檢查一下頁面是否已經(jīng)正確顯示出第一項。如果已經(jīng)顯示好，再增添js處理部分。

一、jQuery方式

1.有一個當前圖片對應的標號 curIndex = 0;

2.默認會自動輪播，所以默認給其添加

var autoChange = setInterval(function(){ 
    if(curIndex < $(".imgList li").length-1){ 
      curIndex ++; 
    }else{ 
      curIndex = 0;
    }
    //調用變換處理函數(shù)
    changeTo(curIndex); 
  },2500);

默認curIndex自增,之后重置為0

3.其中changeTo()函數(shù)切換

function changeTo(num){ 
    $(".imgList").find("li").removeClass("imgOn").hide().eq(num).fadeIn().addClass("imgOn");
    $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
    $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
  }

看著辦吧..

4.然后當鼠標滑入滑出右下角的下標時也要處理

  $(".indexList").find("li").each(function(item){ 
    $(this).hover(function(){ 
      clearInterval(autoChange);
      changeTo(item);
      curIndex = item;
    },function(){ 
      autoChange = setInterval(function(){ 
        if(curIndex < $(".imgList li").length-1){ 
          curIndex ++; 
        }else{ 
          curIndex = 0;
        }
        //調用變換處理函數(shù)
        changeTo(curIndex); 
      },2500);
    });
  });

滑入清除定時器，并進行圖片切換處理。然后設置curIndex為當前item(這個要注意別忘了)

滑出重置定時器，還原默認狀態(tài)了

這樣一來，淡入淡出就完成了。

完整代碼





圖片輪播 jq(淡入淡出)



  
    
      
        
      
      
      
      
      
      
 
      
        puss in boots1
        puss in boots2
        puss in boots3
        puss in boots4
        puss in boots5
      
      
        1
        2
        3
        4
        5

二、js原生方式

原生方式大致來說就是模擬jquery

因為我用了太多的class,所以要增加一些class的處理函數(shù)（可以用id，應該會更便捷）

通過class名取標簽元素（注意了，因為現(xiàn)在我只針對于標簽有一個class的來說，多個class應該會出錯）

  //通過class獲取節(jié)點
  function getElementsByClassName(className){ 
    var classArr = [];
    var tags = document.getElementsByTagName('*');
    for(var item in tags){ 
      if(tags[item].nodeType == 1){ 
        if(tags[item].getAttribute('class') == className){ 
          classArr.push(tags[item]);
        }
      }
    }
    return classArr; //返回
  }

模擬jq的addClass和removeClass

  // 判斷obj是否有此class
  function hasClass(obj,cls){  //class位于單詞邊界
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
   }
   //給 obj添加class
  function addClass(obj,cls){ 
    if(!this.hasClass(obj,cls)){ 
       obj.className += cls;
    }
  }
  //移除obj對應的class
  function removeClass(obj,cls){ 
    if(hasClass(obj,cls)){ 
      var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
         obj.className = obj.className.replace(reg,'');
    }
  }

再模擬jq的fadeIn和fadeOut函數(shù)

  //淡入處理函數(shù)
  function fadeIn(elem){ 
    setOpacity(elem,0); //初始全透明
    for(var i = 0;i<=20;i++){ //透明度改變 20 * 5 = 100
      (function(){ 
        var level = i * 5;  //透明度每次變化值
        setTimeout(function(){ 
          setOpacity(elem, level)
        },i*25); //i * 25 即為每次改變透明度的時間間隔，自行設定
      })(i);     //每次循環(huán)變化一次
    }
  }

    //淡出處理函數(shù)
  function fadeOut(elem){ 
    for(var i = 0;i<=20;i++){ //透明度改變 20 * 5 = 100
      (function(){ 
        var level = 100 - i * 5; //透明度每次變化值
        setTimeout(function(){ 
          setOpacity(elem, level)
        },i*25); //i * 25 即為每次改變透明度的時間間隔，自行設定
      })(i);     //每次循環(huán)變化一次
    }
  }

其中設置透明度函數(shù)的處理形式

    //設置透明度
  function setOpacity(elem,level){ 
    if(elem.filters){ 
      elem.style.filter = "alpha(opacity="+level+")";
    }else{ 
      elem.style.opacity = level / 100;
    }
  }

然后就是基本部分的用法了

先初始化經(jīng)常用到的變量以及圖片的自動切換

    var curIndex = 0, //當前index
      imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組
      imgLen = imgArr.length,
      infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //獲取圖片info組
      indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //獲取控制index組
     // 定時器自動變換2.5秒每次
  var autoChange = setInterval(function(){ 
    if(curIndex < imgLen -1){ 
      curIndex ++; 
    }else{ 
      curIndex = 0;
    }
    //調用變換處理函數(shù)
    changeTo(curIndex); 
  },2500);
  //調用添加事件處理
  addEvent();

其中的changeTo就是處理函數(shù)，addEvent就是給右下角的那些按鈕設定事件處理

//變換處理函數(shù)
  function changeTo(num){ 
    //設置image
    var curImg = getElementsByClassName("imgOn")[0];
    fadeOut(curImg); //淡出當前 image
    removeClass(curImg,"imgOn");
    addClass(imgArr[num],"imgOn");
    fadeIn(imgArr[num]); //淡入目標 image
    //設置image 的 info
    var curInfo = getElementsByClassName("infoOn")[0];
    removeClass(curInfo,"infoOn");
    addClass(infoArr[num],"infoOn");
    //設置image的控制下標 index
    var _curIndex = getElementsByClassName("indexOn")[0];
    removeClass(_curIndex,"indexOn");
    addClass(indexArr[num],"indexOn");
  }
 //給右下角的圖片index添加事件處理
 function addEvent(){
  for(var i=0;i<imgLen;i++){ 
    //閉包防止作用域內(nèi)活動對象item的影響
    (function(_i){ 
    //鼠標滑過則清除定時器，并作變換處理
    indexArr[_i].onmouseover = function(){ 
      clearTimeout(autoChange);
      changeTo(_i);
      curIndex = _i;
    };
    //鼠標滑出則重置定時器處理
    indexArr[_i].onmouseout = function(){ 
      autoChange = setInterval(function(){ 
      if(curIndex < imgLen -1){ 
        curIndex ++;
      }else{ 
        curIndex = 0;
      }
    //調用變換處理函數(shù)
      changeTo(curIndex); 
    },2500);
    };
     })(i);
  }
}

如此一來，原生版的也完成了

完整代碼





圖片輪播 js原生(淡入淡出)



  
    
      
        
      
      
      
      
      
      
 
      
        puss in boots1
        puss in boots2
        puss in boots3
        puss in boots4
        puss in boots5
      
      
        1
        2
        3
        4
        5

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress images for free

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Grass Wonder Build Guide | Uma Musume Pretty Derby

1 months ago By Jack chen

Roblox: 99 Nights In The Forest - All Badges And How To Unlock Them

4 weeks ago By DDD

Uma Musume Pretty Derby Banner Schedule (July 2025)

1 months ago By Jack chen

RimWorld Odyssey Temperature Guide for Ships and Gravtech

3 weeks ago By Jack chen

Windows Security is blank or not showing options

1 months ago By 下次還敢

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Laravel Tutorial

1600

PHP Tutorial

1502

276

Related knowledge

Detailed explanation of jQuery reference methods: Quick start guide Feb 27, 2024 pm 06:45 PM

Detailed explanation of jQuery reference method: Quick start guide jQuery is a popular JavaScript library that is widely used in website development. It simplifies JavaScript programming and provides developers with rich functions and features. This article will introduce jQuery's reference method in detail and provide specific code examples to help readers get started quickly. Introducing jQuery First, we need to introduce the jQuery library into the HTML file. It can be introduced through a CDN link or downloaded

How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on ??the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

How to remove the height attribute of an element with jQuery? Feb 28, 2024 am 08:39 AM

How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element

Understand the role and application scenarios of eq in jQuery Feb 28, 2024 pm 01:15 PM

jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s

Introduction to how to add new rows to a table using jQuery Feb 29, 2024 am 08:12 AM

jQuery is a popular JavaScript library widely used in web development. During web development, it is often necessary to dynamically add new rows to tables through JavaScript. This article will introduce how to use jQuery to add new rows to a table, and provide specific code examples. First, we need to introduce the jQuery library into the HTML page. The jQuery library can be introduced in the tag through the following code:

How to tell if a jQuery element has a specific attribute? Feb 29, 2024 am 09:03 AM

How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute

See all articles

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂