Jquery图片切换效果

Jquery图片切换效果

Html代码:

<div class="dv_box2">
<div class="dv_icon" id="icon_prew"></div>
<div id="dv_scroll">
<div class="box">
<div class="dv_img_item" style="background-color: #00BCD4"></div>
<div class="dv_img_item" style="background-color: #f86649"></div>
<div class="dv_img_item" style="background-color: #a7a7a7"></div>
<div class="dv_img_item" style="background-color: #1b6d85"></div>
<div class="dv_img_item" style="background-color: #000000"></div>
</div>
</div>
<div class="dv_icon" id="icon_next"></div>
</div>

Css样式：

.dv_box2{
clear: both;
width: 1200px;
height: 600px;
margin: auto;
background-color: #333333;
}
.dv_icon{
float: left;
width: 60px;
height: 60px;
background-color: #00BCD4;
margin: 270px 60px;

}
.dv_img_item{
float: left;
width: 240px;
height: 480px;
margin-top: 60px;
margin-left: 20px;
margin-right: 20px;
}
#dv_scroll{
width: 800px;
height: 600px;
overflow-x: hidden;
overflow-y: hidden;
float: left;
}
.box{
width: 2500px;
height: 600px;
}

Js代码：

$("#icon_prew").click(function(){
var p=(document.getElementById("dv_scroll").scrollLeft);
$("#dv_scroll").animate({
scrollLeft:p-200
},"slow");
});

$("#icon_next").click(function(){
var p=(document.getElementById("dv_scroll").scrollLeft);
$("#dv_scroll").animate({
scrollLeft:p+200
},"slow");
});

效果展示：