轮播效果

2017-09-13 20:32:13来源:cnblogs.com作者:滥调陈词人点击

分享

html界面     

<div id="content6">                            <div class="content6-1">                                <ul>                                    <li>死兆星礼包</li>                                    <li>死兆星皮肤上架</li>                                    <li>LSPL11日赛程</li>                                    <li>周边上架</li>                                    <li>五折促销</li>                                </ul>                            </div>
</div>                      

 css代码

#content6 {                float: left;                background: url(img/主页图片/adv_01.jpg);                width: 533px;                height: 280px;            }            /*.span3 li{clear: both;}*/                        .content6-1 {                width: 533px;                height: 40px;                background: #353535;                position: relative;                top: 240px;                /*left: -20px;*/            }

静态网页效果图

jQuery实现

 实现定时器效果

function a() {//alert(j);                                                        if(j > 4) {                                j = 0;                            }//                            alert(j);                    $("#content6").css("background","url(img/主页图片/adv_0" + (j+1) + ".jpg)");//轮播广告,替换当前广告                    t = setTimeout(a, 1000);//定时器                    $(".content6-1 ul li").each(function(i,e){ //遍历每一个并获取下标                        if(i==j)                        {                            $(e).css("background","#D52D02");//改变当前选中项的背景颜色                        }                        else                        {                            $(e).css("background","#353535");                        }                    })                                                                                j++;                }                a();//在开始加载时调用代码

实现悬浮效果

$(".content6-1 ul li").mouseenter(function(){                        j=$(this).index();                                                $("#content6").css("background","url(img/主页图片/adv_0" + (j+1)+ ".jpg)");                         $(this).css("background","#D52D02")                         .siblings().css("background","#353535");                                                     clearTimeout(t);//定时器停止在当前选中的项//                        alert(j);                            })

实现移开效果

$(".content6-1 ul li").mouseleave(function(){                          j++;                                                 setTimeout(a, 1000);                                                    })

JS脚本实现

  实现定时器效果

                var menus = document.querySelectorAll(".content6-1 ul li");                function a() {                    j++;                    if(j > 5) {                        j = 1;                    } //                alert(i);                                    //                    $("#content6").css({ "background": "url(img/主页图片/adv_0" + j + ".jpg)" });                    document.querySelector("#content6").style.background = "url(img/主页图片/adv_0" + j + ".jpg)";                    for(var i = 0; i < menus.length; i++) {                        menus[i].onmouseenter = enter;                        menus[i].onmouseleave = leave;                    }                    for(var i = 0; i < menus.length; i++) {                        if(i + 1 == j) {                            menus[i].style.background = "#D52D02";                        } else {                            menus[i].style.background = "#353535";                        }                    }                    t = setTimeout(a, 1000);                }                a();

悬浮效果

function enter() {                    for(var i = 0; i < menus.length; i++) {                        if(this == menus[i]) {                            j = i + 1;                            menus[i].style.background = '#D52D02';                            document.querySelector("#content6").style.background = "url(img/主页图片/adv_0" + j + ".jpg)";                        } else {                            menus[i].style.background = '#353535';                        }                    }                    clearTimeout(t);                }

移开效果

function leave() {                    j--;                    a();                }

效果图

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台