Heim > Web-Frontend > js-Tutorial > Hauptteil

So erzielen Sie einen Karusselleffekt

一个新手
Freigeben: 2017-09-29 10:01:49
Original
1356 Leute haben es durchsucht

HTML-Schnittstelle


                            
                                
                                    死兆星礼包
                                    死兆星皮肤上架
                                    LSPL11日赛程
                                    周边上架
                                    五折促销
Nach dem Login kopieren

CSS-Code


#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;*/
            }
Nach dem Login kopieren

statisch Web-Rendering

jQuery-Implementierung

, um einen Timer-Effekt zu erzielen


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();//在开始加载时调用代码
Nach dem Login kopieren

, um eine Aussetzung zu erreichen Effekt


$(".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);
                            })
Nach dem Login kopieren

Effekt entfernen


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

JS-Skriptimplementierung

Timer implementieren Effekt


                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();
Nach dem Login kopieren

schwebender Effekt


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);
                }
Nach dem Login kopieren

Effekt entfernen


function leave() {
                    j--;
                    a();
                }
Nach dem Login kopieren

Rendering

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Karusselleffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!