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

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

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

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-">
 <title>最簡(jiǎn)單的輪播廣告</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）做的,不糾結(jié)、簡(jiǎn)單 在css里面
 function show(a){ //方法定義的是當(dāng)傳入一個(gè)下標(biāo)時(shí)，按鈕和圖片做出對(duì)的反應(yīng)
 for(i=;i<btn.length;i++ ){
 btn[i].className=''; //很容易看懂吧？每個(gè)按鈕都先設(shè)置成看不見(jiàn)，然后把當(dāng)前按鈕設(shè)置成可見(jiàn)。
 btn[a].className='current';
 }
 for(i=;i<imgs.length;i++){ //把圖片的效果設(shè)置和按鈕相同
 imgs[i].style.opacity=;
 imgs[a].style.opacity=;
 }
 }
 //切換按鈕功能，響應(yīng)對(duì)應(yīng)圖片
 for(i=;i<btn.length;i++){
 btn[i].index=i; //不知道你有沒(méi)有發(fā)現(xiàn)，循環(huán)里的方法去調(diào)用循環(huán)里的變量體i，會(huì)出現(xiàn)調(diào)到的不是i的變動(dòng)值的問(wèn)題。所以我先在循環(huán)外保存住
 btn[i].onmouseover=function(){
 show(this.index);
 clearInterval(play); //這就是最后那句話追加的功能
 }
 }
 //自動(dòng)輪播方法
 function autoPlay(){
 play=setInterval(function(){ //這個(gè)paly是為了保存定時(shí)器的，變量必須在全局聲明 不然其他方法調(diào)不到 或者你可以調(diào)用auto.play 也許可以但是沒(méi)時(shí)間試了
 index++;
 index>=imgs.length&&(index=);//可能有優(yōu)先級(jí)問(wèn)題，所以用了括號(hào)，沒(méi)時(shí)間測(cè)試了。
 show(index);
 },)
 }
 autoPlay();//馬上調(diào)用，我試過(guò)用window.onload調(diào)用這個(gè)方法，但是調(diào)用之后影響到了其他方法，使用autoPlay所以只能這樣調(diào)用了
 //div的鼠標(biāo)移入移出事件
 box.onmouseover=function(){
 clearInterval(play);
 };
 box.onmouseout=function(){
 autoPlay();
 };
 //按鈕下標(biāo)也要加上相同的鼠標(biāo)事件，不然圖片停止了，定時(shí)器沒(méi)停，會(huì)突然閃到很大的數(shù)字上。 貌似我可以直接追加到之前定義事件中。
 </script>
 </body>
 </html>

代碼二：

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

第二步，布局好一個(gè)DIV,如：

<div id="scroll">
 <p class="subl">上一張<p/>
 <p class="subr">下一張<p/>
 <ul>
 <li style="background:red;display:block;"></li>
　//上面的ｌｉ要設(shè)定為顯示，因?yàn)槭堑谝粡垐D片．
 <li style="background:green;"></li>
 <li style="background:gray;"></li>
 <li style="background:orange;"></li>
 </ul>
 </div>

由于方便各位網(wǎng)友下載能夠清晰明了，我就沒(méi)有用圖片路徑了，因?yàn)榈侥銈冸娔X上就看不到了，這里用背景顏色．

第三步，就到了寫(xiě)CSS的時(shí)候了．下面的CSS懂基礎(chǔ)的人都看得懂．

#scroll{width:100%; height:180px; background-color:white; position:relative;border-bottom:1px solid gray;}//這里是給整個(gè)大的ＤＩＶ設(shè)定屬性．
#scroll ul{height:180px; list-style:none;}//ＤＩＶ下的ＵＬ屬性．
#scroll ul li{width:100%; height:180px;margin:0px; padding:0px; display:none;}//ＤＩＶ下的ＵＬ下的ＬＩ屬性．注意：display:none;因?yàn)橐獙⑺械模欤殡[藏了先．當(dāng)點(diǎn)擊的時(shí)候在顯示出來(lái)．
 .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;}//上一張按鈕的屬性．注意一個(gè)絕對(duì)定位．
 .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; 
}//下一張按鈕的屬性．注意一個(gè)絕對(duì)定位．
.subr:hover{ background:yellow;border-radius:10px;}
.subl:hover{ background:yellow;border-radius:10px;}
//以上兩個(gè)hover是鼠標(biāo)經(jīng)過(guò)的效果．

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

<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();
 });
//到這里分開(kāi)！上面的是上一張點(diǎn)擊的效果代碼，下面的是下一張點(diǎn)擊的效果代碼．
 $(".subr").click(function(){//獲取類(lèi)名的點(diǎn)擊事件．
 if(i==0){
i=len+1;
}
i--;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
 });
 });
 /*輪播*/
</script>

四步輕松搞定一個(gè)簡(jiǎn)單的輪！

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

您可能感興趣的文章: