無(wú)縫滾動(dòng)圖片輪播JS部分~實(shí)現(xiàn)輪播運(yùn)動(dòng)效果~
- <!DOCTYPE?html>??
- <html?lang="en">??
- ??
- <head>??
- ????<meta?charset="UTF-8">??
- ????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">??
- ????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">??
- ????<title>Document</title>??
- ????<style>??
- ????????*?{??
- ????????????margin:?0;??
- ????????????padding:?0;??
- ????????}??
- ??
- ????????:root?{??
- ????????????--iwidth:?960px;??
- ????????????--iheight:?540px;??
- ????????}??
- ??
- ????????body?{??
- ????????????background-color:?#7f8c8d;??
- ????????????width:?100vw;??
- ????????????height:?100vh;??
- ????????????display:?flex;??
- ????????????justify-content:?center;??
- ????????????align-items:?center;??
- ????????}??
- ??
- ????????#img?{??
- ????????????width:?var(--iwidth);??
- ????????????height:?var(--iheight);??
- ????????????box-shadow:?0?0?15px?rgba(0,?0,?0,?.7);??
- ????????????border-radius:?10px;??
- ????????????overflow:?hidden;??
- ????????????position:?relative;??
- ????????}??
- ??
- ????????#main?div?{??
- ????????????width:?var(--iwidth);??
- ????????????height:?var(--iheight);??
- ????????????border-radius:?10px;??
- ????????????flex-shrink:?0;??
- ????????????background-size:?cover;??
- ????????}??
- ??
- ????????#main?{??
- ????????????position:?absolute;??
- ????????????left:?0;??
- ????????????display:?flex;??
- ????????????gap:?10px;??
- ????????}??
- ??
- ????????#img1?{??
- ????????????background-image:?url(./img/lunbo1.png);??
- ????????}??
- ??
- ????????#img2?{??
- ????????????background-image:?url(./img/lunbo2.png);??
- ????????}??
- ??
- ????????#img3?{??
- ????????????background-image:?url(./img/lunbo3.png);??
- ????????}??
- ??
- ????????#img4?{??
- ????????????background-image:?url(./img/lunbo4.png);??
- ????????}??
- ??
- ????????#mask?{??
- ????????????width:?var(--iwidth);??
- ????????????height:?var(--iheight);??
- ????????????position:?absolute;??
- ????????????display:?flex;??
- ????????????justify-content:?space-between;??
- ????????}??
- ??
- ????????#mask?div?{??
- ????????????width:?25%;??
- ????????????height:?100%;??
- ????????????z-index:?999;??
- ????????????user-select:?none;??
- ????????????position:?relative;??
- ????????}??
- ??
- ????????.btn?{??
- ????????????display:?block;??
- ????????????width:?60px;??
- ????????????height:?60px;??
- ????????????border-radius:?10px;??
- ????????????background-color:?black;??
- ????????????opacity:?.5;??
- ????????????box-shadow:?0?0?10px?rgba(255,?255,?255.8);??
- ????????????color:?rgba(255,?255,?255,?.8);??
- ????????????font-size:?40px;??
- ????????????text-align:?center;??
- ????????????position:?absolute;??
- ????????????top:?50%;??
- ????????????/*水平方向移動(dòng)：（遮罩寬度-按鈕寬度）/2??*/??
- ????????????transform:?translate(90px,?-50%);??
- ????????????display:?none;??
- ????????}??
- ??
- ????????#l_mask:hover?.btn,??
- ????????#r_mask:hover?.btn?{??
- ????????????display:?block;??
- ????????}??
- ??
- ????????.btn:hover?{??
- ????????????cursor:?pointer;??
- ????????????background:?rgb(56,?17,?17,?.7);??
- ????????}??
- ????</style>??
- </head>??
- ??
- <body>??
- ????<div?id="img">??
- ????????<div?id="main">??
- ????????????<div?id="img1"></div>??
- ????????????<div?id="img2"></div>??
- ????????????<div?id="img3"></div>??
- ????????????<div?id="img4"></div>??
- ????????</div>??
- ????</div>??
- ????<div?id="mask">??
- ????????<div?id="l_mask">??
- ????????????<span?class="btn"><</span>??
- ????????</div>??
- ????????<div?id="r_mask">??
- ????????????<span?class="btn">></span>??
- ????????</div>??
- ????</div>??
- </body>??
- <script>??
- ????let?oMain?=?document.querySelector('#main');??
- ????let?oMask?=?document.querySelector('#mask');??
- ????let?oImg?=?document.querySelector('#main?div')??
- ????let?aButton?=?document.querySelectorAll('span')??
- ????let?speed?=?-5??
- ????oMain.innerHTML?+=?oMain.innerHTML;??
- ????let?move?=?()?=>?{??
- ????????if?(oMain.offsetLeft?<?-oMain.offsetWidth?/?2)?{??
- ????????????console.log("111");??
- ????????????oMain.style.left?=?'0px';??
- ????????}??
- ????????if?(oMain.offsetLeft?>?0)?{??
- ????????????console.log("222");??
- ????????????oMain.style.left?=?-oMain.offsetWidth?/?2?+?'px'??
- ????????}??
- ????????oMainoMain.style.left?=?oMain.offsetLeft?+?speed?+?"px";??
- ????}??
- ????let?timer?=?setInterval(move,?30)??
- ????oMask.addEventListener("mouseover",?()?=>?{??
- ????????clearInterval(timer);??
- ????})??
- ????oMask.addEventListener("mouseout",?()?=>?{??
- ????????timer?=?setInterval(move,?30)??
- ????})??
- ????console.log(aButton[0]);??
- ????aButton[0].onclick?=?()?=>?{??
- ????????speed?=?-5;??
- ????}??
- ????aButton[0].onclick?=?()?=>?{??
- ????????speed?=?5;??
- ????}??
- </script>??
- ??
- </html>??
標(biāo)簽：
