jquery点击左右按钮切换图片

 当点击了右边的按钮后，图片向左移动，同理左边按钮。

css样式此处省略......直接进入到js代码中

<div class="down-down-div">										
    <div class="pics-frame">
						
        <div class="frame-first">
			<!--第一个div -->
			<div id="left_btn" class="pic-button-left">
			    <!--“ < ”按钮-->
			    <div style="padding-top: 70px;">
			        <
                </div>
		    </div>
		</div>
		<!--第二个div -->
		<div class="frame-second">
		
			<div class="frame-second-up">
				<div style="float: left;font-size: 10px;">
					&nbsp;&nbsp;&nbsp;本车型适用的精品配件:
				</div>
			</div>

			<div class="frame-second-down">

				<div class="frame-second-down-down">
				<!--图片集-->
				<div class="frame-second-down-uppics">
				<img id="img0" style="width: 100%;height: 100%;" src="./images/accessories/t500.png" />
				</div>

				<!--文字-->
				<div class="frame-second-down-downtext">
					挡泥板
				</div>

			</div>

			<div class="frame-second-down-down">
				<!--图片集-->
				<div class="frame-second-down-uppics">
					<img id="img1" style="width: 100%;height: 100%;" src="./images/accessories/t501.png" />
				</div>

				<!--文字-->
				<div class="frame-second-down-downtext">
					车窗侧雨刷
				</div>

			</div>

			<div class="frame-second-down-down">
				<!--图片集-->
				<div class="frame-second-down-uppics">
					<img id="img2" style="width: 100%;height: 100%;" src="./images/accessories/t502.png" />
				</div>

				<!--文字-->
				<div class="frame-second-down-downtext">
					车牌窗饰框
				</div>

			</div>

			<div class="frame-second-down-down">
				<!--图片集-->
				<div class="frame-second-down-uppics">
					<img id="img3" style="width: 100%;height: 100%;" src="./images/accessories/t600.png" />
				</div>

				<!--文字-->
				<div class="frame-second-down-downtext">
					地毯（七座）
				</div>

			</div>
		</div>

	</div>

	<!--第三个div -->
		<div id="right_btn" class="frame-third">
			<!--“ > ”按钮-->
			<div class="pic-button-right">
			<div style="padding-top: 70px;">
				>
			</div>
		</div>
	</div>

    </div>
</div>


<!--隐藏状态的图片集-->
<div id="imgs">
    <img src="images/accessories/t500.png" style="display: none;" />
	<img src="images/accessories/t501.png" style="display: none;" />
	<img src="images/accessories/t502.png" style="display: none;" />
	<img src="images/accessories/t600.png" style="display: none;" />
	<img src="images/accessories/t602.png" style="display: none;" />
    <img src="images/accessories/t603.png" style="display: none;" />
	<img src="images/accessories/t604.png" style="display: none;" />
	<img src="images/accessories/t605.png" style="display: none;" />
	<img src="images/accessories/t606.png" style="display: none;" />
	<img src="images/accessories/t607.png" style="display: none;" />
	<img src="images/accessories/t608.png" style="display: none;" />
</div>


$(function() {
	var images = [];
	var imgs = $("#imgs img");
	var index = 0;		
	//展示的图片，长度为4
	var displayLength = $(".frame-second-down img").length;
			
	for(var i = 0; i < imgs.length; i++) {
	
        images.push(imgs[i]);
	}
	
    //相册左边按钮
    $("#left_btn").click(function() {
	    
        if(index == 0) {
	
        alert("已经是第一张照片啦！");
		return;
	
    } else {
	
    for(var j = 0; j < displayLength; j++) {

        $("#img" + j).attr("src", images[index - 1 + j].src);
	    
        
        }
	    
        index--;
	 }
	})
			
//相册右边按钮
			
$("#right_btn").click(function() {
				
				
    if(index == (imgs.length - displayLength)) {
					
        alert("已经是最后一张图片了！");
					
        return 0;
				
    } else {
					
        for(var j = 0; j < displayLength; j++) {
						
            $("#img" + j).attr("src", images[j + 1 + index].src);
					
        }
					
        index++;
				
    }
			
    })

})

 

来源：CSDN

作者：i_am_yy

链接：https://blog.csdn.net/i_am_yy/article/details/82110982