一款基于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键来关闭效果.效果图如下: 在线预览源码下载实现的代码. ...

随机推荐

AWS Summit 2014 San Francisco站总结
我上个月去San Francisco参加了AWS Summit 2014 会议,总结一下参加这个会议的情况. 什么是AWS Summit? AWS Summit 是AWS在全球各地举办的,针对AWS用 ...
Codeforces Educational Codeforces Round 15 D. Road to Post Office
D. Road to Post Office time limit per test 1 second memory limit per test 256 megabytes input standa ...
C 基于socket实现简单的文件传输
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAicAAAA5CAIAAABicRxIAAAgAElEQVR4nOy9Z5NVV5om+rzL773POW
[翻译]创建ASP.NET WebApi RESTful 服务（10）
通过URI实现版本管理另一种实现版本管理的方式就是通过URI来进行处理,类似于http://localhost:{your_port}/api/v1/students/.这种方式的好处是使用者可以清 ...
HDU 2897 邂逅明下（简单博弈，找规律）
邂逅明下 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
poj 2594 Treasure Exploration(最小路径覆盖+闭包传递)
http://poj.org/problem?id=2594 Treasure Exploration Time Limit: 6000MS Memory Limit: 65536K Total ...
all & any
def all(*args, **kwargs): """ Return True if bool(x) is True for all values x in the ...
POJ3253Fence Repair（优先队列或单调队列）
http://poj.org/problem?id=3253 经典题目了,大意是说如果要切断一个长度为a的木条需要花费代价a, 问要切出要求的n个木条所需的最小代价. 无论是以下哪种方法,最原始的思路 ...
WSARecv()
简述:从一个套接口接收数据. #include <winsock2.h> int WSAAPI WSARecv ( SOCKET s, LPWSABUF lpBuffers, DWORD ...
android 拨打电话小功能
1.其实就是对Intent 的ACTION进行参数设置. 在manifest中药设置打电话的权限: <uses-permission android:name="android.per ...

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

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

随机推荐

热门专题