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屬性函數
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 ){ //修改層級
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\’
}
//鼠標移入移出
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里的，也可以單獨寫一個js文件，在引入到html界面
文章來源：腳本之家，原文鏈接：https://www.jb51.net/css/744188.html
關于三五互聯
成都西維數碼科技有限公司成立于2002年，注冊資本1000萬元，總部坐落于“天府之國”——成都，旗下品牌三五互聯 （m.shinetop.cn） ，深耕IDC行業十多年，已擁有北京、廣東、鄭州、成都、綿陽、香港等中國多個云計算IDC安全數據中心和美國等海外數據中心。我們先后自主研發的虛擬主機、彈性云服務器、西數企業云郵箱等產品都廣受用戶歡迎。我們始終堅持用戶體驗至上的價值導向，深入挖掘用戶需求，目前，有超過一百萬用戶通過我們注冊并管理了超過一千萬個域名，累計有超過50萬網站在我們的自主研發的云主機平臺上運行，服務的用戶有：寶貝回家尋子網、四川大學、鏈家網（北京）科技有限公司、四川省互聯網協會、沱牌集團、譚木匠、中鐵二局、四川省中國青年旅行社、富森美家居網上商城等
我們始終堅持“以人為本，客戶為尊，永續創新”的核心價值觀，搶抓各種發展機遇，不斷創新發展理念，不斷轉變發展方式，不斷破解發展難題，隨著企業的發展，我們經營的業務也不斷發展為以云計算為基礎的云主機業務、域名注冊、域名交易等其他相關業務，公司從最初只有幾個員工發展到如今擁有近二百人的精英團隊，并在中國IDC、云計算行業中占有一席之地，位列國內三強。成為擁有多項自主知識產權的國家高新技術企業，ICANN和CNNIC雙認證的國際頂級域名注冊服務機構，首批獲得國家工信部頒發的全國云服務牌照企業之一。