整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 移動(dòng)端輪播——原生</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">
//求可視區(qū)的寬度
var w=document.documentElement.clientWidth || document.body.clientWidth;
//獲取ul
var ul=document.getElementsByTagName("ul")[0];
//獲取下面的點(diǎn)點(diǎn)點(diǎn)
var lis=document.querySelectorAll("ol>li");
//聲明兩個(gè)變量存儲(chǔ)手指按下時(shí)到可視區(qū)的距離和ul的left值
var startX,offsetLeft;
//手指按下
ul.addEventListener("touchstart",function(e){
//把上一次手指抬起時(shí)加的過渡效果取消
ul.style.transition="none";
console.log("啊啊啊啊啊")
//手指按下時(shí)我做一個(gè)判斷看看你當(dāng)前在第幾張圖
if(ul.offsetLeft===0){//第一套的第一張圖
ul.style.left=-5*w+"px";//第二套的第一張去
}else if(ul.offsetLeft===-9*w){//第二套的第五張圖
ul.style.left=-4*w + "px";//調(diào)到第一套的第5張去
}
var ev=e || window.event;
//求得手指到可視區(qū)的距離
startX=ev.touches[0].clientX;
//把ul的left值計(jì)算一下
offsetLeft=ul.offsetLeft;
//因?yàn)闉g覽器有一些默認(rèn)行為(比如手指觸摸會(huì)使網(wǎng)頁前進(jìn)后退)
ev.preventDefault();
},false)
//手指移動(dòng)
ul.addEventListener("touchmove",function(e){
var ev=e || window.event;
//求得移動(dòng)式手指到可視區(qū)的距離
var moveX=ev.touches[0].clientX;
//真實(shí)的ul的left值
var left=moveX - startX + offsetLeft;
ul.style.left=left + "px";
//因?yàn)闉g覽器有一些默認(rèn)行為
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="";
}
//因?yàn)榇颂幨莾商讏D%5
lis[Math.abs(num)%5].className="active";
//當(dāng)手指抬起時(shí)我讓他自動(dòng)滑到第一張 注意加一個(gè)過渡
ul.style.transition="0.5s";
ul.style.left=num * w + "px";
},false)
</script>
</body>
</html>
片規(guī)格: 665px * 444px
實(shí)現(xiàn)鼠標(biāo)懸停時(shí)圖片放大的效果，可以使用 HTML、CSS 和 JavaScript 來實(shí)現(xiàn)。以下是一個(gè)簡(jiǎn)單的示例代碼：
HTML:
<img src="image.jpg" id="myImage" />
CSS (僅供示例，可根據(jù)實(shí)際需求調(diào)整樣式):
#myImage {
transition: transform 0.3s;
}
#myImage:hover {
transform: scale(1.2);
}
JavaScript (用于添加鼠標(biāo)懸停事件監(jiān)聽器):
document.getElementById("myImage").addEventListener("mouseover", function () {
// 這里可以添加其他鼠標(biāo)懸停時(shí)的操作
});
document.getElementById("myImage").addEventListener("mouseout", function () {
// 這里可以添加鼠標(biāo)移出時(shí)的操作
});
在上述代碼中，當(dāng)鼠標(biāo)懸停在圖片上時(shí)，通過 CSS 的 transform:scale(1.2) 實(shí)現(xiàn)了圖片放大的效果。同時(shí)，使用 JavaScript 添加了鼠標(biāo)懸停和移出事件的監(jiān)聽器，以便在這些事件發(fā)生時(shí)執(zhí)行其他操作。
者：Ahmad
譯者：飄飄
https://ishadeed.com/article/image-techniques/
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
