jQuery+Owl Carousel仿百度百科2014图片轮播

收藏

今天无意看了百度百科页，幻灯片效果不错。就用 Owl Carousel 来制作这个轮播效果了。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

owlCarousel有以下优势：

• 文件小。Css+js不到10k，压缩之后。
• 支持触屏。经过测试，在android手机的主流浏览器：QQ、百度、UC、微信内置浏览器等支持
• 响应式设计。支持不用屏幕、触屏。支持div、图片等。支持全部显示、单个显示
• 简洁代码，使用方便

HTML

首先我们在每个.item加入标题、描述和图片。

<div class="erdangjiade-outer">
    <div id="erdangjiade" class="owl-carousel">
        <div class="item">
            <img src="images/1.jpg" alt="">
            <div class="shd">
                <a href="###">
                </a>
            </div>
            <div class="txt">
                <h3>
                    <a href="###">
                        港版iPhone 6发布
                    </a>
                </h3>
                <p>
                    苹果在2014年9月推出的新产品，4.7寸的iPhone6和5.5寸的iPhone 6 Plus携新广告文案“Bigger than Bigger”正式亮相。
                </p>
            </div>
        </div>
        <div class="item">
            <img src="images/2.jpg" alt="">
            <div class="shd">
                <a href="###">
                </a>
            </div>
            <div class="txt">
                <h3>
                    <a href="###">
                        500万Gmail用户名密码泄露
                    </a>
                </h3>
                <p>
                    据美国CNN 9月10日报道，近500万个Gmail用户的账号密码被黑客发布到了俄罗斯的一个比特币论坛上。
                </p>
            </div>
        </div>
        <div class="item">
            <img src="images/3.jpg" alt="">
            <div class="shd">
                <a href="###">
                </a>
            </div>
            <div class="txt">
                <h3>
                    <a href="###">
                        柳宗元铜像被拆除
                    </a>
                </h3>
                <p>
                    广西柳州投资7000万元修建柳宗元像，将成为国内最高的人物铜像，但由于资金不到位，仅完成底座和核心柱子就被拆除。
                </p>
            </div>
        </div>
    </div>
</div>

接着引入jquery.js和owl.carousel.min.js

<script type="text/javascript" src="jquery.js"></script> 
<script src="js/owl.carousel.min.js"></script>

owlCarousel调用：

$(function() {
    $('#erdangjiade').owlCarousel({
        items: 4,
        navigation: true,
        navigationText: ["", ""],
        scrollPerPage: true
    });
});

提示：盒子阴影（box-shadow）和背景 rgba 颜色用于“高亮”；左右箭头使用的是 :before 插入字符，由于 IE6、IE7 不支持，所以索性就隐藏了（_display: none;），当然，你也可以使用图片。