JavaScript 移動端圖片輪播-原生

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 移動端輪播——原生</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{
    margin: 0;
    padding: 0px;
    list-style: none;
}
div{
    width: 100%;
    height: 66vw;
    overflow: hidden;
    position: relative;
}
div>ul{
    width: 1000%;
    height: 66vw;
    position: absolute;
    left: 0;
    top: 0;
}
div>ul>li{
    width: 10%;
    height: 66vw;
    float: left;
}
div>ul>li>img{
    width: 100%;
}
div>ol{
    position: absolute;
    left: 50%;
    bottom: 2vw;
    transform: translateX(-50%);
}
div>ol>li{
    width: 3vw;
    height: 3vw;
    float: left;
    margin: 1vw;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
}
div>ol>li.active{
    background-color: orange;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/1.jpeg" alt="" /></li>
<li><img src="img/2.jpeg" alt="" /></li>
<li><img src="img/3.jpeg" alt="" /></li>
<li><img src="img/4.jpeg" alt="" /></li>
<li><img src="img/5.jpeg" alt="" /></li>
<li><img src="img/1.jpeg" alt="" /></li>
<li><img src="img/2.jpeg" alt="" /></li>
<li><img src="img/3.jpeg" alt="" /></li>
<li><img src="img/4.jpeg" alt="" /></li>
<li><img src="img/5.jpeg" alt="" /></li>
</ul>
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script type="text/javascript">
    //求可視區的寬度
    var w=document.documentElement.clientWidth || document.body.clientWidth;
    //獲取ul
    var ul=document.getElementsByTagName("ul")[0];
    //獲取下面的點點點
    var lis=document.querySelectorAll("ol>li");
    //聲明兩個變量存儲手指按下時到可視區的距離和ul的left值
    var startX,offsetLeft;
    //手指按下
    ul.addEventListener("touchstart",function(e){
    //把上一次手指抬起時加的過渡效果取消
    ul.style.transition="none";

    console.log("啊啊啊啊啊")
    //手指按下時我做一個判斷看看你當前在第幾張圖
    if(ul.offsetLeft===0){//第一套的第一張圖
        ul.style.left=-5*w+"px";//第二套的第一張去
    }else if(ul.offsetLeft===-9*w){//第二套的第五張圖
        ul.style.left=-4*w + "px";//調到第一套的第5張去
    }

    var ev=e || window.event;
    //求得手指到可視區的距離
    startX=ev.touches[0].clientX;
    //把ul的left值計算一下
    offsetLeft=ul.offsetLeft;
    //因為瀏覽器有一些默認行為(比如手指觸摸會使網頁前進后退)
    ev.preventDefault();
    },false)
    //手指移動
    ul.addEventListener("touchmove",function(e){
        var ev=e || window.event;
        //求得移動式手指到可視區的距離
        var moveX=ev.touches[0].clientX;
        //真實的ul的left值
        var left=moveX - startX + offsetLeft;
        ul.style.left=left + "px";
        //因為瀏覽器有一些默認行為
        ev.preventDefault();
        },false)
        //手指抬起
        ul.addEventListener("touchend",function(){
        var num=Math.round(ul.offsetLeft/w);
        for(var i=0;i<lis.length;i++){
        		lis[i].className="";
        }
        //因為此處是兩套圖%5
        lis[Math.abs(num)%5].className="active";

        //當手指抬起時我讓他自動滑到第一張 注意加一個過渡
        ul.style.transition="0.5s";
        ul.style.left=num * w + "px";
    },false)
</script>
</body>
</html>

片規格: 665px * 444px

實現鼠標懸停時圖片放大的效果，可以使用 HTML、CSS 和 JavaScript 來實現。以下是一個簡單的示例代碼：

HTML:

CSS (僅供示例，可根據實際需求調整樣式):

#myImage {

transition: transform 0.3s;

}

#myImage:hover {

transform: scale(1.2);

}

JavaScript (用于添加鼠標懸停事件監聽器):

document.getElementById("myImage").addEventListener("mouseover", function () {

// 這里可以添加其他鼠標懸停時的操作

});

document.getElementById("myImage").addEventListener("mouseout", function () {

// 這里可以添加鼠標移出時的操作

});

在上述代碼中，當鼠標懸停在圖片上時，通過 CSS 的 transform:scale(1.2) 實現了圖片放大的效果。同時，使用 JavaScript 添加了鼠標懸停和移出事件的監聽器，以便在這些事件發生時執行其他操作。

者：Ahmad

譯者：飄飄

https://ishadeed.com/article/image-techniques/

在線咨詢

上一篇：HTML的基本語法以及如何使用HTML來創建網頁
下一篇：30個值得收藏的家居圖集網站，收納、靈感、裝修都有！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript 移動端圖片輪播-原生

您的項目需求