图片切换效果
<body>
<div id="box">
<img src="image/image1.jpg" alt="" id="tu">
</div>
<button id="prev">上一页</button>
<button id="next">下一页</button>
</body>
js
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; }
js
//获取事件 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'); } }