CSS手機左右移動，是移動端網頁設計中常用的一種交互效果。通過CSS3技術實現，簡單易用，能夠有效增加用戶的使用體驗。

.slide{
width: 100%;
height: 300px;
overflow: hidden;
}
.slide ul{
width: 200%;
height: 100%;
overflow: hidden;
list-style: none;
}
.slide li{
width: 50%;
height: 100%;
float: left;
}
.slide img{
width: 100%;
height: 100%;
display: block;
}

以上是CSS的代碼實現，首先需要設置一個.slide的容器，設置寬高和overflow:hidden屬性，以便隱藏超出容器寬度的內容。接著設置.slide ul的寬度為200%，因為容器里有兩個li標簽，li標簽的寬度為50%。設置overflow:hidden屬性，隱藏超出容器寬度的內容，同時取消li標簽的默認列表樣式。設置li標簽和img標簽的寬高為100%，以適應不同的移動設備屏幕大小。

接下來是JavaScript實現的代碼，實現自動輪播效果。

var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("slide");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none"; 
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1} 
slides[slideIndex-1].style.display = "block"; 
setTimeout(showSlides, 3000); 
}

以上是JavaScript的代碼實現，首先定義一個slideIndex全局變量，設置初始值為0。然后創建一個名為showSlides的函數，在函數內定義slides變量為類名為“slide”的所有元素的集合。通過循環遍歷此集合，將所有元素的display屬性設置為“none”，以便隱藏元素。然后slideIndex變量自增1，如果slideIndex的值大于slides集合的長度時，將slideIndex的值設置為1。接著將當前slideIndex所對應的元素的display屬性設置為“block”，以便顯示元素。最后通過setTimeout函數，設置showSlides函數每隔3秒調用一次，以實現輪播效果。