专栏首页angularejs学习篇jQuery 图片轮播的代码分离

jQuery 图片轮播的代码分离

以前遇到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号。

html代码,以及对应的css代码:

<div id="scrollPics">
    <ul class="slider" >
        <li><img src="images/ads/1.gif"/></li>
        <li><img src="images/ads/2.gif"/></li>
        <li><img src="images/ads/3.gif"/></li>
        <li><img src="images/ads/4.gif"/></li>
        <li><img src="images/ads/5.gif"/></li>
    </ul>
    <ul class="num" >
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

css代码:

#scrollPics{
    height: 150px;
    width: 100%;
    margin-bottom: 10px;
    overflow: hidden;
    position:relative;
}
.num{
    position:absolute;
    right:5px;
    bottom:5px;
}
#scrollPics .num li{
    float: left;
    color: #FF7300;
    text-align: center;
    line-height: 16px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    overflow: hidden;
    margin: 3px 1px;
    border: 1px solid #FF7300;
    background-color: #fff;
}
#scrollPics .num li.on{
    color: #fff;
    line-height: 21px;
    width: 21px;
    height: 21px;
    font-size: 16px;
    margin: 0 1px;
    border: 0;
    background-color: #FF7300;
    font-weight: bold;
}

用绝对定位设置列表 num 的位置,对 li 设置相关样式,on 表示显示图片对应的数字列表中 li 的样式类别。

js 代码:

//滚动广告
    var len = $(".num > li").length;
    var index = 0;  //图片序号
    var adTimer;
    $(".num li").mouseover(function() {
        index = $(".num li").index(this);  //获取鼠标悬浮 li 的index
        showImg(index);
    }).eq(0).mouseover();
    //滑入停止动画,滑出开始动画.
    $('#scrollPics').hover(function() {
        clearInterval(adTimer);
    }, function() {
        adTimer = setInterval(function() {
            showImg(index)
            index++;
            if (index == len) {       //最后一张图片之后,转到第一张
                index = 0;
            }
        }, 3000);
    }).trigger("mouseleave");

    function showImg(index) {
        var adHeight = $("#scrollPics>ul>li:first").height();
        $(".slider").stop(true, false).animate({
            "marginTop": -adHeight * index + "px"    //改变 marginTop 属性的值达到轮播的效果
        }, 1000);
        $(".num li").removeClass("on")
            .eq(index).addClass("on");
    }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于c#中委托使用小结

      委托对与我们编程人员来说,一点都不陌生,在实际工作过程中,或多或少都应该是接触过

    小小许
  • 一款很不错的FLASH时种插件

    小小许
  • 我叫Mongo,干了「索引探索篇」提升我的效率,值得您拥有

      Mongodb的索引和其它关系型数据库索引很类似,索引是一个存储结构,其存储的内容是数据文档持久化的位置信息。一个数据集合和一本书来对比,那么索引就是书对应...

    小小许
  • 一篇文章教会你如何制做精美导航条

    让更多的人去学习html,以广东科技学院的导航栏为例, 教大家怎么去做一个横向的导航栏。

    前端皮皮
  • css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

    左侧nav栏目,要固定也要用fixed。不过固定定位的元素要想高度百分百,可以使用top+bottom对应方位值的拉伸效果:

    xing.org1^
  • 码仔和码妞用19种语言,祝大家中秋快乐

    又到了一年一度的中秋佳节,有的已经和家人团聚;有的还在团聚的路上;亦或者你还在为梦想奋斗的远方,只能与家人千里共婵娟。

    陈宇明
  • vue2.0和better-scroll实现左右联动效果

    在做移动端商城或者其他页面的时候,经常会遇到左右联动的效果,今天小编vue2.0和better-scroll这个插件一起实现左右联动效果。

    小周sri的码农
  • 【Pygame 第10课】 命中目标

    现在,我们的“打飞机”游戏已经到了万事俱备只欠东风的阶段:有了子弹也有了敌机,但它们之间还没有办法擦出火花。这节课的内容就是让玩家可以真正的“打”飞机。 我们判...

    Crossin先生
  • 你可能不知道的 JS 特性:可选链

    今天我们来介绍一个你可能没见过的 JS 新特性,目前处于 Stage 3 阶段,它叫作 可选链(optional chaining),它可能解决很多人都面对过的...

    savokiss
  • 【译】Javascript中你需要知道的最出色的新特性:Optional Chaining

    对于使用Javascript的每个人来说,可选链(Optional chaining)是游戏的规则的改变者。它与箭头函数或let和const一样重要。我们讨论下...

    嘉明

扫码关注云+社区

领取腾讯云代金券