当前位置:主页 > jquery教程 > jQuery图片轮播的具体实现

jQuery实现图片轮播的实例代码讲解

发布:2020-01-17 08:58:33 133


给网友朋友们带来一篇jQuery实例相关的编程文章,网友宦天音根据主题投稿了本篇教程内容,涉及到jQuery、图片轮播、jQuery图片轮播的具体实现相关内容,已被409网友关注,内容中涉及的知识点可以在下方直接下载获取。

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>

 

#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");
    }

 


参考资料

相关文章

  • jQuery animate easing使用实例方法

    发布:2019-12-12

    这篇文章主要介绍了jQuery animate easing使用方法详解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下


  • jquery幻灯片效果实例代码

    发布:2019-12-06

    jquery特效中的幻灯片想必大家已不陌生吧,下面为大家分享个比较不错的幻灯片效果,附有源码,感兴趣的朋友可以学习下哈


  • 基于jquery实现的tab选项卡功能示例【附源码下载】

    基于jquery实现的tab选项卡功能示例【附源码下载】

    发布:2022-07-07

    给大家整理一篇关于jquery的教程,这篇文章主要介绍了基于jquery实现的tab选项卡功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,并附带源码下载,需要的朋友可以参考下


  • jQuery用HighCharts绘制2D金字塔图的代码分享

    发布:2021-05-26

    这篇文章主要介绍了jQuery插件HighCharts绘制2D金字塔图效果,结合实例形式分析了jQuery使用HighCharts插件绘制金字塔图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以


  • jQuery实现为动态添加的元素绑定事件示例效果

    发布:2020-02-12

    这篇文章主要介绍了jQuery实现为动态添加的元素绑定事件,结合实例形式分析了jQuery常见的事件绑定相关操作技巧与注意事项,需要的朋友可以参考下


  • 怎样处理jQuery EasyUI 已打开Tab重新加载问题

    发布:2020-01-07

    最近在项目中遇到这样的需求,要求实现点击左侧已经打开的tab可以刷新重新加载datagrid。下面给大家分享实现代码,一起看看吧


  • jquery html动态生成select标签出问题该如何解决

    发布:2020-02-05

    用jquery,json从后台获取一个列表,然后用一个动态生成的select标签显示出来,结果出现错误,下面为大家分享个不错的解决方法,喜欢的朋友可以参考下


  • jquery ajax跨域解决方法

    发布:2020-01-25

    本篇文章只要是对jquery ajax跨域解决方法(json方式)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助


网友讨论