最簡(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í)吧
通過(guò)改變每個(gè)圖片的opacity屬性：
素材圖片：
代碼一：
<!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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript 閉包的使用場(chǎng)景，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-09-09
js+CSS簡(jiǎn)單實(shí)現(xiàn)瀑布流布局
瀑布流布局,是一種視覺(jué)表現(xiàn)為參差不齊的多欄布局,常用于內(nèi)容以圖片為主的頁(yè)面展示,本文將使用css和js兩種方式來(lái)實(shí)現(xiàn)瀑布流布局,需要的可以參考下2023-11-11
JavaScript實(shí)現(xiàn)移動(dòng)端短信驗(yàn)證碼流程介紹
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)移動(dòng)端發(fā)送短信驗(yàn)證碼案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-10-10
本篇文章給大家分享了用嘴簡(jiǎn)單的JS代碼來(lái)實(shí)現(xiàn)經(jīng)典貪吃蛇游戲的全部?jī)?nèi)容，有興趣的朋友參考學(xué)習(xí)下。2018-01-01
IOS中safari下的select下拉菜單文字過(guò)長(zhǎng)不換行的解決方法
今天在項(xiàng)目開(kāi)發(fā)中遇到一個(gè)問(wèn)題safari下的select下拉菜單文字過(guò)長(zhǎng)不換行問(wèn)題，最終我用<optgroup>標(biāo)簽解決此問(wèn)題，下面小編把實(shí)現(xiàn)思路分享給大家供大家參考2016-09-09
js實(shí)現(xiàn)城市級(jí)聯(lián)菜單的2種方法
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)城市級(jí)聯(lián)菜單的2種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JS對(duì)象序列化成json數(shù)據(jù)和json數(shù)據(jù)轉(zhuǎn)化為JS對(duì)象的代碼
這篇文章主要介紹了JS對(duì)象序列化成json數(shù)據(jù)和json數(shù)據(jù)轉(zhuǎn)化為JS對(duì)象的代碼,需要的朋友可以參考下2017-08-08
Immutable 在 JavaScript 中的應(yīng)用
在 JavaScript 中，對(duì)象是引用類(lèi)型的數(shù)據(jù)，其優(yōu)點(diǎn)在于頻繁的修改對(duì)象時(shí)都是在原對(duì)象的基礎(chǔ)上修改，并不需要重新創(chuàng)建，這樣可以有效的利用內(nèi)存，不會(huì)造成內(nèi)存空間的浪費(fèi)，對(duì)象的這種特性可以稱之為 Mutable，中文的字面意思是「可變」2016-05-05
深入理解 TypeScript Reflect Metadata
這篇文章主要介紹了深入理解 TypeScript Reflect Metadata，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)右側(cè)懸浮框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03