JQuery是一個網(wǎng)頁開發(fā)中常用的JavaScript庫,它提供了大量的工具和函數(shù),使得網(wǎng)頁的開發(fā)變得更加簡便。其中,JQuery輪播是一種常見的頁面效果,可以通過一些簡單的代碼實現(xiàn)。以下是JQuery輪播用到的主要代碼:
//HTML代碼 <div id="banner"> <ul> <li><img src="image1.jpg"></li> <li><img src="image2.jpg"></li> <li><img src="image3.jpg"></li> </ul> </div> //CSS代碼 #banner { width: 500px; height: 300px; overflow: hidden; position: relative; } #banner img { width: 100%; height: 100%; } #banner ul { list-style: none; margin: 0; padding: 0; position: absolute; } #banner ul li { width: 500px; height: 300px; float: left; } //JQuery代碼 $(document).ready(function() { var index = 0; //當(dāng)前顯示的圖片索引 var len = $("#banner ul li").length; //圖片數(shù)量 var timer = null; //自動播放計時器 //自動播放函數(shù) function autoPlay() { timer = setInterval(function() { index = (index + 1) % len; showImage(index); }, 2000); } //顯示圖片函數(shù) function showImage(index) { $("#banner ul li").eq(index).fadeIn(500).siblings().fadeOut(500); } //鼠標(biāo)移入暫停自動播放,移出恢復(fù)自動播放 $("#banner").hover(function() { clearInterval(timer); }, function() { autoPlay(); }); //初始化 autoPlay(); });
以上代碼實現(xiàn)了一個基本的JQuery輪播效果。HTML部分包括一個ID為"banner"的div容器,在其中包含ul列表和li元素,每個li元素中都包含一張圖片。CSS部分設(shè)置了圖片容器和圖片的樣式。JQuery代碼則實現(xiàn)了輪播效果的核心代碼,包括自動播放函數(shù)和顯示圖片函數(shù),同時也包括鼠標(biāo)移入移出事件的處理函數(shù)。通過這些代碼,我們可以輕松實現(xiàn)一個專業(yè)的JQuery輪播效果。
下一篇css怎么制作透明背景