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 条评论
登录 后参与评论

相关文章

来自专栏分享达人秀

两分钟掌握FrameLayout帧布局

前面学习了线性布局、相对布局、表格布局,那么本期来学习第四种布局——FrameLayout帧布局。 一、认识FrameLayout 帧布局是An...

2409
来自专栏水击三千

android 补间动画

android开发过程中,为了更好的展示应用程序,应用程序添加动画,能够很好地实现这个功能。如果动画中的图像变化有一定的规律,可以采用自动生成图像的方式来生成动...

26410
来自专栏一个爱瞎折腾的程序猿

自定义滚动条样式(layui.v1)

5851
来自专栏互联网开发者交流社区

HTML超文本标记语言-基础标签整理

2884
来自专栏陈仁松博客

UWP基础教程 - RelativePanel

在Windows10 UWP开发中,新增和改变了很多特性,这次给大家介绍下RelativePanel,这个控件其实和RelativeLayout基本一种使用方式...

3555
来自专栏前端知识分享

第165天:canvas绘制圆环旋转动画

2213
来自专栏calmound

CSS格式化排版

 用CSS样式为网页中的文字设置字体,字号,颜色等属性 字体:      body{font-family:"Microsoft Yahei"} 字号,颜色: ...

29910
来自专栏JavaEdge

CSS 全解析实战(三)-CSS 基础1 选择器(1)背景非布局样式(边框)非布局样式(滚动)非布局样式(文本折行)非布局样式(装饰性属性)hack和案例(1)hack和案例(2)面试题

621
来自专栏Spring相关

UI设计-详解四种布局

LinearLayout又称为线性布局,是一种非常常用的布局.这个布局会将它所包含的控件在线性方向上依次排列.

1652
来自专栏九彩拼盘的叨叨叨

移动端页面使用rem来做适配

rem(font size of the root element)是指相对于根元素(即html元素)的字体大小的单位。 假设根元素的字体大小是10px, 则...

1293

扫码关注云+社区

领取腾讯云代金券