<div>左右輪換是一種常見的網頁布局效果，通過使用<div>元素和CSS樣式，可以使兩個或多個元素在頁面左右輪換顯示。這種布局效果常用于圖片展示、產品展示等需要呈現多個內容的場景。下面將通過幾個代碼案例來詳細解釋說明<div>左右輪換的實現方法。
，我們先來看一個最基礎的<div>左右輪換的例子。代碼如下：

<style>
.container {
display: flex;
justify-content: space-between;
}
<br>
    .item {
width: 200px;
height: 200px;
background-color: #ccc;
}
</style>
<br>
<div class="container">
<div class="item">內容1</div>
<div class="item">內容2</div>
</div>

在這個例子中，我們使用了<div class="container">來包裹兩個<div class="item">，并將其設置為flex布局。其中.container類設置了display屬性為flex，用來使它的子元素成為一個flex容器，justify-content屬性設置為space-between，用來使子元素兩側與容器邊緣對齊，并在它們之間均勻分布。
接下來，我們來看一個帶有左右箭頭控制的<div>左右輪換的例子。代碼如下：

<style>
.container {
display: flex;
overflow: hidden;
}
<br>
    .item {
flex-shrink: 0;
width: 200px;
height: 200px;
background-color: #ccc;
}
<br>
    .arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
}
</style>
<br>
<div class="container">
<div class="item">內容1</div>
<div class="item">內容2</div>
</div>
<br>
<div class="arrow" id="prev"><</div>
<div class="arrow" id="next">></div>
<br>
<script>
const container = document.querySelector('.container');
const prevBtn = document.querySelector('#prev');
const nextBtn = document.querySelector('#next');
<br>
    let translateX = 0;
const itemWidth = 200;
<br>
    nextBtn.addEventListener('click', () => {
if (translateX > -(itemWidth * (container.children.length - 1))) {
translateX -= itemWidth;
container.style.transform =translateX(${translateX}px);
}
});
<br>
    prevBtn.addEventListener('click', () => {
if (translateX < 0) {
translateX += itemWidth;
container.style.transform =translateX(${translateX}px);
}
});
</script>

在這個例子中，我們依然使用了<div class="container">來包裹<div class="item">，并將其設置為flex布局。不同的是，我們加入了overflow屬性設置為hidden，用來隱藏超出容器寬度的內容。
另外，我們也添加了兩個箭頭控制按鈕，分別對應向左和向右滾動。點擊這兩個按鈕時，會通過改變容器的transform屬性來實現滾動效果。由于JS部分代碼較多，請查看前面的代碼段。
這兩個例子只是<div>左右輪換的其中幾種實現方法，具體的效果和樣式都可以根據需求進行調整。希望本文的例子能夠幫助讀者更好地理解和掌握<div>左右輪換的實現方法。