JS動態相簿--隨滑鼠所至切換封面圖

缺氧何甘酸發表於2020-10-26
JS

JS動態相簿--隨滑鼠所至切換封面圖

  1. 改變節點的屬性使用函式getAttribute(‘src’)然後再setAttribute(‘屬性名’,屬性值)
  2. 獲得屬性時獲得的是字串，處理時與數字等區分在這裡插入圖片描述
  3. 滑鼠的樣式有（cursor屬性）

auto ：標準游標
default ：標準箭頭
hand ：手形游標
wait ：等待游標
text ：I形游標
vertical-text ：水平I形游標
no-drop ：不可拖動游標
not-allowed ：無效游標
help ：?幫助游標
all-scroll ：三角方向標
move ：移動標
crosshair ：十字標

  1. 滑鼠事件彙總.

程式碼

實現滑鼠放在上方小圖片後改變下方大圖的src（實際網站一般準備縮圖在上方小圖並規範檔案命名方便修改src），同時修改圖片下方的註釋（第幾張圖片）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body{
        margin: 20px auto;
        width: 600px;
        border: #dddddd 1px solid;
    }
    .top{
        display: flex;
        justify-content: center;

    }
    .content img{
        width: 100%;
    }
    .top img{
        max-width:140px;
        max-height: 100px;
        margin: 10px 13px 10px;
        vertical-align: center;
        cursor: wait;
    }
</style>
<body>
<h1>相簿</h1>
<div class="top">
    <img id="img1" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604242738&di=fabe895e1dad8e6bd1a229de7d8cc67b&imgtype=jpg&er=1&src=http%3A%2F%2Fimg1.youzy.cn%2Fcontent%2Fmedia%2Fthumbs%2Fp00196453.jpeg" alt="圖片1">
    <img id="img2" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604242818&di=a22977da784f9df5825fbc05ed18c35a&imgtype=jpg&er=1&src=http%3A%2F%2Fco-image.qichacha.com%2FCompanyImage%2Fx88582a5e6dd4d5f0553266796d5e1d1.jpg" alt="圖片2">
    <img id="img3" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604242868&di=574d79607a8ade54f61ad0a04d089114&imgtype=jpg&er=1&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191105%2Fcb24cde653c84ad0a5be65ac4433be00.jpeg" alt="圖片3">
    <img id="img4" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604242885&di=1f9bd07a691bbb14f30eb9a1ce195fda&imgtype=jpg&er=1&src=http%3A%2F%2Fupfile.cuepa.cn%2Fnewspics%2F2016%2F09%2Fs_66b49a0a657b16891f0851ad71cb7f69349427.jpg" alt="圖片4">
</div>
<div class="content">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604242738&di=fabe895e1dad8e6bd1a229de7d8cc67b&imgtype=jpg&er=1&src=http%3A%2F%2Fimg1.youzy.cn%2Fcontent%2Fmedia%2Fthumbs%2Fp00196453.jpeg" alt="樣圖">
</div>
<div class="note">請選擇圖片</div>
</body>
<script>
     var note=document.querySelector('.note');
     var content=document.querySelector('.content img');
     var top_photo=document.querySelectorAll('.top img');
    for(var i=0;i<top_photo.length;i++){
            top_photo[i].onmouseover=function () {

            var src=this.getAttribute('src');
            content.setAttribute('src',src);

             var idx=this.getAttribute('id').substr(3,1);
            var str='';
            switch (idx) {
               case '1': str="圖片1"; break;
               case '2': str="圖片2"; break;
               case '3': str="圖片3"; break;
               case '4': str="圖片4";
            }
            note.innerHTML=str;
        }
    }
</script>
</html>

相關文章