<!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/
*请认真填写需求信息,我们会在24小时内与您取得联系。