最簡單的JavaScript圖片輪播代碼(兩種方法)

更新時間：2021年03月30日 11:53:27 作者：super_walker

基于javascript代碼實現(xiàn)最簡單的圖片輪播效果，非常簡單，本文通過兩種方式給大家介紹最簡單的圖片輪播，感興趣的朋友一起學習吧

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-">
 <title>最簡單的輪播廣告</title>
 <style>
 body, div, ul, li {
 margin: ;
 padding: ;
 }
 ul {
 list-style-type: none;
 }
 body {
 background: #;
 text-align: center;
 font: px/px Arial;
 }
 #box {
 position: relative;
 width: px;
 height: px;
 background: #fff;
 border-radius: px;
 border: px solid #fff;
 margin: px auto;
 }
 #box .list {
 position: relative;
 width: px;
 height: px;
 overflow: hidden;
 border: px solid #ccc;
 }
 #box .list li {
 position: absolute;
 top: ;
 left: ;
 width: px;
 height: px;
 opacity: ;
 transition: opacity .s linear
 }
 #box .list li.current {
 opacity: ;
 }
 #box .count {
 position: absolute;
 right: ;
 bottom: px;
 }
 #box .count li {
 color: #fff;
 float: left;
 width: px;
 height: px;
 cursor: pointer;
 margin-right: px;
 overflow: hidden;
 background: #F;
 opacity: .;
 border-radius: px;
 }
 #box .count li.current {
 color: #fff;
 opacity: .;
 font-weight: ;
 background: #f
 }
 </style>
 </head>
 <body>
 <div id="box">
 <ul class="list">
 <li class="current" style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
 <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
 <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
 <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
 <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
 </ul>
 <ul class="count">
 <li class="current"></li>
 <li class=""></li>
 <li class=""></li>
 <li class=""></li>
 <li class=""></li>
 </ul>
 </div>
 <script>
 var box=document.getElementById('box');
 var uls=document.getElementsByTagName('ul');
 var imgs=uls[].getElementsByTagName('li');
 var btn=uls[].getElementsByTagName('li');
 var i=index=; //中間量，統(tǒng)一聲明；
 var play=null;
 console.log(box,uls,imgs,btn);//獲取正確
 //圖片切換, 淡入淡出效果我是用（transition: opacity .s linear）做的,不糾結、簡單 在css里面
 function show(a){ //方法定義的是當傳入一個下標時，按鈕和圖片做出對的反應
 for(i=;i<btn.length;i++ ){
 btn[i].className=''; //很容易看懂吧？每個按鈕都先設置成看不見，然后把當前按鈕設置成可見。
 btn[a].className='current';
 }
 for(i=;i<imgs.length;i++){ //把圖片的效果設置和按鈕相同
 imgs[i].style.opacity=;
 imgs[a].style.opacity=;
 }
 }
 //切換按鈕功能，響應對應圖片
 for(i=;i<btn.length;i++){
 btn[i].index=i; //不知道你有沒有發(fā)現(xiàn)，循環(huán)里的方法去調用循環(huán)里的變量體i，會出現(xiàn)調到的不是i的變動值的問題。所以我先在循環(huán)外保存住
 btn[i].onmouseover=function(){
 show(this.index);
 clearInterval(play); //這就是最后那句話追加的功能
 }
 }
 //自動輪播方法
 function autoPlay(){
 play=setInterval(function(){ //這個paly是為了保存定時器的，變量必須在全局聲明 不然其他方法調不到 或者你可以調用auto.play 也許可以但是沒時間試了
 index++;
 index>=imgs.length&&(index=);//可能有優(yōu)先級問題，所以用了括號，沒時間測試了。
 show(index);
 },)
 }
 autoPlay();//馬上調用，我試過用window.onload調用這個方法，但是調用之后影響到了其他方法，使用autoPlay所以只能這樣調用了
 //div的鼠標移入移出事件
 box.onmouseover=function(){
 clearInterval(play);
 };
 box.onmouseout=function(){
 autoPlay();
 };
 //按鈕下標也要加上相同的鼠標事件，不然圖片停止了，定時器沒停，會突然閃到很大的數(shù)字上。 貌似我可以直接追加到之前定義事件中。
 </script>
 </body>
 </html>

代碼二：

首先第一步，下載好一個jquery庫的插件，jquery.js 網(wǎng)上很多隨處可以下載．下載的插件要放在目錄下．然后在html文檔中鏈接好<script type="text/javascript" src="jQuery.js"></script>

第二步，布局好一個DIV,如：

<div id="scroll">
 <p class="subl">上一張<p/>
 <p class="subr">下一張<p/>
 <ul>
 <li style="background:red;display:block;"></li>
　//上面的ｌｉ要設定為顯示，因為是第一張圖片．
 <li style="background:green;"></li>
 <li style="background:gray;"></li>
 <li style="background:orange;"></li>
 </ul>
 </div>

由于方便各位網(wǎng)友下載能夠清晰明了，我就沒有用圖片路徑了，因為到你們電腦上就看不到了，這里用背景顏色．

第三步，就到了寫CSS的時候了．下面的CSS懂基礎的人都看得懂．

#scroll{width:100%; height:180px; background-color:white; position:relative;border-bottom:1px solid gray;}//這里是給整個大的ＤＩＶ設定屬性．
#scroll ul{height:180px; list-style:none;}//ＤＩＶ下的ＵＬ屬性．
#scroll ul li{width:100%; height:180px;margin:0px; padding:0px; display:none;}//ＤＩＶ下的ＵＬ下的ＬＩ屬性．注意：display:none;因為要將所有的ｌｉ隱藏了先．當點擊的時候在顯示出來．
 .subl{position:absolute; bottom:20px; left:40%; width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold; cursor:pointer;}//上一張按鈕的屬性．注意一個絕對定位．
 .subr{
position:absolute;
bottom:20px; right:40%;
width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold;cursor:pointer; 
}//下一張按鈕的屬性．注意一個絕對定位．
.subr:hover{ background:yellow;border-radius:10px;}
.subl:hover{ background:yellow;border-radius:10px;}
//以上兩個hover是鼠標經(jīng)過的效果．

第四步，就是ｊｑｕｅｒｙ代碼了！也很簡單．先將代碼看一遍，你就會用了！

<script type="text/javascript">
/*輪播*/
 $(function(){
 var i=0;
 var len=$("#scroll ul li").length-1;
 $(".subl").click(function(){
 if(i==len){
i=-1;
}
i++;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
 });
//到這里分開！上面的是上一張點擊的效果代碼，下面的是下一張點擊的效果代碼．
 $(".subr").click(function(){//獲取類名的點擊事件．
 if(i==0){
i=len+1;
}
i--;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
 });
 });
 /*輪播*/
</script>

四步輕松搞定一個簡單的輪！

到此這篇關于最簡單的JavaScript圖片輪播代碼(兩種方法)的文章就介紹到這了,更多相關最簡單的圖片輪播內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: