zoukankan      html  css  js  c++  java
  • 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;
         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;
         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;
         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");
        }
  • 相关阅读:
    VysorPro助手
    Play 2D games on Pixel running Android Nougat (N7.1.2) with Daydream View VR headset
    Play 2D games on Nexus 6P running Android N7.1.1 with Daydream View VR headset
    Native SBS for Android
    ADB和Fastboot最新版的谷歌官方下载链接
    How do I install Daydream on my phone?
    Daydream Controller手柄数据的解析
    蓝牙BLE传输性能及延迟分析
    VR(虚拟现实)开发资源汇总
    Android(Java)控制GPIO的方法及耗时分析
  • 原文地址:https://www.cnblogs.com/xiaoXuZhi/p/3316143.html
Copyright © 2011-2022 走看看