js——js特效

图片切换效果

<body>
        <div id="box">
            <img src="image/image1.jpg" alt="" id="tu">
        </div>
        <button  id="prev">上一页</button>
        <button  id="next">下一页</button>

    </body>

main = function(){
    //获取节点
    var tu = document.getElementById("tu");
    var next = document.getElementById('next');
    var prev = document.getElementById('prev');
    
    var min=1,max=4,cont = min;
    next.onclick = function(){
        cont++;
        if(cont>max)
        {
            cont = min;
        }
        console.log('image/image'+cont+'.jpg');
            tu.setAttribute('src','image/image'+cont+'.jpg');
        
        
    }
    prev.onclick = function(){
        cont--;
        if(cont<min)
        {
            cont = max;
        }
        console.log('image/image'+cont+'.jpg');
            tu.setAttribute('src','image/image'+cont+'.jpg');
        
        
    }
    
}

window.onload = main;

按钮的显示和隐藏

var tu = document.getElementById("tu");
    var bin = document.getElementById('bin');
    var see = 0;
    //单击事件
    bin.onclick = function(){
        if(see ===0)
        {
            tu.style.display = 'none';
            see = 1;
        }else
        {
            tu.style.display = 'inline';
            see = 0;
        }
        
    }

相册切换效果

<div>
            <!-- 大图片 -->
            <div class="conre">
                <img src="image/image1.jpg" id="bjimg">
            </div>
            <!-- 小图片 -->
            <div>
                <ul>
                    <li class="hon fl">
                        <a href="#">
                            <img src="image/image1.jpg" class="tp">
                        </a>
                    </li>
                    <li class="fl">
                        <a href="#">
                            <img src="image/image2.jpg" class="tp">
                        </a>
                    </li>
                    <li class="fl">
                        <a href="#">
                            <img src="image/image3.jpg" class="tp">
                        </a>
                    </li>
                    <li class="fl">
                        <a href="#">
                            <img src="image/image4.jpg" class="tp">
                        </a>
                    </li>
                </ul>
            </div>
        </div>

css样式

.hon{
    border-color: darkred;
}

    //获取事件
        var bjima = document.getElementById('bjimg');
        var tp = document.getElementsByClassName('tp');
        // 遍历集合
        for(var i=0; i<tp.length;i++)
        {
            tp[i].onmouseover = function(){
                
                // 清楚当前的文本框颜色
                for(var j =0;j<tp.length;j++)
                {
                    tp[j].parentNode.parentNode.setAttribute('class','fl');
                }
                //获取当前的src
                var src = this.getAttribute('src');
                //设置src
                bjima.setAttribute('src',src);
                // 悬浮起来设置边框
                this.parentNode.parentNode.setAttribute('class','hon fl');
            }
        }