最近網站需要在首頁進行活動圖片輪播，并在圖片上添加鏈接。 為此我在網上搜尋了一下flexslider插件的一些常用屬性進行設置，但是在使用時出現了不大不小的問題 如下代碼所示： <li><a><img /></a></li> 確實是可以輪播圖片和實現點擊圖片進行鏈接跳轉 但是，圖片比起正常的位置右移太多，并且左邊圖片進行平鋪操作，看起來特別的不舒服。 而若是將圖片放在<li>中當背景圖片則位置正確，但是無法將<a>標簽套在<li>之外進行圖片輪播， 最后的解決辦法是： 在 <li>標簽里邊套一個<a>標簽，然后在<a>標簽里面套一個和圖片一樣大的<div>標簽即可

形如：

<li><a><div style="width:100%;height:100%"></div></a></li>

雖然會報一個警告，說標簽不能這樣使用，但是實際效果還是可以的。這是一個簡單粗暴的方法，慎用哦。。 在這里介紹一個不用插件實現圖片輪播的方法：

下面為css樣式：

.full-screen-slides { width: 100%; height: 480px; position:relative; z-index: 1;} .full-screen-slides li {min-width:1240px; width: 100%; height:100%; position: absolute; z-index: 1; top: 0; left: 0;} .full-screen-slides li a { display: block; width:776px;height:270px; text-indent:-9999px; margin-left: -388px; position:absolute; z-index: 2; left: 50%;} .full-screen-slides-pagination{ font-size: 0;*word-spacing:-1px; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#33FFFFFF',endColorstr='#33FFFFFF'); background: rgba(255,255,255,0.2);text-align: right; display:block; list-style:none; width: 760px;height: 6px; padding:7px 8px ; margin-left: -388px;position:absolute; left:50%; top: 280px; z-index: 9;} .full-screen-slides-pagination li { vertical-align: top;letter-spacing: normal; word-spacing: normal; display:inline-block; *display:inline; list-style:none; width:24px;height:6px; margin-left:4px;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#3F000000',endColorstr='#3F000000');background:rgba(0,0,0,0.25);?overflow: hidden; cursor: pointer;*zoom:1;} .full-screen-slides-pagination a { display: block; width:100%;height:100%; padding:0; margin:0; text-indent:-9999px;} .full-screen-slides-pagination .current { background:#F30;}

如圖：

在html中應用的代碼如下：

這樣圖片輪播就實現了，，底部也有導航小方塊。顯示如圖：

總結

以上是生活随笔為你收集整理的flexslider插件使用体会的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。