-
1 # 時迂笙辭
-
2 # CheeseQ
透過ajax請求的返回資料應該是陣列。
輪播圖應該是個img標籤。
透過js迴圈遍歷陣列,然後操作dom,建立img標籤物件,插入到輪播圖中的img的父級標籤。
給父級一個id,document.getElementById,找到父級標籤。
document.createElement("img")建立img標籤。
appendChild新增子節點。
-
3 # IT眾生相
首先,你會用js寫輪播圖,這就好辦了。用js實現的輪播圖應該有兩種形式:
1. 一個是html裡把輪播的圖片都組織好,放置在<img>標籤中,div包裹好,之後js呼叫輪播圖初始化渲染方法,將這個div中組織好的img標籤渲染成輪播圖;
2. 另一個是在html裡只放置一個標記有ID的div標籤,圖片的資訊都放置在js的數組裡,js呼叫輪播圖初始化渲染方法,將這個標記ID的div渲染成輪播圖。
那不管是上面的哪種形式,改成ajax的請求方式後,由於請求資料是非同步的,首先要想到使用者體驗,輪播圖區域在等待資料填充的時候,先放置一個loading狀態圖示;同時,發起ajax請求到後端等待返回資料,這裡可以使用jQuery提供的ajax請求方法,get或者post方法,如下所示:
$.get("demo.json", function(result){ 這裡寫輪播圖建立方法 }); });
$.post("demo.json",{suggest:txt},function(result){ 這裡寫輪播圖建立方法 }); });
當資料正常返回後:
1. 如果是第一個形式,請將頁面裡的<img>區塊用返回的資料動態創建出來,之後再呼叫輪播圖建立方法;
2. 如果是第二個形式,直接將返回的資料填充到陣列中,之後呼叫輪播圖建立方法就可以了。
-
4 # 薛定諤的實驗體
在你現在的基礎上,
1-做個預處理保持未載入時輪播圖的狀態和結構。
2-利用非同步操作比如promise來處理ajax請求成功或失敗後的處理結果
3-將結果存在數組裡,陣列遍歷替換掉你之前輪播圖的所有src路徑
回覆列表
1. 清除浮動
我對清除浮動的理解是這樣的,
要想清除浮動,首先要知道什麼是浮動,我們在做app,pc端頁面的時候,它裡面有這個塊元素和內聯元素,尤其塊元素在佈局的時候,文件流的形式往下刷,這種形勢下呢,每一個塊元素都是獨佔一行的,要想改變這種現狀,比如說,abc 我們給ab浮動,ab並列排列,ab浮動之後呢,對c會產生影響,這時候我們就要給c加上clearboth清除浮動,這樣做就是要使ab浮動產生的影響,不要影響到c,這是清除浮動的作用,那麼清除浮動往往與什麼有關係呢,比如說與我們的一些特效,比如圖片輪播比如tab切換,這些特效的時候,往往需要我們用浮動去控制他,所以這是我們在使用浮動當中,清除浮動的工作內容,另外,清除浮動有很多種方式,比較常見的有clearboth overflowhidden,after偽類,最後,清除浮動有優勢也有缺點,那麼我認為他的缺點是,有時候在某些瀏覽器使用的時候會不起作用,會失效,當然說這個缺點不是不可以解決的,可以透過整理上下文,或者使用其他的清除浮動方式來解決。
這就是我對清除浮動的理解。
2. DIV CSS display (block none inline)屬性的用法!
我對DIV CSS中display的看法是這樣的:
display常見的值有四個block、none、inline、inline-block,常見的用法有兩種,一種是元素的隱藏與顯示之間的切換,這是none和block之間的切換,另一種是塊元素和行元素之間的轉換;
第一種用法主要用在一些效果當中,比如說table的切換,又比如說隔行變色,它都是用到這種用法,所以說它與效果有一些關係,另外的話是display:block和display:inline的切換,因為我們知道像span、a等行標籤,在預設情況下改變寬高是沒有效果的,這種時候我們就要把span等行元素轉換成block元素,然後再設定寬高就會行之有效,另外有時候我們需要把像div、form表單等塊元素轉換成inline元素,也是有效的,總之一句話,我們為了實現元素之間的切換常用這個用法。display還有一種比較常用的用法是它經常加position、z-index、overflow:hidden去實現各種各樣的效果,比如說頁面的手風琴效果、圖片無縫輪播的效果等,都是這些屬性聯合起來實現的。
以上就是我對display的看法。
3. 關於網頁編碼的理解!
我對網頁編碼的理解是這樣的:
在國內,我們常用的編碼有3種,分別是utf-8,GB2312,GBK。utf-8是國際標準字符集,它裡面包含了一些國際上常用的一些語言,以及一些特殊符號、字符集等;但我們國家也有這種類似的語言協會,它概括的是GBK,叫做中文字符集,它涵蓋了中文,把那些多餘的比如希臘文、法文就去掉了,只保留一些常用的,如中文、英文字母,還有一些日文、韓文這些常用的語言,以及一些特殊符號;GB2312我們叫做簡體中文字符集,是在GBK的範圍上又提煉了一些。
以上就是我對網頁編碼的理解。
4. 瞭解外邊距疊加的相關問題
我對外邊距疊加的理解是這樣的:
首先,外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
觸發條件:a)當一個元素出現在另一個元素上面時,第一個元素的下外邊距與第二個元素的上外邊距會發生合併。b)當一個元素包含在另一個元素中時(假設沒有內邊距或邊框把外邊距分隔開),它們的上和/或下外邊距也會發生合併。
註釋:只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。
以上就是我對外邊距疊加的理解。
5. img的title和alt的異同!
我對img的title和alt的理解是這樣的:
(1)、含義不同
alt:使用alt屬性是為了給那些不能看到你文件中影象的瀏覽者提供文字說明,也就是圖片顯示不了的時候顯示的文字。
title:圖片正常顯示時,滑鼠懸停在圖片上方顯示的提示文字。
(2)、在瀏覽器中的表現不同
在firefox和ie8中,當滑鼠經過圖片時title值會顯示,而alt的值不會顯示;只有在ie6中,當滑鼠經過圖片時title和alt的值都會顯示。
以上就是我對img的title和alt的理解。
6. 請例舉css中position的引數和作用?
我對css中position的理解是這樣的:
position是用來定位的,常見的值有四個,它們分別是:static、absolute、fixed、relative。
static是相對於預設位置去定位的,fixed是相對於瀏覽器視窗定位的,而我們最常用的有兩個,一個是absolute,一個是relative,relative是相對定位,是相對於自身的原來的位置定位的,不會對文件流產生影響,也就是說A和B兩個元素堆疊放置的時候,如果給A元素relative屬性,加top和left值以後對B是沒有影響的,但A漂移走了;absolute是絕對定位,如果父元素有position屬性,這個元素相對於父元素定位的,如果父元素沒有position屬性,這個元素相對於body定位的,而且它這個定位會對後面的元素產生元素,它是脫離文件流的,脫離文件流以後其他元素是會來補缺的,把這個位置填充掉。總而言之,position和display一樣也是常用在各種特效當中,我們常用的就是absolute和relative,它經常和overflow:hidden、z-index、left、top等屬性聯合使用,去實現一些圖片堆疊的效果,比如說常見的摺頁效果,輪播圖等效果都用到這個屬性。
position在使用的過程中有兩個問題需要注意,第一、因為我們的瀏覽器分為IE和非IE瀏覽器,在標準的W3C盒模型下和IE盒模型下畫素的解釋是不一樣的,這就說明一個問題,在定位的時候,如果同樣都是left:100px,那到了IE6、IE7下就可能不是left:100px,而變成left:102px了,這可了不得,是致命的缺點,所以要在left前加*,來解決這一問題。第二,我們在使用position時最關鍵的一點是,在配合其他屬性的時候一定要注意position是使用相對定位還是絕對定位,包括父元素是相對定位還是絕對定位。
以上就是我對css中position的理解。
7. css選擇器的權重和優先規則!
對於優先順序我是這麼理解的,
包括選擇器的樣式,包括呼叫樣式的一些方式的判斷,決定了樣式有一些執行次序的問題,從優先順序的角度來說的話,誰的優先順序最高呢,當然是內聯的優先順序最高,在這種情況下,比如說id class派生有其他的一些優先順序的排序方式,所以他的優先順序一般是按照這樣的排序方式來進行。當然在這個裡面,執行完優先順序以後,他還有一個權值的問題,內聯樣式的權值是1000,ID是100,class是10,標籤是1,那麼這些優先順序包括這個權值的問題,兩個結合起來,我們一般呢,在寫專案的時候也有可能是這樣的,一個元素又有id又有class或者又有一些其他的選擇方式,那麼在選中這些元素以後呢,他所有的選擇方式其實是一種結合使用的方式,這個時候就要講究優先的次序了,所以頁面中寫樣式的時候他就會前後次序清晰,不會出現樣式衝突這種現象
這就是我對樣式優先順序和權值的一個理解。
8. 內聯和!important哪個優先順序高?
我的理解是這樣的:
首先,肯定是!important優先順序高。
!important是CSS1就定義的語法,作用是提高指定樣式規則的應用優先權,。語法格式{ cssRule !important },即寫在定義的最後面,例如:box{color:red !important;}
在CSS中,透過對某一樣式宣告! important ,可以更改預設的CSS樣式優先順序規則,使該條樣式屬性宣告具有最高優先順序,也就是相當於寫在最下面。
ie7,ie8,firefox,chrome等高階瀏覽器下,已經可以識別 !important屬性, 但是IE 6.0仍然不能完全識別.!important的樣式屬性和覆蓋它的樣式屬性單獨使用時(不在一個{}裡),IE 6.0認為!important優先順序較高,否則當含!important的樣式屬性被同一個{}裡的樣式覆蓋時,IE 6.0認為!important較低!
以上就是我對這個問題的理解。
9. table標籤中border,cellpadding,td 標籤中colspan , rowspan分別起什麼作用?
我是這樣理解這個問題的:
table border:表格邊框, table-cellpadding: 單元格填充
td colspan:單元格縱向合併(列與列), table-rowspan: 單元格橫向合併(行與行)
以上就是我對這個問題的理解。
10. 實現三列布局的三種方法,具體描述?
我是這樣理解這個問題的:
(1)、絕對定位法
這或許是三種方法裡最直觀,最容易理解的:左右兩欄採用絕對定位,分別固定於頁面的左右兩側,中間的主體欄用左右margin值撐開距離。於是實現了三欄自適應佈局。
(2)、margin負值法
首先,中間的主體要使用雙層標籤。外層div寬度100%顯示,並且浮動(本例左浮動,下面所述依次為基礎),內層div為真正的主體內容,含有左右210畫素的margin值。左欄與右欄都是採用margin負值定位的,左欄左浮動,margin-left為-100%,由於前面的div寬度100%與瀏覽器,所以這裡的-100%margin值正好使左欄div定位到了頁面的左側;右側欄也是左浮動,其margin-left也是負值,大小為其本身的寬度即200畫素。
(3)自身浮動法
應用了標籤浮動跟隨的特性。左欄左浮動,右欄右浮動,主體直接放後面,就實現了自適應。
以上就是我對這個問題的理解。
11. IE與寬度和高度的問題
我是這樣理解這個問題的:
IE 不認得min-這個定義,但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了,如果只用寬度和高度,正常的瀏覽器裡這兩個值就不會變,如果只用min-width和min-height的話,IE下面根本等於沒有設定寬度和高度。
比如要設定背景圖片,這個寬度是比較重要的。要解決這個問題,可以這樣:#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
以上就是我對這個問題的理解。
12. 頁面的最小寬度
我是這樣理解這個問題的:
min -width是個非常方便的CSS命令,它可以指定元素最小也不能小於某個寬度,這樣就能保證排版一直正確。但IE不認得這個,而它實際上把width當 做最小寬度來使。為了讓這一命令在IE上也能用,可以把一個<div> 放到 <body> 標籤下,然後為div指定一個類,
以上就是我對這個問題的理解。
13. DIV浮動IE文字產生3象素的bug
我是這樣理解這個問題的:
左邊物件浮動,右邊採用外補丁的左邊距來定位,右邊物件內的文字會離左邊有3px的間距.
*html #left{ margin-right:-3px; //這句是關鍵}
以上就是我對這個問題的理解。
14. 高度不適應
我是這樣理解這個問題的:
高度不適應是當內層物件的高度發生變化時外層高度不能自動進行調節,特別是當內層物件使用margin 或padding 時。
解決方法2個:在P物件上下各加2個空的div物件CSS程式碼:.1{height:0px;overflow:hidden;}
為DIV加上border屬性。
以上就是我對這個問題的理解。
15. 如何對齊文字與文字輸入框
我是這樣理解這個問題的:
加上 vertical-align:middle;
以上就是我對這個問題的理解。
16. web標準中定義id與class有什麼區別嗎
我是這樣理解這個問題的:
id和class都是元素中的屬性,這也是每個元素都有的屬性,他們是應用的很多領域中的,第一個應用的領域是css領域,在css領域中,有id選擇器和class選擇器,id的優先順序要高於class,id選擇器是#加id,class選擇器是 . 加class,此外id的權重是100,class的權重是10,id要大於class;除了這個領域外在原生js中也是有使用的,而且使用的範圍還是很大的,一個是getElementById,一個是getElementsByClassName,而且在封裝像jQuery等其他語言中,也是有封裝類似於id、類似於class這種選擇器的,另外他們最核心的區別是用id選擇器只能選擇單個元素,而用class選擇器可以選擇多個元素,在js中,如果用class選擇的元素,往往是要遍歷元素才有效,才能在頁面渲染到這些資料,這就是他們倆之間的一些區別。所以在做專案的時候id和class我都用,但是我用的更多的是class,因為頁面上雷同的元素太多了,所以class用的更多一些。
以上就是我對這個問題的理解。
17. LI中內容超過長度後以省略號顯示的方法
我是這樣理解這個問題的:
此方法適用與IE與OP瀏覽器
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
以上就是我對這個問題的理解。
18. 為什麼web標準中IE無法設定捲軸顏色了
我是這樣理解這個問題的:
解決辦法是將body換成html
以上就是我對這個問題的理解。
19. 怎麼樣才能讓層顯示在FLASH之上呢
我是這樣理解這個問題的:
解決的辦法是給FLASH設定透明
<param name="wmode" value="transparent" />
以上就是我對這個問題的理解。
20. 怎樣使一個層垂直居中於瀏覽器中
我是這樣理解這個問題的:
要使一個層垂直居中於瀏覽器中,有4種方法
1. 行高,缺點,需要高度,只能文字
2. 定位+margin負值,缺點,需要高度
3. 彈性盒子,缺點,css3新增屬性,不太相容
4. 轉table,缺點,ie6不支援,利用table垂直居中的特性,配合vertical-align,垂直居中
5. Css+定位
以上就是我對這個問題的理解。
21. Div居中問題
我是這樣理解這個問題的:
div設定 margin-left, margin-right 為 auto 時已經居中,IE 不行,IE需要設定body居中,首先在父級元素定義text-algin: center;這個的意思就是在父級元素內的內容居中。
以上就是我對這個問題的理解。
22. 連結(a標籤)的邊框與背景
我是這樣理解這個問題的:
a 連結加邊框和背景色,需設定 display: block, 同時設定 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設定高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。
以上就是我對這個問題的理解。
23. 超連結訪問過後hover樣式就不出現的問題
我是這樣理解這個問題的:
Code:
<style type="text/css">
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>
以上就是我對這個問題的理解。
24. 遊標手指cursor
我是這樣理解這個問題的:
cursor: pointer 可以同時在 IE FF 中顯示遊標手指狀, hand 僅 IE 可以
以上就是我對這個問題的理解。
25. UL的padding與margin
我是這樣理解這個問題的:
ul標籤在FF中預設是有padding值的,而在IE中只有margin預設有值,所以先定義 ul{margin:0;padding:0;}就能解決大部分問題
以上就是我對這個問題的理解。
26. FORM標籤
我是這樣理解這個問題的:
這 個標籤在IE中,將會自動margin一些邊距,而在FF中margin則是0,因此,如果想顯示一致,所以最好在css中指定margin和 padding,針對上面兩個問題,我的css中一般首先都使用這樣的樣式ul,form{margin:0;padding:0;}給定義死了,所以後 面就不會為這個頭疼了.
以上就是我對這個問題的理解。