A few days ago, I implemented the JavaScript effects for the shopping website I had previously built.

As shown in the figure, the following effects were implemented:

• Text effect for the search button
• Image carousel
• Simulated dropdown menu
• Image scrolling left/right when clicking buttons

During the learning process, the thought process is very important. Before implementing an effect, it’s crucial to design it first, then analyze it, and finally implement it.

For example, a simple image carousel that fades images in and out. Its principle is to first fade out all images, and then fade in the image that needs to be displayed. Once you understand its working principle, writing the code becomes very straightforward.

shop.app.Banner=function(){            //Banner carousel effect
    var ad=document.getElementById("ad");
    var ul=ad.getElementsByTagName("ul")[0];
    var li=ul.getElementsByTagName("li");

    var iNow=0;
    var timer=setInterval(auto,3000);

    function auto()       //Automatic switching effect
    {
        if(iNow==li.length-1)
        {
            iNow=0;
        }
        else{
            iNow++;
        }
        for(var i=0;i<li.length;i++)
        {
            shop.ui.fadeOut(li[i]);
        }
        shop.ui.fadeIn(li[iNow]);
    }
};

Another point is the importance of layering when writing code for an entire page. For instance, dividing it into a foundational tools layer, a UI layer used in multiple places, and finally, the application layer. This approach reduces code duplication, makes the document’s structure clear, and facilitates understanding and future maintenance. Here, following a tutorial, I adopted the namespace method to write this page. The complete code is as follows:

window.onload=function(){        //Call functions
    shop.app.Banner();
    shop.app.search();
    shop.app.sort();
    shop.app.Run();
};
var shop={};        //Namespace
shop.tools={};
shop.tools.getByClass=function(Par,Cla)        //Get objects by class
{
    var allEle=Par.getElementsByTagName("*");
    var arr=[];
    for(i=0;i<allEle.length;i++)
    {
        if(allEle[i].className==Cla)
        {
            arr.push(allEle[i]);
        }
    }
    return arr;
};
shop.tools.getStyle=function(obj,attr)        //Get object style property
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[attr];
    }
    else
    {
        return getComputedStyle(obj,false)[attr];
    }
};

shop.ui={};
shop.ui.fadeIn=function(obj)        //Fade in effect
{
    var attr=shop.tools.getStyle(obj,'opacity');
    if(attr==1)
    {
        return false;
    };
    var value=0;
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var speed=5;
        if(value==100){
            clearInterval(obj.timer);
        }
        else
        {
            value+=speed;
            obj.style.opacity=value/100;
        }
    },30);
};
shop.ui.fadeOut=function(obj)        //Fade out effect
{
    var attr=shop.tools.getStyle(obj,'opacity');
    if(attr==0)
    {
        return false;
    };
    var value=100;
    obj.timer=setInterval(function(){
        var speed=-5;
        if(value==0)
        {
            clearInterval(obj.timer);
        }
        else
        {
            value+=speed;
            obj.style.opacity=value/100;
        };
    },30);
};
shop.ui.textChange=function(obj,str){        //Clear default text
    obj.onfocus=function(){
        if(this.value==str){
            this.value="";
        }
    };
    obj.onblur=function(){
        if(this.value==""){
            this.value=str;
        }
    };
};
shop.ui.moveLeft=function(obj,old,now){        //Move object position to the left
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var speed=(now-old)/15;
        speed=Math.round(speed);
        if(now==old){
            clearInterval(obj.timer);
        }
        else{
            old+=speed;
            obj.style.left=old+"px";
        }
    },30);
};
shop.app={};
shop.app.Banner=function(){            //Banner carousel effect
    var ad=document.getElementById("ad");
    var ul=ad.getElementsByTagName("ul")[0];
    var li=ul.getElementsByTagName("li");

    var iNow=0;
    var timer=setInterval(auto,3000);

    function auto()
    {
        if(iNow==li.length-1)
        {
            iNow=0;
        }
        else{
            iNow++;
        }
        for(var i=0;i<li.length;i++)
        {
            shop.ui.fadeOut(li[i]);
        }
        shop.ui.fadeIn(li[iNow]);
    }
};
shop.app.search=function(){
    var s1=document.getElementById("search1");
    var s2=document.getElementById("search2");
    shop.ui.textChange(s1,"Search website");
    shop.ui.textChange(s2,"Search website");
};
shop.app.sort=function(){            //Simulated dropdown menu
    var sor=document.getElementById("sort");
    var sordd=sor.getElementsByTagName("dd");
    var sorul=sor.getElementsByTagName("ul");
    var sorh4=sor.getElementsByTagName("h4");
    for(var i=0;i<sordd.length;i++){
        sordd[i].index=i;
        sordd[i].onclick=function(ev){
            var ev=ev||window.event;
            var This=this;
            for(var n=0;n<sorul.length;n++){
                sorul[n].style.display="none";
            }
            sorul[this.index].style.display="block";

            document.onclick=function(){
                sorul[This.index].style.display='none';
            };
            ev.cancelBubble=true;
        }
    };

    for(var i=0;i<sorul.length;i++){
        sorul[i].index=i;
        (function(ul){
            var sorli=ul.getElementsByTagName("li");
            for(var i=0;i<sorli.length;i++){
                sorli[i].onmouseover=function(){
                    this.className="active";
                };
                sorli[i].onmouseout=function(){
                    this.className="";
                };
                sorli[i].onclick=function(ev){
                    var ev = ev || window.event;
                    sorh4[this.parentNode.index].innerHTML=this.innerHTML;
                    ev.cancelBubble = true;
                    this.parentNode.style.display="none";
                };
            }
        })(sorul[i]);
    };
};
shop.app.Run=function(){            //Click to move left effect
    var slide=document.getElementById('slide');
    var ul=slide.getElementsByTagName('ul')[0];
    var li=ul.getElementsByTagName('li');

    var pre=shop.tools.getByClass(slide,"pre")[0];
    var next=shop.tools.getByClass(slide,"next")[0];

    var iNow=0;

    ul.innerHTML+=ul.innerHTML;
    ul.style.width=li.length*li[0].offsetWidth+"px";

    pre.onclick = function(){
        if(iNow == 0){
            iNow = li.length/2;
            ul.style.left = -ul.offsetWidth/2 + 'px';
        }
        shop.ui.moveLeft(ul,-iNow*li[0].offsetWidth,-(iNow-1)*li[0].offsetWidth);
        iNow--;
    };

    next.onclick = function(){
        if(iNow == li.length/2){
            iNow = 0;
            ul.style.left = 0;
        }
        shop.ui.moveLeft(ul,-iNow*li[0].offsetWidth,-(iNow+1)*li[0].offsetWidth);
        iNow++;
    };
};