CSS代碼：
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.albumBox{
width: 1200px;
height: 400px;
margin: 0 auto;
border: 1px solid #000;
}
.smallBox{
height: 400px;
line-height: 400px;
position: relative;
}
.smallPicBox{
width: 1100px;
height: 400px;
float: left;
position: relative;
}
.smallPicBox ul{
width: 100%;
height: 400px;
}
.smallPicBox li{
width: 320px;
height: 400px;
float: left;
border: 1px solid #000;
box-sizing: border-box;
}
.smallBox .current::after{
content: \”\\25b2\”;
position: absolute;
top: -31px;
left: 70px;
color: red;
}
.arrowLeft{
width: 50px;
height: 400px;
position: absolute;
left: 0;
border: 1px solid #000;
box-sizing: border-box;
background-color: gray;
z-index: 10;
}
.arrowRight{
width: 50px;
height: 400px;
position: absolute;
right: 0;
border: 1px solid #000;
box-sizing: border-box;
background-color: gray;
z-index: 10;
}
</style>
JS代碼：
<script>
function posi(li){ //修改li屬性函數(shù)
var n1=0
for(var x=0;x<li.length;x ){ //修改位置
li[x].style.left=n1 \’px\’
n1=n1 150
}
for(var i=0;i<li.length/2;i ){ //修改層級(jí)
li[i].style.zIndex=i 1
li[li.length-1-i].style.zIndex=i 1
}
li[3].style.zIndex=\’4\’
var n2=0.3
for(var j=0;j<li.length/2;j ){ //縮放
n2=parseFloat(n2 0.2)
li[j].style.transform=\’scale(\’ n2 \’)\’
li[li.length-1-j].style.transform=\’scale(\’ n2 \’)\’
}
li[3].style.transform=\’scale(1)\’
var n3=0.3
for(var k=0;k<li.length/2;k ){ //修改透明度
n3=parseFloat(n3 0.2)
li[k].style.opacity=n3
li[li.length-1-k].style.opacity=n3
}
li[3].style.opacity=\’1\’
}
//鼠標(biāo)移入移出
temerId=setInterval(function(){
arrowLeft.click()
}, 1000);
arrowLeft.onmouseover=function(){
clearInterval(temerId)
}
arrowLeft.onmouseout=function(){
temerId=setInterval(function(){
arrowLeft.click()
}, 1000);
}
arrowRight.onmouseover=function(){
clearInterval(temerId)
}
arrowRight.onmouseout=function(){
temerId=setInterval(function(){
arrowLeft.click()
}, 1000);
}
</script>
注：本例js是直接寫在body里的，也可以單獨(dú)寫一個(gè)js文件，在引入到html界面
文章來(lái)源：腳本之家，原文鏈接：https://www.jb51.net/css/744188.html
關(guān)于西部數(shù)碼
成都西維數(shù)碼科技有限公司成立于2002年，注冊(cè)資本1000萬(wàn)元，總部坐落于“天府之國(guó)”——成都，旗下品牌西部數(shù)碼 （youyuetrip.com） ，深耕IDC行業(yè)十多年，已擁有北京、廣東、鄭州、成都、綿陽(yáng)、香港等中國(guó)多個(gè)云計(jì)算IDC安全數(shù)據(jù)中心和美國(guó)等海外數(shù)據(jù)中心。我們先后自主研發(fā)的虛擬主機(jī)、彈性云服務(wù)器、西數(shù)企業(yè)云郵箱等產(chǎn)品都廣受用戶歡迎。我們始終堅(jiān)持用戶體驗(yàn)至上的價(jià)值導(dǎo)向，深入挖掘用戶需求，目前，有超過(guò)一百萬(wàn)用戶通過(guò)我們注冊(cè)并管理了超過(guò)一千萬(wàn)個(gè)域名，累計(jì)有超過(guò)50萬(wàn)網(wǎng)站在我們的自主研發(fā)的云主機(jī)平臺(tái)上運(yùn)行，服務(wù)的用戶有：寶貝回家尋子網(wǎng)、四川大學(xué)、鏈家網(wǎng)（北京）科技有限公司、四川省互聯(lián)網(wǎng)協(xié)會(huì)、沱牌集團(tuán)、譚木匠、中鐵二局、四川省中國(guó)青年旅行社、富森美家居網(wǎng)上商城等
我們始終堅(jiān)持“以人為本，客戶為尊，永續(xù)創(chuàng)新”的核心價(jià)值觀，搶抓各種發(fā)展機(jī)遇，不斷創(chuàng)新發(fā)展理念，不斷轉(zhuǎn)變發(fā)展方式，不斷破解發(fā)展難題，隨著企業(yè)的發(fā)展，我們經(jīng)營(yíng)的業(yè)務(wù)也不斷發(fā)展為以云計(jì)算為基礎(chǔ)的云主機(jī)業(yè)務(wù)、域名注冊(cè)、域名交易等其他相關(guān)業(yè)務(wù)，公司從最初只有幾個(gè)員工發(fā)展到如今擁有近二百人的精英團(tuán)隊(duì)，并在中國(guó)IDC、云計(jì)算行業(yè)中占有一席之地，位列國(guó)內(nèi)三強(qiáng)。成為擁有多項(xiàng)自主知識(shí)產(chǎn)權(quán)的國(guó)家高新技術(shù)企業(yè)，ICANN和CNNIC雙認(rèn)證的國(guó)際頂級(jí)域名注冊(cè)服務(wù)機(jī)構(gòu)，首批獲得國(guó)家工信部頒發(fā)的全國(guó)云服務(wù)牌照企業(yè)之一。
