一款基于jQuery多图切换焦点图插件

这次要给大家分享的也是一款jQuery图片滑块插件，之前有介绍过不少实用的jQuery焦点图插件和jQuery图片滑块插件，比如jQuery左侧Tab切换的图片滑块插件。它的特点是可以同时切换多张图片，并且每屏都有缩略图，点击缩略图也可切换图片。

在线预览源码下载

实现的代码。

html代码：

  <div id="owl-demo" class="owl-carousel">

        <div class="itme">

            <ul>

                <li class="li1"><a href="#">

                    <img src="img/a1.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">阿根廷备战 队友倒地引梅西大笑</a></h3>

                        <p>

                            北京时间6月13日，阿根廷队训练备战，众将心情轻松，训练中，队友摔倒引梅西大笑。</p>

                    </div>

                </li>

                <li class="li2"><a href="#">

                    <img src="img/b1.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">葡萄牙备战 C罗情绪激动对队友指手画脚</a></h3>

                    </div>

                </li>

                <li class="li3"><a href="#">

                    <img src="img/c1.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">鲁尼投入训练不敢怠慢</a></h3>

                    </div>

                </li>

                <li class="li3"><a href="#">

                    <img src="img/c2.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">巴神备战炫酷墨镜拉风</a></h3>

                    </div>

                </li>

            </ul>

        </div>

        <div class="itme">

            <ul>

                <li class="li1"><a href="#">

                    <img src="img/a2.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">荷兰5-1血洗西班牙 罗本范佩西梅开二度</a></h3>

                        <p>

                            6月14日凌晨，西班牙队迎战荷兰队，荷兰5-1逆转获胜。范佩西罗本梅开二度，德弗里头球破门。</p>

                    </div>

                </li>

                <li class="li2"><a href="#">

                    <img src="img/b2.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">西荷大战 橙衣球迷＂巨胸＂造型抢镜</a></h3>

                    </div>

                </li>

                <li class="li3"><a href="#">

                    <img src="img/c3.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">哈维重演卡纳瓦罗悲剧</a></h3>

                    </div>

                </li>

                <li class="li3"><a href="#">

                    <img src="img/c4.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">科比观西荷战疑似爆粗</a></h3>

                    </div>

                </li>

            </ul>

        </div>

        <div class="itme">

            <ul>

                <li class="li1"><a href="#">

                    <img src="img/a3.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">两度献唱世界杯的洛佩兹 身材惊呆小贝</a></h3>

                        <p>

                            1994年曾为美国世界杯献声，2014年以出位着装现场演唱巴西世界杯主题曲。</p>

                    </div>

                </li>

                <li class="li2"><a href="#">

                    <img src="img/b3.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">世界杯女主播太太团 斯内德妻子小三逆袭</a></h3>

                    </div>

                </li>

                <li class="li3"><a href="#">

                    <img src="img/c5.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">英格兰太太团声名狼藉</a></h3>

                    </div>

                </li>

                <li class="li3"><a href="#">

                    <img src="img/c6.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">本田德罗巴领衔型男PK</a></h3>

                    </div>

                </li>

            </ul>

        </div>

        <div class="itme">

            <ul>

                <li class="li1"><a href="#">

                    <img src="img/a4.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">日本混血名模私房写真助威蓝武士</a></h3>

                        <p>

                            日本-加拿大混血名模maggy为《GQ》杂志拍摄私房写真，爱好体育的她曾采访过香川真司。</p>

                    </div>

                </li>

                <li class="li2"><a href="#">

                    <img src="img/b4.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">比利时小姐举行内衣足球赛 应景世界杯</a></h3>

                    </div>

                </li>

                <li class="li3"><a href="#">

                    <img src="img/c7.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">GQ里约最性感海滩特辑</a></h3>

                    </div>

                </li>

                <li class="li3"><a href="#">

                    <img src="img/c8.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">央五女主播扮足球宝贝</a></h3>

                    </div>

                </li>

            </ul>

        </div>

        <div class="itme">

            <ul>

                <li class="li1"><a href="#">

                    <img src="img/a5.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">空姐变身足球宝贝 万米高空造势世界杯</a></h3>

                        <p>

                            中国云南某航空公司航班上，空姐穿着巴西队服为旅客服务。</p>

                    </div>

                </li>

                <li class="li2"><a href="#">

                    <img src="img/b5.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">孔卡美女翻译与乳神合影 气场丝毫不逊</a></h3>

                    </div>

                </li>

                <li class="li3"><a href="#">

                    <img src="img/c9.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">泳装美女大玩水上足球</a></h3>

                    </div>

                </li>

                <li class="li3"><a href="#">

                    <img src="img/c10.jpg" alt=""></a>

                    <div class="txt">

                        <h3>

                            <a href="#">TVB美女主播看台抢镜</a></h3>

                    </div>

                </li>

            </ul>

        </div>

    </div>

css3代码：

*{margin:;padding:;list-style-type:none;}

#owl-demo img{border:0 none;}

#owl-demo{position:relative;width:1200px;height:410px;padding-bottom:100px;margin:40px auto 0 auto;}

#owl-demo ul{margin:-10px -10px 0 0;overflow:hidden;zoom:;}

#owl-demo li{position:relative;float:left;margin:10px 10px 0 0;overflow:hidden;_display:inline;}

#owl-demo .li1{width:660px;height:410px;}

#owl-demo .li2{width:530px;height:230px;}

#owl-demo .li3{width:260px;height:170px;}

#owl-demo .txt{position:absolute;left:;bottom:-86px;_bottom:-1px;width:100%;padding:6px 0;font-size:12px;color:#fff;background:url(images/overlay.png);background:rgba(0, 0, 0, .7);transition:bottom 0.3s ease-out 0s;}

#owl-demo h3{padding:0 15px;font-family:"Microsoft Yahei";font-size:18px;font-weight:;}

#owl-demo .li1 .txt{bottom:;}

#owl-demo .li1 h3{padding:0 25px;font-size:28px;}

#owl-demo p{margin-top:4px;padding:0 25px 5px;}

#owl-demo a{color:#fff;text-decoration:none;}

#owl-demo li:hover .txt{bottom:;}

/* 缩略图 */

.owl-pagination{position:absolute;left:;bottom:;width:100%;height:80px;text-align:center;}

.owl-page{position:relative;display:inline-block;width:45px;height:45px;margin:0 5px;border-radius:80px;*background-image:url(images/bg15.png);*display:inline;*zoom:;vertical-align:middle;overflow:hidden;}

.owl-page img{width:100%;height:100%;border-radius:80px;}

.owl-pagination .active{width:80px;height:80px;}

.owl-pagination span{position:absolute;left:;top:;width:45px;height:45px;*background-image:url(images/ico_clip_s.png);_background-image:none;}

.owl-pagination .active span{width:80px;height:80px;background-image:url(images/ico_clip.png);_background-image:none;}

/* 左右箭头 */

.owl-buttons div{position:absolute;top:50%;width:52px;height:81px;margin-top:-90px;text-indent:-9999px;background-image:url(images/arrow.png);transition:background-position 0.2s ease-out 0s;}

.owl-prev{left:-60px;background-position:0 0;}

.owl-next{right:-60px;background-position:right 0;}

.owl-prev:hover{background-position:-53px 0;}

.owl-next:hover{background-position:-122px 0;}

js代码：

  $(function () {

            $('#owl-demo').owlCarousel({

                items: 1,

                navigation: true,

                navigationText: ["上一个", "下一个"],

                autoPlay: true,

                stopOnHover: true,

                afterInit: function () {

                    var $t = $('.owl-pagination span');

                    $t.each(function (i) {

                        $(this).before('<img src="img/t' + (i + 1) + '.jpg">');

                    })

                }

            });

        });

via:http://www.w2bc.com/Article/18953

一款基于jQuery多图切换焦点图插件的更多相关文章

基于jQuery果冻式按钮焦点图切换代码
基于jQuery果冻式按钮焦点图切换代码.这是一款基于jQuery+CSS3实现的图片切换代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=&quo ...
一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
一款基于jQuery的热点新闻Tab选项卡插件
今天要分享的jQuery焦点图插件非常适合展示热点新闻,之前我们分享过好多基于jQuery的焦点图插件,效果都还很不错.它可以在图片上方展示文字标题,并且焦点图的切换按钮时tab风格的,图片切换也十分 ...
一款基于jQuery的图片分组切换焦点图插件
这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实 ...
10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
基于jQuery左右滑动切换图片代码
分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览源码下载实现的代码: <div class="v_ou ...
基于js全屏动画焦点图幻灯片
今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="sl ...
一款基于jQuery外观优雅带遮罩弹出层对话框
今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...
基于jQuery点击图像居中放大插件Zoom
分享一款基于jQuery点击图像居中放大插件Zoom是一款放大的时候会从原图像的位置以动画方式放大到画面中间,支持点击图像或者按ESC键来关闭效果.效果图如下: 在线预览源码下载实现的代码. ...

随机推荐

proguard 混淆android代码
官网 http://proguard.sourceforge.net/#manual/examples.html android 2.3后,新建的project默认就有一个project.proper ...
linux下设置SSH无密码登陆
SSH配置主机cloudgis22.edu.cn:192.168.3.21 主机cloudgis33.edu.cn:192.168.2.174 假设需要配置主机A无密码登录主机A,主机B,先确保所有 ...
去掉StringBuilder或String 最后一个项逗号
一. sb.Length = sb.Length - 1; 二. stringBuilder.Remove(stringBuilder.ToString().LastIndexOf(','), 1); ...
create_project.py报错问题,建议用回python2.7
d:\DevTool\cocos2d-x-2.2.2\cocos2d-x-2.2.2\tools\project-creator\create_project.py 报错 d:\DevTool\coc ...
EIGRP默认路由分发的四种方法
方式一:重发布静态 R2(config)#ip route 0.0.0.0 0.0.0.0 s1/1 R2(config)#router eig 10 R2(config-router)#redist ...
HTML5-企业宣传6款免费源码
本文主要分享了6个很不错的HTML5宣传模板源码,这些生动具体的介绍了各个公司的产品及公司各类应用,有汽车.旅游.公司,房产等Query特效,大家一起来欣赏吧. 一.九秒教育企业海报(移动端)这次要分 ...
Mac生存手册
最近刚从Linux转到了Mac系统上,感觉好的地方是再也不折腾了,什么GNOME, KDE, XFCE,各种发行版本都远离我而去了.当然Mac下很多好软件都是要付费的,我只能绕着走了: 1. 命令行, ...
测试rest接口的两个工具使用详解（restclient+soapUI）
http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/31/3110764.html http://www.oschina.net/news/618 ...
chrome 41 空格  
chrome 41对半角空格的解析当做一个汉字宽度来处理了. 导致很多网站出现异常. 目前能想到的方法是删掉用来规范格式的空格. 老版chrome chrome41 和讯网也有这种问题有更好的处理 ...
mvc web api 保存多个实体类的方法
先说一下我的业务需求,挺简单的. 就是在设计角色和权限的页面中,需要一个角色对应多条权限记录,那么在保存的时候,我的处理方式是,先删除该角色的所有权限,然后再保存所有的权限. 这样的话问题就来了,用默 ...

一款基于jQuery多图切换焦点图插件

一款基于jQuery多图切换焦点图插件的更多相关文章

随机推荐

热门专题