css中怎样设置图片左右滚动效果图

CSS中可以使用以下代码设置图片左右滚动效果图：

.scroll-wrap {
    white-space: nowrap; /* 让所有图片在同一行显示 */
    overflow: hidden; /* 隐藏超出范围的部分 */
}

.scroll-wrap img {
    display: inline-block; /* 将所有图片变成块级元素，可以设置宽高 */
    height: 100px;
    margin-right: 10px; /* 图片之间的间距 */
} 

设置好CSS后，我们需要使用一些JavaScript代码来实现滚动效果。以下是使用jQuery库实现的示例代码：

$(function () {
    var $wrap = $('.scroll-wrap');
    var $imgs = $wrap.find('img');

    var totalWidth = 0; // 所有图片的总宽度
    $imgs.each(function () {
        totalWidth += $(this).outerWidth(true); // 包括外边距的宽度
    });

    var wrapperWidth = $wrap.width(); // 容器的宽度
    var speed = 50; // 滚动速度

    function scroll() {
        $wrap.scrollLeft($wrap.scrollLeft() + 1);
        if ($wrap.scrollLeft() >= totalWidth - wrapperWidth) { // 滚到最右侧时重置滚动位置
            $wrap.scrollLeft(0);
        }
    }

    setInterval(scroll, speed);
}); 

将以上代码放入HTML文件中，在需要的位置插入如下HTML代码：

<div class="scroll-wrap">
    <img src="img/1.jpg" alt="">
    <img src="img/2.jpg" alt="">
    <img src="img/3.jpg" alt="">
    <img src="img/4.jpg" alt="">
</div> 

其中，img标签的src属性需要填写图片的路径。