slides.jquery.js快速实现轮播图效果

编程语言 2018-10-09 20:09:52 阅读次数: 0

最近在做项目的时候，发现了这款插件slides.jquery.js，操作起来非常简单，不用自己去敲js代码，只需要简单配置几个属性就可以实现幻灯片轮播了。

使用例子：

tips:这个例子不做过多样式的修饰，只为了让你们可以快速了解它的使用方法，例子下面我会再写一个好看的轮播图实例哒！

<head>
      <!--下载jq和slides.jquery.js并引入-->
	<script src="jquery-1.2.6.min.js"></script>    
    <script src="slides.jquery.js"></script>
</head>
<div id="slides">
    <div class="slides_container">
        <div style="background-color: red"></div>
        <div style="background-color: yellow"></div>
        <div style="background-color: green"></div>
        <div style="background-color: blue"></div>
    </div>
</div>

 .slides_container {
      width: 670px;
      height: 370px;
}

.slides_container div {
       width: 670px;
       height: 370px;
       display: block;
}

.prev{
       margin-right: 10px;
}

 $(function () {
     $("#slides").slides({
          container: 'slides_container', /*设置放置图片层的顶级div  样式名称*/
          generateNextPrev: true, /*是否自动生成 上一个  下一个 按钮*/
          generatePagination: true, /*是否自动生成分页导航层*/
          next: 'next',  /*自动生成的下一个按钮 样式名称*/
          prev:'prev',  /*自动生成的上一个按钮 样式名称*/
          play: 2000,
          pause: 2000,
          effect: "fade",
          currentClass: 'current',   /*设置分页导航层中 当前分页项目的样式名称*/
          paginationClass:'page',   /*设置分页导航层的 样式名称*/
    });
});

效果图如下：
在这里插入图片描述

实例

经测试，可正确显示，图片和一些图标你们可以替换成自己的哈。ps:我分页的图标是设计在一张图片上，然后进行定位显示我想要的那一部分的，你们那里可以按照自己习惯来，如果用多张的就修改一下样式就行了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script src="jquery-1.2.6.min.js"></script>
    <script src="slides.jquery.js"></script>
</head>
<body>
  <div id="banner-box">
    <div class="banner-nav banner-nav-abs">
        <div class="banner-inner png">
            <ul>
                <li>
                    <div></div>
                    <a href="javascript:;" class="bg1"><span class="png"></span>文字文字文字</a>
                </li>
                <li>
                    <div></div>
                    <a href="javascript:;" class="bg2"><span class="png"></span>文字文字文字</a>
                </li>
                <li>
                    <div></div>
                    <a href="javascript:;" class="bg3"><span class="png"></span>文字文字文字</a>
                </li>
                <li>
                    <div></div>
                    <a href="javascript:;" class="bg4"><span class="png"></span>文字文字文字</a>
                </li>
                <li>
                    <div></div>
                    <a href="javascript:;" class="bg5"><span class="png"></span>文字文字文字</a>
                </li>
                <li>
                    <div></div>
                    <a href="javascript:;" class="bg6"><span class="png"></span>文字文字文字</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="banner-list">
        <!--活动-->
        <li style="background: url(img/9df786c8988a28d2a2f9e2f807b0898e.jpg) ;">
            <div class="animate-box png">
                <div class="t-d">
                    <h2>文字</h2><br/>
                    <p>
                        文字文字文字文字文字文字
                        <br/>
                        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    </p>
                    <p>
                        <a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多
                            >></a>
                    </p>
                </div>
                <div class="animate-img"><img src="img/a777b23736b812414d59e18810923b54.png" alt="营销型PHPCMS建站系统"></div>
            </div>
        </li>
        <li style="background: url(img/636ac37125119d607b3d09c1de0d42d1.png) ;">
            <div class="animate-box png">
                <div class="t-d">
                    <h2>文字</h2><br/>
                    <p>
                        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                        <br/>
                        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    </p>
                    <p>
                        <a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多
                            >></a>
                    </p>
                </div>
                <div class="animate-img"><img src="img/3c0fa7f92161942b2ae01eee3fa4a606.png" alt="提升企业效率的管理软件">
                </div>
            </div>
        </li>
        <li style="background: url(img/e293a9de67ac76b9e3935e29746017f3.jpg) ;">
            <div class="animate-box png">
                <div class="t-d">
                    <h2>文字</h2><br/>
                    <p>
                        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                        <br/>
                        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    </p>
                    <p>
                        <a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多
                            >></a>
                    </p>
                </div>
                <div class="animate-img"><img src="img/7234cc1cde26b5706851778da4c2abaf.png" alt="互联网产品和企业管理咨询">
                </div>
            </div>
        </li>
        <li style="background: url(img/988cd5140fc8f79336a245f6049f1af9.jpg) ;">
            <div class="animate-box png">
                <div class="t-d">
                    <h2>文字</h2><br/>
                    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                        <br/>
                        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    </p>
                    <p>
                        <a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多
                            >></a>
                    </p>
                </div>
                <div class="animate-img"><img src="img/5cad388a23c06f1107e50da1721e810b.png" alt="大数据高并发的系统解决方案"></div>
            </div>
        </li>
        <li style="background: url(img/3915643fd2db78f09ff0b2d543b83a38.jpg) ;">
            <div class="animate-box png">
                <div class="t-d">
                    <h2>文字</h2>
                    <p><br/> 文字文字文字文字文字文字文字文字文字文字字文字文字文字
                        <br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                        <br/> 文字文字文字文字文字文字文字文字文字文字文文字文字文字
                        <br/>文字文字文字文字文字文字文字文字文字文字文字文字文字文
                        <br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
                        <br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
                    </p>
                    <p>
                        <a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多
                            >></a>
                    </p>
                </div>
                <div class="animate-img"><img src="img/4e1ecdad7b77b2adb51a9e190322c632.png" alt="平台网站建设"></div>
            </div>
        </li>
        <li style="background: url(img/8d2483d87745aaa88e2a6dd887b8371c.jpg) ;">
            <div class="animate-box png">
                <div class="t-d">
                    <h2>文字</h2>
                    <p><br/> 文字文字文字文字文字文字文字文字文字文字字文字文字文字
                        <br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                        <br/> 文字文字文字文字文字文字文字文字文字文字文文字文字文字
                        <br/>文字文字文字文字文字文字文字文字文字文字文字文字文字文
                        <br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
                        <br/> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
                    </p>
                    <p>
                        <a href="JavaScript:void(0)" onclick="alert('正在设计中')" target="_blank" class="slider-btn png">了解更多
                            >></a>
                    </p>
                </div>
                <div class="animate-img"><img src="img/46a85e97bb0745ffa4b9c3a4e9089d03.png" alt="电商网站建设"></div>
            </div>
        </li>
    </div>
  </div>
 </body>
</html>

@charset "utf-8";

body {
    font-family: "寰蒋闆呴粦";
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    color: #333;
    line-height: 24px;
    height: auto;
    clear: both;
    min-width: 1200px;
}

img {
    border: 0px;
}

ul,
li {
    list-style: none;
}

em,
i {
    font-style: normal;
}

a {
    text-decoration: none;
    color: #333;
    outline: none;
}

a:hover {
    background-repeat: no-repeat;
    color: #03a5e3;
}

.clear {
    clear: both;
    line-height: 0;
    height: 0;
    font-size: 0;
}

a,
area {
    blr: expression(this.onFocus=this.blur())
}

.clearfix::before, .clearfix::after {
    display: table;
    line-height: 0;
    content: "";
}

.m-t-35 {
    margin-top: 35px;
}


#banner-box {
    margin: 0px auto;
    /*    height: 500px;*/
    overflow: hidden;
    position: relative;
    padding-top: -40px;
}

.banner-inner {
    height: 65px;
    margin: 0px auto
}

.banner-nav-abs {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 3;
    min-width: 1200px;
}

.banner-nav-abs-opac {
    position: absolute;
    width: 100%;
    height: 78px;
    left: 0px;
    bottom: -22px;
    z-index: 2
}

.banner-nav-fix {
    position: fixed;
    left: 0px;
    top: 82px;
    z-index: 3
}

.banner-nav {
    width: 100%
}

.banner-nav ul {
    width: 1200px;
    margin: 0px auto
}

.banner-nav li {
    float: left;
    display: inline;
    width: 112px;
    height: 65px;
    font-size: 14px;
    padding: 5px 43px 0px 43px;
    cursor: pointer;
    position: relative;
    margin: 0px 1px
}

.banner-nav li div {
    width: 110px;
    height: 65px;
    padding: 5px 43px 0px 43px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 5;
    background: #fff;
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    -khtml-opacity: 0.2;
    opacity: 0.2
}

.banner-nav li a span {
    display: block;
    height: 36px;
    width: 60px;
    margin: 3px auto 0px auto;
    background: url(img/icon-banner.png) no-repeat;
}

.banner-nav li a.bg1 span {
    background-position: 15px 2px
}

.banner-nav li a.bg2 span {
    background-position: -53px 2px
}

.banner-nav li a.bg3 span {
    background-position: -110px 2px
}

.banner-nav li a.bg4 span {
    background-position: -174px 2px
}

.banner-nav li a.bg5 span {
    background-position: -235px 2px
}

.banner-nav li a.bg6 span {
    background-position: -297px 2px
}

.banner-nav li a {
    display: block;
    float: left;
    position: absolute;
    left: 0px;
    top: 0px;
    color: #fff;
    z-index: 6;
    padding: 5px 43px 0px 43px;
    display: inline;
    width: 110px;
    height: 65px;
    padding-top: 5px;
    text-align: center
}

.banner-nav li.current {
    cursor: default
}

.banner-nav li.current div {
    width: 95px;
    height: 95px;
    background: none;
}

.banner-nav li.current a {
    color: #333;
    cursor: default;
    background: #eee;
}

.banner-nav li.current a.bg1 span {
    background-position: 15px -32px
}

.banner-nav li.current a.bg2 span {
    background-position: -53px -32px
}

.banner-nav li.current a.bg3 span {
    background-position: -110px -32px
}

.banner-nav li.current a.bg4 span {
    background-position: -174px -32px
}

.banner-nav li.current a.bg5 span {
    background-position: -235px -32px
}

.banner-nav li.current a.bg6 span {
    background-position: -297px -32px
}

.banner-list {
    position: absolute;
    height: 500px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
    width: 100%
}

.banner-list li {
    width: 100%;
    height: 500px;
    text-align: center;
    float: left;
    display: inline-block
}

.banner-list li .animate-box {
    width: 1200px;
    margin: 0px auto;
    position: relative
}

.banner-list li .animate-box .t-d {
    position: absolute;
    width: 420px;
    left: 20px;
    top: 100px
}

.banner-list li .animate-box .t-d h2 {
    display: block;
    margin: 0px;
    padding: 0px;
    font-size: 30px;
    text-align: left;
    color: #fff
}

.banner-list li .animate-box .t-d p {
    color: #fff;
    padding: 10px 0px 0 0;
    line-height: 28px;
    left: 20px;
    text-align: left;
    font-size: 14px;
}

.banner-list li .animate-box .animate-img {
    position: absolute;
    top: 50px;
    right: 0px
}

.slider-btn {
    width: 100px;
    height: 30px;
    background: #fff;
    border-radius: 4px;
    -moz-border-radius: 4px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    color: #444;
    display: block;
    font-family: "宋体";
}

.slider-btn:hover {
    color: #fff;
    background: #c80106;
}


    $(function () {
        $(".banner-list li").width($(window).width());
        $('#banner-box').slides({
            generateNextPrev: false, /*是否自动生成 上一个  下一个 按钮*/
            generatePagination: false, /*是否自动生成分页导航层*/
            paginationClass: "banner-nav", /*设置分页导航层的 样式名称*/
            container: 'banner-list', /*设置放置图片层的顶级div  样式名称*/
            play: 10000,
            pause: 6000,
            effect: "fade",
            slideEasing: "easeInOutQuart",
            slidesLoaded: function () {
            },
            animationStart: function (current) {
                $('.t-d').animate({
                    top: 100, left: 0
                });
                $('.animate-img').animate({top: 50, right: 0});

            },
            animationComplete: function (current) {
                $('.t-d').animate({top: 100, left: 20});
                $('.animate-img').animate({top: 50, right: 50});
            }
        });
    });

效果图如下：
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/Ariel_201311/article/details/82910469
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022