整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript 移动端图片轮播-原生

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:

<img src="image.jpg" id="myImage" />

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/