首頁 > web前端 > js教程 > 主體

實現輪播效果的方法

一个新手
發布: 2017-09-29 10:01:49
原創
1378 人瀏覽過

html介面    


                            
                                
                                    死兆星礼包
                                    死兆星皮肤上架
                                    LSPL11日赛程
                                    周边上架
                                    五折促销
登入後複製

 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 = &#39;#D52D02&#39;;                            document.querySelector("#content6").style.background = "url(img/主页图片/adv_0" + j + ".jpg)";
                        } else {
                            menus[i].style.background = &#39;#353535&#39;;                        }

                    }
                    clearTimeout(t);
                }
登入後複製

#移開效果


function leave() {
                    j--;
                    a();
                }
登入後複製

效果圖

 

#

以上是實現輪播效果的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!