溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關使用JavaScript怎么模仿一個京東輪播圖效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
主要技術點：
每隔3秒自動切換圖片；
鼠標移入圖片自動暫停切換，鼠標移出則繼續(xù)；
點擊左右方向按鈕手動切換圖片；
鼠標移到灰色圓點，顯示對應的圖片，并加亮顯示。
HTML代碼：
<body> <h2>輪播圖展示</h2> <div id="did"> <!-- 圖片 --> <div id="img-div" onmouseover="doStop()" onmouseout="doStart()"> <img src="./1.jpg"> <img src="./2.jpg"> <img src="./3.jpg"> <img src="./4.jpg"> <img src="./5.jpg"> <img src="./6.jpg"> <img src="./7.jpg"> <img src="./8.jpg"> </div> <!-- 左右按鈕 --> <div id="btn-div"> <div id="left-btn" onclick="doLeftClick()"> <h4> < </h4> </div> <div id="right-btn" onclick="doRightClick()"> <h4> > </h4> </div> </div> <!-- 圓點 --> <div id="cir-div"> <div onmouseover="doMove(1)"></div> <div onmouseover="doMove(2)"></div> <div onmouseover="doMove(3)"></div> <div onmouseover="doMove(4)"></div> <div onmouseover="doMove(5)"></div> <div onmouseover="doMove(6)"></div> <div onmouseover="doMove(7)"></div> <div onmouseover="doMove(8)"></div> </div> </div> </body>
CSS代碼：
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-color: rgb(255, 249, 249);
}
h2 {
text-align: center;
padding-top: 40px;
color: rgba(250, 54, 129, 0.562);
}
#did {
position: relative;
width: 590px;
height: 470px;
margin: 30px auto;
}
#img-div {
position: absolute;
}
#img-div img {
width: 590px;
display: none;
cursor: pointer;
z-index: -1;
}
/* 這兩段可不加 */
/* 顯示第一張圖片 */
#img-div img:first-child {
display: block;
}
/* 點亮第一個圓點 */
#cir-div div:first-child {
background: #fff;
}
#cir-div {
position: absolute;
/* 相對于圖片的位置 */
left: 40px;
bottom: 25px;
}
/* 下方圓點 */
#cir-div div {
width: 8px;
height: 8px;
float: left;
/* 50%時為圓形 */
border-radius: 50%;
margin-right: 6px;
border: 1px solid rgba(0, 0, 0, .05);
background: rgba(255, 255, 255, .4);
}
#left-btn {
position: absolute;
/* 相對于圖片的位置 */
top: 45%;
/* 左半圓按鈕 */
width: 27px;
height: 38px;
background: rgba(119, 119, 119, 0.5);
border-radius: 0 20px 20px 0;
/* 動畫效果，放在變化前，當鼠標移動上面時，會緩慢變色 */
transition: background-color 0.3s ease-out;
}
#right-btn {
position: absolute;
/* 相對于圖片的位置 */
top: 45%;
right: 0px;
/* 右半圓按鈕 */
width: 27px;
height: 38px;
background-color: rgba(119, 119, 119, 0.5);
border-radius: 20px 0 0 20px;
/* 動畫效果，放在變化前，當鼠標移動上面時，會緩慢變色 */
transition: background-color 0.3s ease-out;
}
#left-btn:hover {
background-color: rgba(32, 32, 32, 0.5);
cursor: pointer;
}
#right-btn:hover {
background-color: rgba(32, 32, 32, 0.5);
cursor: pointer;
}
#left-btn h4 {
color: #fff;
margin-top: 4px;
margin-left: 2px;
}
#right-btn h4 {
color: #fff;
margin-top: 4px;
margin-left: 8px;
}
</style>JavaScript代碼：
<script>
//顯示第幾張圖片
var count = 1;
//時間
var time = null;
//圖片列表
var imglist = document.getElementById("img-div").getElementsByTagName("img");
//圓點列表
var cirlist = document.getElementById("cir-div").getElementsByTagName("div");
//展示對應的圖片和點亮對應的圓點
function show(x) {
for (var i = 0; i < imglist.length; i++) {
if (x == i + 1) {
//顯示圖片
imglist[i].style.display = "block";
//圓點點亮
cirlist[i].style.backgroundColor = "#fff";
} else {
imglist[i].style.display = "none";
cirlist[i].style.background = "rgba(255, 255, 255, .4)";
}
}
}
//定時輪播圖片(每3秒切換一張圖片)
function doStart() {
if (time == null) {
time = setInterval(function () {
count++;
show(count);
if (count >= 8) {
count = 0;
}
}, 3000);
}
}
//停止輪播圖片
function doStop() {
if (time != null) {
clearInterval(time);
time = null;
}
}
//鼠標移到圓點上圖片會相應切換，并且之后會點亮下一個圓點 而不是未移到圓點前的下一個圓點
function doMove(x) {
show(x);
//將位置賦給count，圖片就會從該圖片的下一張開始切換
count = x;
//當鼠標移到最后一個圓點時，需要將count變?yōu)?,不然執(zhí)行doStart()里的count++，count就會變?yōu)?，越界了
if (count == 8) {
count = 0;
}
}
/*
對于i 、count和show(x)里x的關系：
i = [0,7];
x = [1,8];
count = [1,8];
*/
//點擊左邊按鈕向左切換圖片
function doLeftClick() {
for (var i = 0; i < imglist.length; i++) {
//判斷當前在展示的是哪張圖片
if (imglist[i].style.display == "block") {
if (i == 0) {
show(8);
// 忘掉這句后，break會直接退出，當左按鈕按到最右的圓點，會直接忽略圓點1，直接跳到圓點2
count = 0;
//保證切換是3秒鐘
doStop();
doStart();
break;
}
show(i);
count = i;
//保證切換是3秒鐘
doStop();
doStart();
break;
}
}
}
//點擊右邊按鈕向右切換圖片
function doRightClick() {
for (var i = 0; i < imglist.length; i++) {
//判斷當前在展示的是哪張圖片
if (imglist[i].style.display == "block") {
if (i == 7) {
show(1);
count = 1;
doStop();
doStart();
break;
}
show(i + 2);
count = i + 2;
//就不會出現(xiàn)切換到?jīng)]有圖片的情況
if (count >= 8) {
count = 0;
}
doStop();
doStart();
break;
}
}
}
doStart();
//默認打開頁面顯示的是第一張圖片
//（不加，會出現(xiàn)第1個圓點亮也就是剛打開頁面時，左按鈕沒反應）
doMove(1);
</script>遇到的難點：
雖說輪播圖看起來還蠻簡單的，但實現(xiàn)起來還挺多問題的。不過我發(fā)現(xiàn)的都解決掉了。
圓點與按鈕放置在圖片上
自動切換圖片了但對應的圓點沒有點亮
鼠標移到圓點上圖片切換了，但下一個自動點亮的圓點卻是未移到圓點前的下一個
第1個圓點亮也就是剛打開頁面時，左按鈕沒反應
當左按鈕按到最右的圓點，會直接忽略圓點1，直接跳到圓點2
在最后一個圓點時點擊右按鈕時，會出現(xiàn)切換到?jīng)]有圖片的情況
點左按鈕切換時間大概2秒，點右按鈕切換時間大概5秒，時間并沒有達到標準的3秒
看完上述內(nèi)容，你們對使用JavaScript怎么模仿一個京東輪播圖效果有進一步的了解嗎？如果還想了解更多知識或者相關內(nèi)容，請關注億速云行業(yè)資訊頻道，感謝大家的支持。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
