JS完結：用JavaScript寫個功能完善的電商輪播圖
輪播圖：自動輪播+點選對應點切換+下一張+選單導航
先講思路，再上程式碼：
先拿HTML整體佈局，先輪播圖，然後對應小圓點點選跳轉，上一張和下一張。
然後左側選單欄的佈局，滑鼠移上去顯示不同內容。
CSS來完成點選或滑過時的樣式，用position和display和加className來實現覆蓋或替換內容。先看圖：
最後用JS來實現輪播動態效果，頁面互動。主要用到dom獲取元素，然後遍歷陣列，簡單迴圈判斷，定時器的使用。
1.先完成自動輪播
先封裝一個通過ID獲取元素的函式byId方便以後呼叫
function byId(id){ //id是個字串型別，先判斷，封裝獲取元素
return typeof(id)==="string"?document.getElementById(id):id;
}
改變圖片函式：
function changeImg(){
for(var i=0,len=dots.length;i<len;i++){
dots[i].className = "";
pics[i].style.display = "none";//遍歷所有的pics隱藏
}
dots[index].className = "active";
pics[index].style.display = "block";
}
剛開始圖片輪播和點選對應小數點想分開寫，後面發現可以放在一起，元素個數都相同。那何必再多寫一遍呢。所以和下面的寫在一起。
2.完善然後點選對應
滑鼠滑入時：
function slideImg(){
var main = byId("main");
var banner = byId("banner");
var menuContent = byId("menu-content");
main.onmouseover = function(){
stopAutoPlay();//滑入停止輪播
}
main.onmouseout = function(){
startAutoPlay();
}
main.onmouseout();//自動在main上觸發滑過
// 點選小點導航切換
for(var i=0,len=dots.length;i<len;i++){
dots[i].id = i;
dots[i].onclick = function(){
index = this.id;
changeImg();//點選則呼叫切換圖片
}
}
}
3.然後上下一張
// 下一張
next.onclick = function(){
index++;
if(index>=size) index=0;
changeImg();
}
// 上一張
prev.onclick = function(){
index--;
if(index<0) index=size-1;
changeImg();
}
完整程式碼在後面。
任何事情不可能一次就做的完美，一次一次的修改才能不斷完善功能。
不可能一次就html做好，再寫css，js。都是憑經驗不斷嘗試驗證來實現。
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main" id="main">
<div class="menu-box">
</div>
<!--內容-->
<div class="sub-menu hide" id="sub-menu">
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">手機、配件</div>
<div class="sub-row">
<span class="bold mr10">手機通訊：</span>
<a href="">手機</a>
<span class="ml10 mr10">/</span>
<a href="">手機維修</a>
<span class="ml10 mr10">/</span>
<a href="">以舊換新</a>
</div>
<div class="sub-row">
<span class="bold mr10">手機配件：</span>
<a href="">手機殼</a>
<span class="ml10 mr10">/</span>
<a href="">手機儲存卡</a>
<span class="ml10 mr10">/</span>
<a href="">資料線</a>
<span class="ml10 mr10">/</span>
<a href="">充電器</a>
<span class="ml10 mr10">/</span>
<a href="">電池</a>
</div>
<div class="sub-row">
<span class="bold mr10">運營商：</span>
<a href="">中國聯通</a>
<span class="ml10 mr10">/</span>
<a href="">中國移動</a>
<span class="ml10 mr10">/</span>
<a href="">中國電信</a>
</div>
<div class="sub-row">
<span class="bold mr10">智慧裝置：</span>
<a href="">智慧手環</a>
<span class="ml10 mr10">/</span>
<a href="">智慧家居</a>
<span class="ml10 mr10">/</span>
<a href="">智慧手錶</a>
<span class="ml10 mr10">/</span>
<a href="">其他配件</a>
</div>
<div class="sub-row">
<span class="bold mr10">娛樂：</span>
<a href="">耳機</a>
<span class="ml10 mr10">/</span>
<a href="">音響</a>
<span class="ml10 mr10">/</span>
<a href="">收音機</a>
<span class="ml10 mr10">/</span>
<a href="">麥克風</a>
</div>
</div>
</div>
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">電腦</div>
<div class="sub-row">
<span class="bold mr10">電腦：</span>
<a href="">筆記本</a>
<span class="ml10 mr10">/</span>
<a href="">平板</a>
<span class="ml10 mr10">/</span>
<a href="">一體機</a>
</div>
<div class="sub-row">
<span class="bold mr10">電腦配件：</span>
<a href="">顯示器</a>
<span class="ml10 mr10">/</span>
<a href="">CPU</a>
<span class="ml10 mr10">/</span>
<a href="">主機板</a>
<span class="ml10 mr10">/</span>
<a href="">硬碟</a>
<span class="ml10 mr10">/</span>
<a href="">電源</a>
<span class="ml10 mr10">/</span>
<a href="">顯示卡</a>
<span class="ml10 mr10">/</span>
<a href="">其他配件</a>
</div>
<div class="sub-row">
<span class="bold mr10">遊戲裝置：</span>
<a href="">遊戲機</a>
<span class="ml10 mr10">/</span>
<a href="">耳機</a>
<span class="ml10 mr10">/</span>
<a href="">遊戲軟體</a>
</div>
<div class="sub-row">
<span class="bold mr10">網路產品：</span>
<a href="">路由器</a>
<span class="ml10 mr10">/</span>
<a href="">網路機頂盒</a>
<span class="ml10 mr10">/</span>
<a href="">交換機</a>
<span class="ml10 mr10">/</span>
<a href="">儲存卡</a>
<span class="ml10 mr10">/</span>
<a href="">網路卡</a>
</div>
<div class="sub-row">
<span class="bold mr10">外部產品：</span>
<a href="">滑鼠</a>
<span class="ml10 mr10">/</span>
<a href="">鍵盤</a>
<span class="ml10 mr10">/</span>
<a href="">U盤</a>
<span class="ml10 mr10">/</span>
<a href="">行動硬碟</a>
<span class="ml10 mr10">/</span>
<a href="">滑鼠墊</a>
<span class="ml10 mr10">/</span>
<a href="">電腦清潔</a>
</div>
</div>
</div>
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">家用電器</div>
<div class="sub-row">
<span class="bold mr10">電視：</span>
<a href="">國產品牌</a>
<span class="ml10 mr10">/</span>
<a href="">韓國品牌</a>
<span class="ml10 mr10">/</span>
<a href="">歐美品牌</a>
</div>
<div class="sub-row">
<span class="bold mr10">空調：</span>
<a href="">顯示器</a>
<span class="ml10 mr10">/</span>
<a href="">櫃式</a>
<span class="ml10 mr10">/</span>
<a href="">中央</a>
<span class="ml10 mr10">/</span>
<a href="">壁掛式</a>
</div>
<div class="sub-row">
<span class="bold mr10">冰箱：</span>
<a href="">多門</a>
<span class="ml10 mr10">/</span>
<a href="">對開門</a>
<span class="ml10 mr10">/</span>
<a href="">三門</a>
<span class="ml10 mr10">/</span>
<a href="">雙門</a>
</div>
<div class="sub-row">
<span class="bold mr10">洗衣機：</span>
<a href="">滾筒式洗衣機</a>
<span class="ml10 mr10">/</span>
<a href="">迷你洗衣機</a>
<span class="ml10 mr10">/</span>
<a href="">洗烘一體機</a>
</div>
<div class="sub-row">
<span class="bold mr10">廚房電器：</span>
<a href="">油煙機</a>
<span class="ml10 mr10">/</span>
<a href="">洗碗機</a>
<span class="ml10 mr10">/</span>
<a href="">燃氣灶</a>
</div>
</div>
</div>
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">傢俱</div>
<div class="sub-row">
<span class="bold mr10">家紡：</span>
<a href="">被子</a>
<span class="ml10 mr10">/</span>
<a href="">枕頭</a>
<span class="ml10 mr10">/</span>
<a href="">四件套</a>
<span class="ml10 mr10">/</span>
<a href="">床墊</a>
</div>
<div class="sub-row">
<span class="bold mr10">燈具：</span>
<a href="">檯燈</a>
<span class="ml10 mr10">/</span>
<a href="">頂燈</a>
<span class="ml10 mr10">/</span>
<a href="">節能燈</a>
<span class="ml10 mr10">/</span>
<a href="">應急燈</a>
</div>
<div class="sub-row">
<span class="bold mr10">廚具：</span>
<a href="">烹飪鍋具</a>
<span class="ml10 mr10">/</span>
<a href="">餐具</a>
<span class="ml10 mr10">/</span>
<a href="">菜板刀具</a>
</div>
<div class="sub-row">
<span class="bold mr10">裝潢：</span>
<a href="">地毯</a>
<span class="ml10 mr10">/</span>
<a href="">沙發墊套</a>
<span class="ml10 mr10">/</span>
<a href="">裝飾字畫</a>
<span class="ml10 mr10">/</span>
<a href="">照片牆</a>
<span class="ml10 mr10">/</span>
<a href="">窗簾</a>
</div>
<div class="sub-row">
<span class="bold mr10">生活日用：</span>
<a href="">收納用品</a>
<span class="ml10 mr10">/</span>
<a href="">浴室用品</a>
<span class="ml10 mr10">/</span>
<a href="">雨傘雨衣</a>
</div>
</div>
</div>
</div>
<!-- 主選單 -->
<div class="menu-content" id="menu-content">
<div class="menu-item">
<a href="">
<span>手機、配件</span>
<i class="icon"></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>電腦</span>
<i class="icon"></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家用電器</span>
<i class="icon"></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>傢俱</span>
<i class="icon"></i>
</a>
</div>
</div>
<!-- 輪播圖 先實現-->
<div class="banner" id="banner">
<a href="">
<div class="banner-slide slide1 slide-active"></div>
</a>
<a href="">
<div class="banner-slide slide2"></div>
</a>
<a href="">
<div class="banner-slide slide3"></div>
</a>
</div>
<!-- 上下一張 -->
<a href="javascript:void(0)" class="button prev" id="prev"></a>
<a href="javascript:void(0)" class="button next" id="next"></a>
<!-- 圓點導航 -->
<div class="dots" id="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
CSS
*{
margin:0;
padding:0;
}
@font-face {font-family: 'iconfont';
src: url('../img/font/iconfont.eot');
src: url('../img/font/iconfont.eot') format('embedded-opentype'),
url('../img/font/iconfont.woff') format('woff'),
url('../img/font/iconfont.ttf') format('truetype'),
url('../img/font/iconfont.svg#iconfont') format('svg');
}
a{
text-decoration: none;
}
a:link,a:visited{
color:#5e5e5e;
}
body{
font-family:"微軟雅黑";
color: #14191e;
}
.main{
width:1200px;
height:460px;
margin:30px auto;
position:relative;
overflow:hidden; /*超出部分隱藏*/
}
.banner{
width:1200px;
height:460px;
overflow:hidden;
position:relative;
}
.banner-slide{
width:1200px;
height:460px;
background-repeat:no-repeat;
float:left;
display:none;
}
.slide-active{
display:block;
}
.slide1{
background-image:url(../img/bg1.jpg);
}
.slide2{
background-image:url(../img/bg2.jpg);
}
.slide3{
background-image:url(../img/bg3.jpg);
}
.button{
position: absolute;
transform:rotate(180deg);
top: 50%;
left: 244px;
height: 80px;
width: 40px;
margin-top:-40px;
background:url(../img/arrow.png) center center no-repeat;
}
.next{
transform:rotate(0deg);
left:auto;/*讓上面的left別起作用，因為同時有left和right會選left*/
right:0;
}
.button:hover{
/*background:#333;這樣不行，背景顏色會覆蓋上面的背景圖片，要寫下面的背景顏色*/
background-color:#333;
opacity: 0.8;
filter:alpha(opacity=80);/*為了相容瀏覽器*/
}
.dots {
position: absolute;
bottom: 24px;
right: 0;
text-align: right;
padding-right: 24px;
line-height: 12px;
}
.dots span {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-left: 8px;
background-color: rgba(7, 17, 27, 0.4);
cursor: pointer;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}
.dots span.active{
box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
background-color: #fff;
}
/* menu-box */
.menu-box {
background:rgba(7, 17, 27, 0.5);
opacity: 0.5;
position: absolute;
left: 0px;
top: 0px;
width: 244px;
height: 460px;
z-index: 1;/*把優先順序提高*/
}
.menu-content{
position: absolute;
left: 0px;
top: 0px;
width: 244px;
height: 460px;
z-index: 2;
padding-top: 6px;
}
.menu-item{
height: 64px;
line-height: 66px;
font-size: 12px;
cursor: pointer;
padding: 0 24px;
position: relative;
}
.menu-item a{
display: block;
color: #fff;
padding: 0 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
height: 63px;
font-size:16px;
}
.menu-item:last-child a{
border-bottom:none;
}
.menu-item i{
position: absolute;
right: 32px;
top: 24px;
color: rgba(255,255,255,0.5);
font-size: 24px;
top: 2px;
font-style:normal;
font-weight:normal;
font-family:"iconfont";
}
.sub-menu {
border:1px solid #d9dde1;
background:#fff;
position: absolute;
left: 244px;
top: 0px;
width: 730px;
height: 458px;
z-index: 581;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
}
.hide{
display:none;
}
.inner-box{
width:100%;
height:100%;
background:url(../img/fe.png) no-repeat;
display:none;
}
.sub-inner-box{
width: 652px;
margin-left: 40px;
overflow: hidden;
}
.title{
color: #f01414;
font-size: 16px;
line-height: 16px;
margin-top: 28px;
font-weight: bold;
margin-bottom: 30px;
}
.sub-row{
margin-bottom:25px;
}
.bold{
font-weight:700;
}
.mr10{
margin-right:10px;
}
.ml10{
margin-left:10px;
}
JS
var timer = null,
index = 0,
pics = byId("banner").getElementsByTagName("div"),
dots = byId("dots").getElementsByTagName("span"),
size = pics.length,
prev = byId("prev"),
next = byId("next"),
menuItems = byId("menu-content").getElementsByTagName("div"),
subMenu = byId("sub-menu"),
subItems = subMenu.getElementsByClassName("inner-box");
function byId(id){ //id是個字串型別，先判斷，封裝獲取元素
return typeof(id)==="string"?document.getElementById(id):id;
}
// 清除定時器,停止自動播放
function stopAutoPlay(){
if(timer){
clearInterval(timer);//清除定時器
}
}
// 圖片自動輪播
function startAutoPlay(){
timer = setInterval(function(){
index++;
if(index >= size){
index = 0;
}
changeImg();
},3000)
}
function changeImg(){
for(var i=0,len=dots.length;i<len;i++){
dots[i].className = "";
pics[i].style.display = "none";//遍歷所有的pics隱藏
}
dots[index].className = "active";
pics[index].style.display = "block";
}
function slideImg(){
var main = byId("main");
var banner = byId("banner");
var menuContent = byId("menu-content");
main.onmouseover = function(){
stopAutoPlay();//滑入停止輪播
}
main.onmouseout = function(){
startAutoPlay();
}
main.onmouseout();//自動在main上觸發滑過
// 點選小點導航切換
for(var i=0,len=dots.length;i<len;i++){
dots[i].id = i;
dots[i].onclick = function(){
index = this.id;
changeImg();//點選則呼叫切換圖片
}
}
// 下一張
next.onclick = function(){
index++;
if(index>=size) index=0;
changeImg();
}
// 上一張
prev.onclick = function(){
index--;
if(index<0) index=size-1;
changeImg();
}
// 選單
for(var m=0,mlen=menuItems.length;m<mlen;m++){
menuItems[m].setAttribute("data-index",m);
menuItems[m].onmouseover = function(){
subMenu.className = "sub-menu";
var idx = this.getAttribute("data-index");
for(var j=0,jlen=subItems.length;j<jlen;j++){
subItems[j].style.display = 'none';
menuItems[j].style.background = "none";
}
subItems[idx].style.display = "block";
menuItems[idx].style.background = "rgba(0,0,0,0.1)";
}
}
subMenu.onmouseover = function(){
this.className = "sub-menu";
}
subMenu.onmouseout = function(){
this.className = "sub-menu hide";
}
banner.onmouseout = function(){
subMenu.className = "sub-menu hide";
}
menuContent.onmouseout = function(){
subMenu.className = "sub-menu hide";
}
}
slideImg();
總結：
功能雖然不多，但實現起來還是需要2h左右的，總之先要有思路，總體佈局，然後一步一步來，然後不斷調整程式碼。反正函式就這麼多，只能說要多多學習，熟能生巧吧！
每日一詞：splendid/ magnificent/ impressive/ marvelous 替換grand！
相關文章
- 用原生JS實現 圖片輪播切換 功能JS
- 手把手和你用原生JS寫一個迴圈播放圖片輪播JS
- js 輪播圖 (原生)JS
- 用RecyclerView打造一個輪播圖View
- js實現輪播圖JS
- 用原生js實現圖片輪播器JS
- 輪播圖（JavaScript定時器）JavaScript定時器
- 用js寫的輪播圖，八位女明星，你翻誰的牌！JS
- 授人以漁式解析原生JS寫輪播圖JS
- 原生js實現輪播圖JS
- 記一個JavaScript圖片輪播思路與程式碼JavaScript
- 原生JS實現輪播圖的效果JS
- 前端基礎功能，原生js實現輪播圖例項教程前端JS
- 原生 JS 擼一個輪播圖（支援拖拽切屏）JS
- 用RecyclerView打造一個輪播圖（進階版）View
- jQuery輪播圖之上下輪播jQuery
- 面向Vue新人：使用Vue寫一個圖片輪播元件Vue元件
- JavaScript焦點圖輪播效果詳解JavaScript
- 微信小程式功能-----基礎輪播圖配置微信小程式
- Flutter輪播圖Flutter
- vue輪播圖Vue
- iOS 輪播圖iOS
- javascript實現的焦點圖輪播效果詳解JavaScript
- 利用輪播原理結合hammer.js實現簡潔的滑屏功能JS
- Flutter 封裝一個 Banner 輪播圖Flutter封裝
- Android 自定義一個輪播圖Android
- 小程式輪播圖應用——技巧篇
- 七天用 Go 寫個 docker（完結篇）GoDocker
- VUE開發一個圖片輪播的元件Vue元件
- 原生JS實現一個無縫輪播圖外掛(支援vue)JSVue
- React 用axios 獲取遍歷json 引入swiper輪播圖ReactiOSJSON
- JavaScript字串動畫輪播效果JavaScript字串動畫
- jQuery Mobile圖片輪轉輪播jQuery
- 文字輪播與圖片輪播？CSS 不在話下CSS
- JS實現八種焦點輪播圖（下）JS
- JavaScript實戰專案：移動端 Touch 輪播圖JavaScript
- javascript基礎（html5輪播圖）（四十四）JavaScriptHTML
- Flutter 如何封裝一個 Banner 輪播圖？Flutter封裝