jQuery汽车图片左右点击切换轮播

本文的DEMO可应用在商品详情、汽车展示等，jQuery左右按钮切换图片，点击小图缩略图可切换到对应的大图，当缩略图过多时可点击左右按钮控制底部缩略图片左右滚动，进行更多的图片切换。

分类：选项卡/滑动门 > 滚动切换难易：初级

查看演示下载资源下载积分： 26 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

缩略图列表

<div class="slider" id="thumbnail">
    <ul>
        <li class="current"><a href="images/3427.jpg" target="_blank"><img src="images/14fd.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸01" /></a></li>
        <li><a href="images/52347.jpg" target="_blank"><img src="images/41a.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸02" /></a></li>
        <li><a href="images/23463.jpg" target="_blank"><img src="images/234fa.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸03" /></a></li>
        <li><a href="images/3247.jpg" target="_blank"><img src="images/412saf.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸04" /></a></li>
        <li><a href="images/26547.jpg" target="_blank"><img src="images/41356a.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸05" /></a></li>
        <li><a href="images/2153.jpg" target="_blank"><img src="images/432sadf.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸06" /></a></li>
        <li><a href="images/3427.jpg" target="_blank"><img src="images/14fd.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸01" /></a></li>
    </ul>
</div>

点击小图切换大图

$("#thumbnail li a").click(function() {
    $(".zoompic img").hide().attr({"src": $(this).attr("href"), "title": $("> img", this).attr("title")});
    $("#thumbnail li.current").removeClass("current");
    $(this).parents("li").addClass("current");
    return false;
});