flexslider插件使用体会

最近网站需要在首页进行活动图片轮播，并在图片上添加链接。

为此我在网上搜寻了一下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中应用的代码如下：

这样图片轮播就实现了，，底部也有导航小方块。显示如图：