最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2016-10-06 22:06浏览(1684)

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

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery汽车图片左右点击切换轮播
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

缩略图列表

<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;
});
标签: 轮播焦点汽车
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/953.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    05-25 14:33
    哎呀歇菜了
    这个挺好,正好适合我现在的项目
1 2