python 学习_第五模块 JS特效
1 图片切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>01 图片切换</title> </head> <body> <img src="images/image01.jpg" id="flower" width="200" height="200"> <br> <button id="prev">上一张</button> <button id="next">下一张</button> <!-- 1. 获取事件源 需要的标签 --> <script type="text/javascript"> var flower = document.getElementById(‘flower‘); var nextBth = document.getElementById(‘next‘); var prevBth = document.getElementById(‘prev‘); var minIndex=1;maxIndex=4;currentIndex=minIndex; // 2 监听按钮的点击 nextBth.onclick = function(){ if (currentIndex===maxIndex){ // 最后一张 currentIndex=minIndex; }else { currentIndex++; } flower.setAttribute(‘src‘,`images/image0${currentIndex}.jpg`); } prevBth.onclick = function(){ if (currentIndex===minIndex){ // 最后一张 currentIndex=maxIndex; }else { currentIndex--; } flower.setAttribute(‘src‘,`images/image0${currentIndex}.jpg`); } </script> </body> </html>
2 显示和隐藏图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>显示和隐藏图片</title> </head> <body> <button id=‘btn‘>隐藏</button> <br> <img src="images/img01.jpg" id="new"> <script type="text/javascript"> // 1 获取事件源 var obtn = document.getElementById("btn"); var newImg = document.getElementsByTagName("img")[0]; obtn.onclick = function(){ if(obtn.innerHTML === ‘隐藏‘){ newImg.style.display = ‘none‘; obtn.innerHTML = ‘显示‘; }else{ newImg.style.display = ‘block‘; obtn.innerHTML = ‘隐藏‘; } } </script> </body> </html>
3 衣服相册
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>03 衣服相册</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul { list-style: none; overflow: hidden; } ul li { float: left; width: 50px; height: 50px; margin-left:10px; margin-top: 10px; border: 2px solid #fff; } ul li.active{ border-color: red; } </style> </head> <body> <img src="images/1.jpg" id="bigImg"> <ul> <li class="active"> <a href=""> <img src="images/1.jpg" width="46" class="smallImg"> </a> </li> <li> <a href=""> <img src="images/2.jpg" width="46" class="smallImg"> </a> </li> <li> <a href=""> <img src="images/3.jpg" width="46" class="smallImg"> </a> </li> <li> <a href=""> <img src="images/4.jpg" width="46" class="smallImg"> </a> </li> <li> <a href=""> <img src="images/5.jpg" width="46" class="smallImg"> </a> </li> </ul> <script type="text/javascript"> // 1 获取事件源 var bigImg = document.getElementById(‘bigImg‘); var smallImgs = document.getElementsByClassName(‘smallImg‘); for (var i=0;i<smallImgs.length;i++){ smallImgs[i].onmouseover = function(){ // 3.事件处理程序 // 3.1 在悬浮到每个li标签之前，先把所有的li标签的类名都置为空值 for(var j = 0; j < smallImgs.length; j++){ smallImgs[j].parentNode.parentNode.setAttribute(‘class‘, ‘‘); } // 3.2修改大图的src属性值 var smallImgSrc = this.getAttribute(‘src‘); bigImg.setAttribute(‘src‘,smallImgSrc); // 3.3 给鼠标悬浮的img标签的父标签添加类 this.parentNode.parentNode.setAttribute(‘class‘, ‘active‘); } } </script> </body> </html>
4 关闭小广告
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04 关闭小广告</title> <style type="text/css"> *{ padding: 0; margin: 0; } #qe_code{ width: 180px; height: 160px; margin: 100px auto; position: relative; } #qe_code img{ position: absolute; right: 0; } #qe_code #close{ position: absolute; width: 18px; height: 18px; border: 1px solid #e0e0e0; text-align: center; line-height: 18px; cursor: pointer; color: #666; } </style> </head> <body> <div id="qe_code"> <img src="images/phone_taobao.png" id="code"> <span id="close">X</span> </div> <script type="text/javascript"> var closeSpan = document.getElementById(‘close‘); var qe_code = document.getElementById(‘qe_code‘); closeSpan.onclick = function(){ qe_code.style.display = ‘none‘; } </script> </body> </html>
05 图片切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05 图片切换</title> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ border: 1px solid #ccc; width: 430px; height: 70px; padding-top: 430px; background: url(‘images/big_pic1.jpg‘) no-repeat; } #box ul li{ display: inline-block; margin-right: 15px; } </style> </head> <body> <div id="box"> <ul> <li id="item1"> <img src="images/pic1.jpg"> </li> <li id="item2"> <img src="images/pic2.jpg"> </li> <li id="item3"> <img src="images/pic3.jpg"> </li> <li id="item4"> <img src="images/pic4.jpg"> </li> <li id="item5"> <img src="images/pic5.jpg"> </li> </ul> </div> <script type="text/javascript"> // 初学者 小白 书写的方式 var item1 = document.getElementById(‘item1‘); var item2 = document.getElementById(‘item2‘); var item3 = document.getElementById(‘item3‘); var item4 = document.getElementById(‘item4‘); var item5 = document.getElementById(‘item5‘); var oBox = document.getElementById(‘box‘); item1.onmouseover = function(){ oBox.style.background = `url(‘images/big_pic1.jpg‘) no-repeat` } item2.onmouseover = function(){ oBox.style.background = `url(‘images/big_pic2.jpg‘) no-repeat` } item3.onmouseover = function(){ oBox.style.background = `url(‘images/big_pic3.jpg‘) no-repeat` } item4.onmouseover = function(){ oBox.style.background = `url(‘images/big_pic4.jpg‘) no-repeat` } item5.onmouseover = function(){ oBox.style.background = `url(‘images/big_pic5.jpg‘) no-repeat` } </script> </body> </html>
原文：https://www.cnblogs.com/augustyang/p/11310240.html