jQuery中面向對象思想實現盒子內容切換

這裡主要是模擬小米官網中的首頁的內容模塊實現的主要動態效果

佈局：採用了bootstrap框架進行佈局，及其其中的字體圖標

html：

<!-- 內容 -->
<div class="content_box">
<h2>內容</h2>
<div class="row content_list">
<div class="col-md-3 book_box border01">
<ul>
<li><img src="https://i1.mifile.cn/a4/61e1385e-54de-48f3-8717-5e4f4b1cdd14"></li>
<li><img src="https://s01.mifile.cn/i/index/more-duokan.jpg"></li>
<li><img src="https://i1.mifile.cn/a4/5e5da924-84e3-4959-9e25-5891cdf30757"></li>
</ul>
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-right"></span>
<div class="white_dian_box">
<div class="white_dian active"></div>
</div>
</div>
<div class="col-md-3 book_box border02">
<ul>
<li>
<img src="https://i1.mifile.cn/a4/xmad_15106277789889_NVKse.png">
</li>
<li>
<img src="https://i1.mifile.cn/a4/xmad_15106285428716_UgNzb.png">
</li>
<li>
<img src="https://i1.mifile.cn/a4/xmad_151062859387_ECIuV.png">
</li>
<li>
<img src="https://s01.mifile.cn/i/index/more-miui.jpg">
</li>

</ul>
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-right"></span>
<div class="white_dian_box">
</div>
</div>
<div class="col-md-3 book_box border03">
<ul>
<li>
<img src="https://i1.mifile.cn/a4/xmad_15094191317724_FNyjV.png">
</li>
<li>
<img src="https://i1.mifile.cn/a4/T1czW_BXCv1R4cSCrK.png">
</li>
<li>
<img src="https://i1.mifile.cn/a4/695c909b-f541-4575-bace-d08b6465025b">
</li>
<li>
<img src="https://s01.mifile.cn/i/index/more-game.jpg">
</li>

</ul>
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-right"></span>
<div class="white_dian_box">
</div>
</div>
<div class="col-md-3 book_box border04">
<ul>
<li>
<img src="https://i1.mifile.cn/a4/3332da7d-4056-4694-9548-c83b7b3af7d3">
</li>
<li>
<img src="https://i1.mifile.cn/a4/T1TkKvBCKv1R4cSCrK.png">
</li>
<li>
<img src="https://i1.mifile.cn/a4/T15VZvB5Kv1R4cSCrK.png">
</li>
<li>
<img src="https://s01.mifile.cn/i/index/more-app.jpg">
</li>

</ul>
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-right"></span>
<div class="white_dian_box">
</div>
</div>
</div>
</div>
</div>

css：

/*內容盒子屬性*/
.container .content_box .content_list >div{width: 275px; overflow: hidden;}
.container .content_box .content_list .book_box{padding: 0;margin-left: 15px;height: 300px;
background: white;}
.container .content_box .content_list .border01{border-top: 1px solid orange;}
.container .content_box .content_list .border02{border-top: 1px solid green;}
.container .content_box .content_list .border03{border-top: 1px solid red;}
.container .content_box .content_list .border04{border-top: 1px solid blue;}
.container .content_box .content_list .book_box:hover{transform:translate3d(0,-2px,0);
box-shadow:0px 15px 30px rgba(0,0,0,0.1);}
.container .content_box .content_list .book_box ul li{width: 275px; float: left;}
.container .content_box .content_list .book_box .glyphicon-chevron-left,
.container .content_box .content_list .book_box .glyphicon-chevron-right{position: absolute;
top: 40%; left: 0; padding: 10px;}
.container .content_box .content_list .book_box .glyphicon-chevron-right{left: 89%;}
.container .content_box .content_list .book_box .glyphicon-chevron-left:hover,
.container .content_box .content_list .book_box .glyphicon-chevron-right:hover{
background-color: #D9D9D9;color: #fff;}
/*白點屬性*/
.container .content_box .content_list .book_box .white_dian_box{position: absolute; bottom: 20px;
left:30%;}
.container .content_box .content_list .book_box .white_dian{width: 8px; height: 8px;
background: #ccc; border-radius: 50%;float: left;margin-left: 20px; }
.container .content_box .content_list .book_box .active{background: #fff; border:1px solid #FF6700;}

js:代碼

// 內容里的js
var change_box={
box_length:0,
box_width:275,
cur_el:'',//當前點擊的盒子
cur_el_index:'',
all_el:[],//存放不同節點的長度、盒子的位置
init:function(cur_box){
this.box_length = $('.content_box .book_box li').length
$('.content_box .book_box ul').css('width',this.box_length*this.box_width)

$(cur_box).each((index,item)=>{
let li_length = $(item).find('li').length
//this.box_length = $(item).find('li').length
this.all_el.push({
box_length:li_length,
cur_index:0
})
$(item).find('ul').css('width',li_length*this.box_width)

// 創建白點
this.create_white_dian(li_length,item)
})
// console.log(this.all_el)
$(cur_box).click((event)=>{
this.cur_el = $(event.currentTarget)//可以確定是不同的book_box
this.cur_el_index = this.cur_el.index()
if($(event.target).hasClass('glyphicon-chevron-left')){
this.change_to_left()
}else if($(event.target).hasClass('glyphicon-chevron-right')){
this.change_to_right()
}else if($(event.target).hasClass('white_dian')){
this.change_to_index($(event.target).index())
}
})
},
//顯示內容和白點高亮的方法
show_content:function(show_index){
this.cur_el.find('ul').css('margin-left',-(show_index*this.box_width))
this.cur_el.find('.white_dian_box>div').removeClass('active').eq(show_index).addClass('active')
},
//點擊點擊白點顯示對應的內容
change_to_index:function(index){
this.show_content(index)
this.all_el[this.cur_el_index].cur_index = index
},
// 創建白點方法
create_white_dian:function(dian_num,item){
let dian_html = ''
for (var i = 0; i<dian_num; i++) {
let active = ''
if(i == 0){
active = 'active'
}
dian_html += '<div class="white_dian '+active+'"></div>'
}
$(item).find('.white_dian_box').html(dian_html)
},
change_to_left:function(){
let cur_el_different_index = this.all_el[this.cur_el_index]
cur_el_different_index.cur_index--
if(cur_el_different_index.cur_index<0){
cur_el_different_index.cur_index=cur_el_different_index.box_length-1
}
// this.cur_el.find('ul').css('margin-left',-(cur_el_different_index.cur_index*this.box_width))
this.show_content(cur_el_different_index.cur_index)
},
change_to_right:function(){
let cur_el_different_index = this.all_el[this.cur_el_index]
cur_el_different_index.cur_index++
if(cur_el_different_index.cur_index>=cur_el_different_index.box_length){
cur_el_different_index.cur_index=0
}
// this.cur_el.find('ul').css('margin-left',-(cur_el_different_index.cur_index*this.box_width))
// this.cur_el.find('.white_dian_box>div').removeClass('active').eq(cur_el_different_index
// .cur_index).addClass('active')
this.show_content(cur_el_different_index.cur_index)
}
}
change_box.init('.content_list .book_box')