JQuery实现广告效果（滚动切换）

JQuery实现广告效果（滚动切换） Html+css

效果如上图

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-2.1.4.min.js"></script>
    <script language='javascript' src="../JS/guanggao.js">
    </script>
    <style type="text/css">
        /*滚动广告样式*/
        .ad {margin:10px;width:586px; height:150px;overflow:hidden;border:1px solid #AAAAAA;position:relative;}
        .slider,.num{position:absolute;}
        .ad ul{;padding: 0;margin: 0}
        .slider li{ list-style:none;display:inline;}
        .slider img{ width:586px; height:150px;display:block;}
        .num{ right:5px; bottom:5px;}
        .num li{float: left;color: #FF7300;text-align: center;line-height: 16px;width: 16px;height: 16px;font-family: Arial;font-size: 12px;cursor: pointer;overflow: hidden;margin: 3px 1px;border: 1px solid #FF7300;background-color: #fff;}
        .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;}
    </style>
</head>
<body>
<div class="ad" >
    <ul class="slider" >
        <li><a href="#"><img src="../PICTURE/P/asb-160219.gif" alt="ad1"/></a></li>
        <li><a href="#"><img src="../PICTURE/P/htlogo.png" alt="ad2"/></a></li>
        <li><a href="#"><img src="../PICTURE/P/hw-160405.gif" alt="ad3"/></a></li>
        <li><a href="#"><img src="../PICTURE/P/logo_network_power.gif" alt="ad4"/></a></li>
        <li><a href="#"><img src="../PICTURE/P/logo.jpg" alt="ad5"/></a></li>
    </ul>
    <ul class="num" >
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>
</html>

JS代码：

window.onload = function () {
    anime()
};
function anime(){
    $(function() {
        var len = $(".num > li").length;
        var index = 0;
        var adTimer;
        $(".num li").mouseover(function() {
            index = $(".num li").index(this);
            showImg(index);
        }).eq(0).mouseover();
        //滑入 停止动画，滑出开始动画.
        $('.ad').hover(function() {
            clearInterval(adTimer);
        }, function() {
            adTimer = setInterval(function() {
                showImg(index)
                index++;
                if (index == len) { index = 0; }
            }, 3000);
        }).trigger("mouseleave");
    })
// 通过控制top ，来显示不同的幻灯片
    function showImg(index) {
        var adHeight = $(".ad").height();
        $(".slider").stop(true, false).animate({ top: -adHeight * index }, 500);   //翻滚效果
        //$(".slider").css("top", -adHeight * index);     //跳转效果
        $(".num li").removeClass("on")
            .eq(index).addClass("on");
    }
}

JQuery实现广告效果（滚动切换）

恋雨烟梦

相关推荐

iOS仿写有妖气漫画、视频捕获框架、启动页广告页demo、多种动画效果等源码

做网络推广人员必须懂得的东西

谷歌Adsense新广告效果及提高收入Adsense广告收入

程序员社区投放理财广告效果奇差，不都高薪吗？网友：智商高抠门

BootStrap中jQuery插件Carousel实现轮播广告效果

JavaScript实现带缓冲效果的随屏滚动漂浮广告代码

JavaScript实现广告的关闭与显示效果实例

jquery实现的Banner广告收缩效果代码

基于JQuery制作的产品广告效果

用javascript实现的仿Flash广告图片轮换效果

仿迅雷焦点广告效果(JQuery版)

一篇文章，读懂品牌广告与效果广告的相同和不同

掌握了这些优化技巧，广告效果最高可提升300%！

Android知乎广告效果

逆天点击率达70%，推啊成双11期间电商获客奇兵

推啊首创互动式效果广告，着眼于面为移动广告行业注入新活力

腾讯网络媒体事业群酝酿改革应对今日头条

使用cookie实现只出现一次的广告代码效果