輪播圖大家都寫過(guò),但是怎么做到無(wú)縫切換對(duì)初學(xué)者來(lái)說(shuō)是個(gè)難點(diǎn)崇棠。曾經(jīng)也困惑了我很久咽袜,一直在研究,方法也很多枕稀,但是總是沒(méi)有找到簡(jiǎn)便合適的询刹。下面介紹一種,附上部分代碼抽莱。
html代碼:
? ? <div id="box">
? ? ? ? ? ? <li><img src="img/0.jpg" alt="">
? ? ? ? ? ? <li><img src="img/1.jpg" alt="">
? ? ? ? ? ? <li><img src="img/2.jpg" alt="">
? ? ? ? ? ? <li><img src="img/3.jpg" alt="">
? ? ? ? ? ? <li><img src="img/4.jpg" alt="">
? ? ? ? <span id="left"></span>
?????? <span id="right">></span>
</body>
css部分代碼:
? * {
???? ?? margin:0;
? ? ? ? padding:0;
? ? ? ? list-style:none;
? ? }
#box{
??????? width:300px;
? ? ? ? height:200px;
? ? ? ? margin:100px auto;
? ? ? ? position:relative;
? ? ? ? overflow:hidden;
? ? }
#box ul{
??????? width:1500px;
? ? ? ? height:200px;
? ? }
ul li{
??????? width:300px;
? ? ? ? height:200px;
? ? ? ? float:left;
? ? }
img{
??????? width:300px;
? ? ? ? height:200px;
? ? }
#left{
?????? width:20px;
? ? ? ? height:20px;
? ? ? ? position:absolute;
? ? ? ? left:10px;
? ? ? ? top:90px;
? ? ? ? border-radius:50%;
? ? ? ? background:#ccc;
? ? ? ? line-height:18px;
? ? ? ? font-size:20px;
? ? ? ? text-align:center;
? ? ? ? display:none;
? ? ? ? cursor:pointer;
? ? }
#right{
??????? width:20px;
? ? ? ? height:20px;
? ? ? ? position:absolute;
? ? ? ? right:10px;
? ? ? ? top:90px;
? ? ? ? border-radius:50%;
? ? ? ? background:#ccc;
? ? ? ? line-height:18px;
? ? ? ? font-size:20px;
? ? ? ? text-align:center;
? ? ? ? display:none;
? ? ? ? cursor:pointer;
? ? }
</style>
javascript的部分
? ? var oBox=document.getElementById('box');
? ? var oUl=document.querySelector('ul');
? ? var oLeft=document.getElementById('left');
? ? var oRight=document.getElementById('right');
//當(dāng)鼠標(biāo)移入時(shí)顯示左右按鍵
? ? oBox.onmouseenter=function () {
???????? oLeft.style.display='block';
? ? ? ? oRight.style.display='block';
? ? };
//當(dāng)鼠標(biāo)移出時(shí)隱藏左右按鍵
? ? oBox.onmouseleave=function () {
??????? oLeft.style.display='none';
? ? ? ? oRight.style.display='none';
? ? };
//點(diǎn)擊右鍵圖片開始移動(dòng)
? ? oRight.onclick=function () {
??????? oUl.style.transition='.7s all linear';
? ? ? ? oUl.style.transform='translateX(-300px)';
? ? };
? ? oUl.addEventListener('transitionend',function () {
???????? oUl.style.transition='';
? ? ? ? oUl.style.transform='translateX(0)';
? ? ? ? oUl.appendChild(oUl.children[0]);
? ? })
</script>
以上就是簡(jiǎn)單輪播圖制作的部分代碼范抓。