資訊專(zhuān)欄INFORMATION COLUMN
摘要：圖片，按鈕，上下頁(yè)必須是同級(jí)元素使用按鈕變色，需要定義的樣式推薦使用插件，手機(jī)端很好用，端貌似不太好用路標(biāo)
.main{
width: 100%;
min-width: 1100px;
display: table;
margin: 0 auto;
text-align: center;
position: relative;
}
.pic {
width: 100%;
min-width: 1100px;
height: 500px;
z-index: 0;
}
.pic ul {
width: 100%;
height: 100%;
}
.pic ul li {
width: 100%;
height: 100%;
list-style: none;
position: absolute;
top: 0;
right: 0;
}
.pic li img {
width: 100%;
height: 100%;
}
.btn{
width: 300px;
height: 1.5px;
margin: 0 auto;
z-index: 1;
position: relative;
top: -40px;
}
.btn ul {
width: auto;
height: 1.5px;
display: table;
margin: 0 auto;
}
.btn ul li {
width: 37px;
height: 1.5px;
float: left;
list-style: none;
margin: 0 6px;
background: #000;
}
.btn .btn-style{
background-color: yellow;
}
圖片，按鈕，上下頁(yè)必須是同級(jí)元素
<div class="main"> <div class="pic"> <ul> <li><img src="img/index/b1.jpg"/>li> <li style="display: none;"><img src="img/index/b2.jpg"/>li> <li style="display: none;"><img src="img/index/b3.jpg"/>li> <li style="display: none;"><img src="img/index/b4.jpg"/>li> ul> div> <div class="btn"> <ul> <li style="background: yellow;">li> <li>li> <li>li> <li>li> ul> div> <div class="btn-next">div> <div class="btn-pre">div> div>
$(document).ready(function() { //使用按鈕變色，需要定義.btn-style的樣式 Carousel(.pic); }); function Carousel(car){ var index = 0; var interval; var pic = $(car); var btn = pic.siblings(.btn); var pre = pic.siblings(.btn-pre); var next = pic.siblings(.btn-next); var num = pic.find(li).length; btn.find(ul li).mouseover(function() { index = $(this).index(); display(index); }); pre.click(function(){ index--; if(index < 0) { index = num; } display(index); }); next.click(function(){ index++; if(index > num) { index = 0; } display(index); }); function display() { pic.find(ul li).eq(index).fadeIn(slow); pic.find(ul li).eq(index).siblings().fadeOut(fast); btn.find(ul li).eq(index).addClass(btn-style); btn.find(ul li).eq(index).siblings().removeClass(btn-style); } interval = setInterval(function() { index++; if(index > num) { index = 0; } display(index); }, 2000); pic.parent().mouseenter(function() { clearInterval(interval); }); pic.parent().mouseleave(function() { interval = setInterval(function() { index++; if(index > num) { index = 0; } display(index); }, 2000); }); }
推薦使用swiper插件，手機(jī)端很好用，pc端貌似ie不太好用
路標(biāo)： http://www.swiper.com.cn/
swiper4 api ：http://www.swiper.com.cn/api/index.html
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/2047.html
摘要：站在這個(gè)時(shí)間點(diǎn)上，我對(duì)自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。關(guān)于我第三次面試失敗的經(jīng)歷，依然是與輪播圖有關(guān)。當(dāng)然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進(jìn)大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時(shí)間的齒輪已經(jīng)來(lái)到了2017年的11月份，距離2018年僅僅還剩下不到兩...
摘要：站在這個(gè)時(shí)間點(diǎn)上，我對(duì)自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。關(guān)于我第三次面試失敗的經(jīng)歷，依然是與輪播圖有關(guān)。當(dāng)然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進(jìn)大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時(shí)間的齒輪已經(jīng)來(lái)到了2017年的11月份，距離2018年僅僅還剩下不到兩...
摘要：源碼下載地址鏈接提取碼寫(xiě)這篇文章，當(dāng)做是對(duì)自已這一天的一個(gè)總結(jié)寫(xiě)輪播圖要準(zhǔn)備的東西三張尺寸大小一樣的圖片分為三個(gè)模塊模塊，模塊，模塊模塊輪播圖引用本地固定的庫(kù)引入你寫(xiě)的文件引入你寫(xiě)的文件為你本地的圖片路徑，為你圖片的寬度，為類(lèi)名左滑右滑 showImg(https://segmentfault.com/img/bVbi0YG?w=1408&h=363); 源碼下載地址：鏈接：https...
摘要：源碼下載地址鏈接提取碼寫(xiě)這篇文章，當(dāng)做是對(duì)自已這一天的一個(gè)總結(jié)寫(xiě)輪播圖要準(zhǔn)備的東西三張尺寸大小一樣的圖片分為三個(gè)模塊模塊，模塊，模塊模塊輪播圖引用本地固定的庫(kù)引入你寫(xiě)的文件引入你寫(xiě)的文件為你本地的圖片路徑，為你圖片的寬度，為類(lèi)名左滑右滑 showImg(https://segmentfault.com/img/bVbi0YG?w=1408&h=363); 源碼下載地址：鏈接：https...
閱讀 943·2023-04-25 19:43
閱讀 4239·2021-11-30 14:52
閱讀 4027·2021-11-30 14:52
閱讀 4132·2021-11-29 11:00
閱讀 4023·2021-11-29 11:00
閱讀 4155·2021-11-29 11:00
閱讀 3871·2021-11-29 11:00
閱讀 6761·2021-11-29 11:00
