|
|
|
|
|
|
CSS+JS實現圖片輪播(含放大鏡效果)【演示/源碼下載】
作者:admin 時間:2023-3-3 8:29:42 瀏覽:本文介紹一個多功能的圖片輪播效果，它不僅能自動循環圖片輪播，還能在鼠標移到小圖上顯示大圖的功能，此外，鼠標放到大圖上時，出現放大鏡的效果。下面是效果圖。
1、圖片輪播
2、鼠標移到小圖上顯示大圖
3、鼠標移到大圖上時有放大鏡效果
HTML代碼
<body>
<div id="box1">
<!--產品大圖-->
<div id="box1-1">
<img src="image/1.png" id="img1">
<!--產品放大鏡的遮罩層-->
<div id="imgmask1"></div>
</div>
<!--產品放大鏡效果圖-->
<div id="box1-1-1">
<img src="image/1.png" alt="" id="img1_1">
</div>
<!--產品小圖部分（即產品大圖下面）-->
<div id="box1-2">
<!--該盒子中的span文本只是用來裝飾，此處沒有設置用途-->
<div class="btn0"><span><</span></div>
<!--產品小圖， 1.png是大圖， 1-s.png是小圖， 其他圖片命名規則一樣-->
<div id="btn1" class="btn" onmouseover="moimg('image/1.png',this);" onmouseout="imgStart2(this)">
<img src="image/1-s.png" alt="" class="img2">
<div id="mask1" class="mask"></div>
</div>
<div id="btn2" class="btn" onmouseover="moimg('image/2.png',this);" onmouseout="imgStart2(this)">
<img src="image/2-s.png" alt="" class="img2">
<div id="mask2" class="mask"></div>
</div>
<div id="btn3" class="btn" onmouseover="moimg('image/3.png',this);" onmouseout="imgStart2(this)">
<img src="image/3-s.png" alt="" class="img2">
<div id="mask3" class="mask"></div>
</div>
<div id="btn4" class="btn" onmouseover="moimg('image/4.png',this);" onmouseout="imgStart2(this)">
<img src="image/4-s.png" alt="" class="img2">
<div id="mask4" class="mask"></div>
</div>
<div class="btn0"><span>></span></div>
</div>
</div>
</body>
CSS代碼
#box1 {
position: relative;
left: 100px;
width: 300px;
height: 300px;
border: 1px solid lightgray;
margin-top: 60px;
}
#box1-1 {
position: absolute;
}
/*產品大圖樣式*/
#img1 {
width: 300px;
/* position: absolute; */
/* left: 50%; */
/* top:0; */
/* margin-left: -150px; */;
}
/*產品小圖父盒子樣式*/
#box1-2 {
display: flex;
flex-direction: row;
position: absolute;
left: 50%;
top: 305px;
margin-left: -210px;
}
/*產品小圖樣式*/
.btn {
width: 67px;
height: 68px;
border: 1px solid darkgrey;
margin-left: 5px;
margin-right: 5px;
text-align: center;
cursor: pointer;
position: relative;
overflow: hidden;
}
.img2 {
width: 72px;
position: absolute;
left: 50%;
margin-left: -36px;
}
/*產品小圖左右兩邊<>樣式（裝飾作用）*/
.btn0 {
width: 50px;
height: 70px;
background-color: rgb(230, 230, 230);
text-align: center;
line-height: 70px;
}
span {
color: darkgrey;
font-size: 40px;
}
/*產品小圖遮罩層樣式*/
#mask1,#mask2,#mask3,#mask4 {
display: none;
width: 70px;
height: 70px;
background-color: lightgray;
opacity: 0.5;
position: absolute;
left: -2px;
top: 0px;
}
/*放大鏡部分*/
#imgmask1 {
display: none;
width: 150px;
height: 150px;
background-color: rgb(255, 247, 139);
opacity: 0.7;
position: absolute;
}
#box1-1-1 {
width: 600px;
height: 600px;
border: 1px solid lightgrey;
position: absolute;
left: 500px;
top: -40px;
overflow: hidden;
display: none;
}
#img1_1 {
position: absolute;
}JavaScript代碼
var imgc = 1; //imgc和imgm分別定義圖片開始和結束文件名（數字），這里我用的大圖命名是1.png 到 4.png，它們對應的小圖是1-s.png 到 4-s.png
var imgm = 4;
var flag = 1;
var tm;
var box1_1 = document.getElementById('box1-1');
var imgMask = document.getElementById('imgmask1');
var box1_1_1 = document.getElementById('box1-1-1');
var img1_1 = document.getElementById('img1_1');
//按鈕遮罩層出現
function changeMask(cIndex)
{
for (var i = 1; i <= 4; i++)
{
var mask = document.getElementById('mask' + i); //與上面imgc和imgm一樣，這是小圖遮罩層，自行命名
mask.style.display = "none";
}
var mask = document.getElementById('mask' + cIndex);
mask.style.display = "block";
}
//自動循環播放圖片
function cgimg()
{
if (flag === 0) return;
changeMask(imgc);
var img1 = document.getElementById('img1');
img1.src = "image/" + imgc + "-s.png";
//根據輪播圖片改變放大鏡對應圖片的路徑
img1_1.src = "image/" + imgc + ".png";
imgc++;
if (imgc > imgm) imgc = 1;
tm = window.setTimeout(cgimg, 2000);
}
//鼠標移動到圖片上
function imgStop()
{
flag = 0;
changeMask(imgc);
window.clearTimeout(tm);
}
function imgStop1()
{
flag = 0;
var box1_1 = document.getElementById('box1-1');
box1_1.style.cursor = "pointer";
changeMask(imgc);
window.clearTimeout(tm);
}
//鼠標移動到圖片外
function imgStart()
{
flag = 1;
tm = window.setTimeout(cgimg, 2000);
changeMask(imgc);
}
function imgStart2(obj)
{
flag = 1;
tm = window.setTimeout(cgimg, 2000);
obj.style.border = "none";
}
function imgStart3(obj)
{
flag = 1;
tm = window.setTimeout(cgimg, 2000);
obj.style.border = "none";
}
//鼠標放在小圖上
function moimg(imgurl, obj)
{
window.clearTimeout(tm);
var img1 = document.getElementById('img1');
img1.src = imgurl;
for (var i = 1; i <= 4; i++)
{
var mask = document.getElementById('mask' + i);
mask.style.display = "none";
var btn = document.getElementById('btn' + i);
btn.style.border = "none";
}
obj.style.border = "2px solid red";
//根據鼠標移到小圖上面對應的大圖改變放大鏡對應圖片的路徑
img1_1.src = imgurl;
}
//自動播放圖片（輪播效果）
cgimg();
//放大鏡部分
//鼠標移到產品大圖上
box1_1.onmouseover = function()
{
imgStop1();
imgMask.style.display = "block";
box1_1_1.style.display = "block";
}
//鼠標在產品大圖上面移動（查看放大效果）
box1_1.onmousemove = function big(event)
{
var maskX = event.clientX - box1_1.offsetLeft - imgMask.offsetWidth;
var maskY = event.clientY - box1_1.offsetTop - imgMask.offsetHeight;
var maskMaxX = box1_1.offsetWidth - imgMask.offsetWidth;
var maskMaxY = box1_1.offsetHeight - imgMask.offsetHeight;
if (maskX < 0)
{
maskX = 0;
}
else if (maskX > maskMaxX)
{
maskX = maskMaxX;
}
if (maskY < 0)
{
maskY = 0;
}
else if (maskY > maskMaxY)
{
maskY = maskMaxY;
}
imgMask.style.left = maskX + "px";
imgMask.style.top = maskY + "px";
var bigImgMax = img1_1.offsetWidth - box1_1_1.offsetWidth;
var bigImgX = maskX * bigImgMax / maskMaxX;
var bigImgY = maskY * bigImgMax / maskMaxY;
img1_1.style.left = -bigImgX + "px";
img1_1.style.top = -bigImgY + "px";
}
//鼠標離開產品大圖
box1_1.onmouseout = function()
{
imgStart();
imgMask.style.display = "none";
box1_1_1.style.display = "none";
}
使用說明
請參看JavaScript代碼注釋，圖片的命名規則可以自行確定，但需在JavaScript代碼里適當調整下代碼，這里我用的大圖命名是1.png 到 4.png，它們對應的小圖是1-s.png 到 4-s.png。
本實例使用4張圖片，你可以使用更多或更少的輪播圖片，這需要新增或減少相應的一部分HTML代碼，同樣，需要在JavaScript代碼里修改開始和結束的數字范圍。
總結
本文介紹使用CSS+JavaScript來實現圖片輪播效果，這是一個多功能的圖片輪播效果，它不僅能自動循環圖片輪播，還能在鼠標移到小圖上顯示大圖的功能，此外，鼠標放到大圖上時，出現放大鏡的效果。喜歡的朋友可以直接收藏本頁，或直接下載源碼使用。
相關文章
相關文章
x
