js基礎自定義屬性索引值之圖片切換例項
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
<style>
body{
background-color: #ccc;
}
#container{
width:300px;
height:400px;
position:relative;
margin:0 auto;
}
img{
width:300px;
height:400px;
}
ul{
margin:0;
padding:0;
list-style: none;
position:absolute;
top:5px;
left:320px;
}
li{
width:40px;
height:40px;
background-color: yellow;
margin-bottom: 5px;
}
li.active{
background-color:#fc3;
}
span{
width:300px;
height:30px;
line-height: 30px;
text-align:center;
color:#fff;
position:absolute;
top:0;
left:0px;
}
p{
margin:0;
padding:0;
width:300px;
height:30px;
line-height: 30px;
text-align:center;
color:#fff;
position:absolute;
bottom:10px;
left:0px;
}
</style>
<script>
//頁面實現點選按鈕切換對應的圖片與下標
window.onload = function (){
var oImg=document.getElementsByTagName('img')[0];
var oSpan=document.getElementsByTagName('span')[0];
var oP=document.getElementsByTagName('p')[0];
var oSpan=document.getElementsByTagName('span')[0];
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var arrText=['圖片一','圖片二','圖片三','圖片四'];
var arrUrl=['img/1.png','img/2.png','img/3.png','img/4.png'];
var num=0;
var oldLi=null;//用來存放上一個的變數
for(var i=0;i<arrUrl.length;i++){
oUl.innerHTML+='<li></li>'
}
oldLi=aLi[num];
//初始化
oImg.src=arrUrl[num];
oSpan.innerHTML=1+num+"/"+arrUrl.length;
oP.innerHTML=arrText[num];
aLi[num].className='active';
for(var i=0;i<aLi.length;i++){
aLi[i].index=i//這一步很重要，給每個Li新增一個自定義索引
aLi[i].onclick=function(){//給每一個方塊點選事件
oImg.src=arrUrl[this.index];//對應切換圖片的src
oSpan.innerHTML=1+this.index+"/"+arrUrl.length;//對應切換span標籤的內容
oP.innerHTML=arrText[this.index];//對應切換p標籤的內容
//思路一：全部清空，當前新增
// for(var i=0;i<arrUrl.length;i++){
// aLi[i].className="";
// }
// this.className='active';
//思路二：清空上個，當前新增
oldLi.className='';//把上一個的清空
oldLi=this;//同時把當前附給上一個
this.className='active';//當前的型別切換
}
}
}
</script>
</head>
<body>
<div id="container">
<img src="img/1.png"/>
<span>數量正在載入中...</span>
<p>圖片正在載入中..</p>
<ul>
</ul>
</div>
</body>
</html>
相關推薦
js基礎自定義屬性索引值之圖片切換例項
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文件</title>
js基礎之自定義屬性索引的應用
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文件</title>
js中設定、取、修改、刪除，自定義屬性的值
<div class="div-info" testAttr="myAttr" testAttr2="haha"> </div> 1、js中設定自定義屬性。 例如：$(".div-info").attr("testAttr3","houhou
jquery獲取自定義屬性的值
取值 知識庫 rep -name bsp class tar itl jquery //獲取屬性值 1 <div id="text" value="黑噠噠的盟友"><div> jQuery取值： $("#text").attr("value");
獲取自定義屬性的值
js獲取自定義屬性的值在js中有3種常見的方法：獲取自定義屬性的值
python基礎-- 自定義屬性訪問 __setattr__, __getattr__,__getattribute__, __call__
object._getattr_(self, name) 例項instance通過instance.name訪問屬性name，只有當屬性name沒有在例項的__dict__或它構造類的__dict__或基類的__dict__中沒有找到，才會呼叫__getattr__。當屬性name可以通過正常機
JS基礎型別的屬性賦值問題
參考文章: https://blog.csdn.net/yiifaa/article/details/54341112 在Javascript中，變數的型別一旦宣告為基礎型別，如果再為基礎型別的變數新增屬性，則其新建的屬性不可儲存，會自動銷燬，基本流程如下： 1. 首先將基
Android：自定義控制元件 --- 自定義屬性 列舉值（固定屬性值）
今天寫一個自定義控制元件，為了提高使用者使用效率，需要對一個屬性的所有可能屬性值進行列舉（即，只能選擇使用給出的屬性值） 查了很多資料，自己總結一下。 如何寫自定義控制元件就不在贅述了，網上很多大神寫的都很好，此處只說明這一種情況。 attrs.xml <?xml
Angular6實現繫結HTML自定義屬性的值以及CSS中background屬性的資料繫結
今天用Angular6在整合網上一個程式碼的時候，他的程式碼的一個HTML標籤有幾個自定義標籤，然後我以為轉換到Angular後和不是自定義標籤一樣直接加[]就可以了，但是一直報錯。 這裡顯示沒有這個屬性 解決方案：去除[]並且加上attr.就可以了
jQuery獲取select中選中的option的值和自定義屬性的值
使用jQuery獲取獲取select下拉框中option的值： //通過繫結change事件，當下拉框內容發生變化時事件被啟動 $("#wlms").bind("change",function(
jQuery點選元素獲取自定義屬性的值，利用冒泡原理~
知識鋪墊： attr(“屬性名”)； //獲取屬性的值（取得第一個匹配元素的屬性。通過這個方法可以方便的從第一個匹配元素中獲取一個屬性的值。如果元素沒有相應屬性，則返回undefined）
獲取attrs.xml中宣告的自定義屬性的值
關鍵程式碼： private void init(Context context,AttributeSet attrs) { TypedArray ta = context.obtainStyledAttributes(attrs, R.
JS的自定義屬性
1、除了一些特定屬性，如value、name，還可以新增自定義屬性：oBtn.abc = 123 ; JS可以為任何HTML元素新增任意個 自定義屬性。2、for裡面套了function，function裡面的i變數為最後迴圈完的那個值，所以需要用帶this。3、一般建
Android 自定義 ViewPager 打造千變萬化的圖片切換效果
記得第一次見到ViewPager這個控制元件，瞬間愛不釋手，做東西的主介面通通ViewPager，以及圖片切換也拋棄了ImageSwitch之類的，開始讓ViewPager來做。時間長了，ViewPager的切換效果覺得枯燥，形成了審美疲勞~~我們需要改變，今天教大家如何改變V
js基礎之自定義屬性（一）
aLi[i].onclick=function(){if(this.onOff){this.style.background='url(img/normal.png)';this.onOff=false}else{this.style.background='url(img/active.png)';this
js基礎之自定義屬性（二）
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文件</title>
原生js如何通過html標籤的自定義屬性，找到該屬性對應的屬性值
需求如下： 我有一段固定的js，不同的專案都必須引入，並且js內必須傳入一個專案標識。 此時的做法當然是把這段js封裝成一個js檔案，放到cdn上，每次只需要引入這個js的地址，並且傳入不同的引數 為了
vue.js基礎02--計算屬性(computed、watch、&watch)、過濾器、自定義元件（component、components）
1.vue例項中的計算屬性選項 計算屬性關鍵詞: computed。 在一個計算屬性裡可以完成各種複雜的邏輯，包括運算、函式呼叫等，只要最終返回一個結果就可以。 <body> <div id="example"> <p>Ori
js獲取html下拉框中選中值的自定義屬性值
<select id="city" onchange="city_change(this)""> <option value="1" tag="010">北京</option> <option value="1" tag="02
HTML5自定義屬性之data-
表現 logs nbsp null dex att html5 mov 對象 HTML5 增加了一項新功能是 自定義數據屬性 ，也就是 data-* 自定義屬性。在HTML5中我們可以使用以 data- 為前綴來設置我們需要的自定義屬性，來進行一些數據的存放。當然高級瀏覽