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中应用的代码如下：

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

flexslider插件使用体会相关推荐

jQuery FlexSlider插件一些使用上的小tips
最近做的一个需求,用到了jQuery FlexSlider这个插件,本以为一个算是已经比较成熟的插件,用起来应该没什么难度,然而真正用起来才发现,其实还是有些坑的,不过好在这个插件源代码写的比较好,比 ...
flexslider插件的各个参数说明
flexslider插件各个参数 $(window).load(function() {$('.flexslider').flexslider({namespace: 'flex-', //控件的命 ...
Vue+Element-ui实例_使用flexslider插件设计横向时间线
下面是做了一个类似时间线(history事件线)的页面,主要是记录一下log,或者history的操作记录. 主要难点: (1)一般的插件时间线例如(elementUI中的el-timeline)就是 ...
关于FlexSlider插件
Flexslider选项设置 $(window).load(function() {$('.flexslider').flexslider({animation: "fade", ...
FlexSlider 轮播图插件的详细设置参数
转自:https://www.cnblogs.com/junhaoliu/p/6084281.html FlexSlider插件的详细设置参数 Flexslider具有以下特性: 支持滑动和淡入淡出效 ...
Flexslider图片轮播、文字图片相结合滑动切换效果
Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...
关于jquery.flexslider-min.js插件
Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素. 自适应屏幕尺寸. 可控制滑动单元个数 ...
分享63个JS幻灯片代码，总有一款适合您
分享63个JS幻灯片代码,总有一款适合您 63个JS幻灯片代码下载链接:https://pan.baidu.com/s/1tWjsZD6ZiHGiXYmDOqxqgA?pwd=nwl2 提取码:nw ...
对于 Web 开发很有用的 jQuery 效果制作教程
如果你的项目中需要响应式滑块,炫丽的图片呈现,对话框提示,轻巧动画等效果,jQuery 是完美的解决方案.凭借这个快速,易用的 JavaScript 库,可以轻松处理语言之间的交互,它给人最快速的 W ...

flexslider插件使用体会

flexslider插件使用体会相关推荐

最新文章

热门文章