JQuery------实现点击左右按钮，切换图片功能

如图:

代码:

html

@*商品主图片*@
<div class="product-img" style="display:table-cell;400px;border:1px solid #aaa;text-align:center">
　　<img width="500" height="400" src="/upload/store/@ViewBag.StoreId/product/show/thumb350_350/@ViewBag.ProductImg"/>
</div>

@*商品所有图片*@
<div class="product-img-all" style="margin-top:15px;400px">
　　<div class="product-img-prev" style="float:left;30px;height:62px;text-align:center;line-height:62px;color:#fff;font-size:25px;background-　　color:#ccc"><</div>
　　<ul style="display:inline-block;height:60px">
　　　　@foreach (ProductImage item in ViewBag.ProductImages)
　　　　{
　　　　　　<li name ="list" style="display:inline-block;border:1px solid #bce8f1">
　　　　　　　　<img src="/upload/store/@ViewBag.StoreId/product/show/thumb60_60/@item.showimg" />
　　　　　　　　<input type="hidden" value="@item.showimg"/>
　　　　　　</li>
　　　　}
　　</ul>
　　<div class="product-img-next" style="float:right;30px;height:62px;text-align:center;line-height:62px;color:#fff;font-size:25px;background　　-color:#ccc">></div>
</div>

$(document).ready(function () {
    //商品主图边框为深色
    $(".product-img-all").find("li").eq(0).css({ "border": "1px solid #6581ee" });

    //商品所有图片点击事件
    $(".product-img-all").find("li").click(function () {
        $(this).css({ "border": "1px solid #6581ee" });
        $(this).prevAll("li").css({ "border": "1px solid #bce8f1" });
        $(this).nextAll("li").css({ "border": "1px solid #bce8f1" });
        var img = $(this).find("input").val();
        getProductImg(img);
    });

    //上一张商品图
    $(".product-img-prev").mousedown(function () {
        $(this).css({ "backgroundColor": "#aaa" });
    }).mouseup(function () {
        $(this).css({ "backgroundColor": "#ccc" });
        var img = $(".product-img-all").find("li");
        img.each(function (index) {
            var b = $(this).css("border");
            //index会为0
            if (b.indexOf("101, 129, 238") != -1 && index != 0) {
                $(this).css({ "border": "1px solid #bce8f1" }); //浅色
                $(this).prev("li").css({ "border": "1px solid #6581ee" }); //深色

                var i = $(this).prev("li").find("input").val();
                getProductImg(i);
            }
        });
    });

    //下一张商品图
    $(".product-img-next").mousedown(function () {
        $(this).css({ "backgroundColor": "#aaa" });
    }).mouseup(function () {
        $(this).css({ "backgroundColor": "#ccc" });
        var img = $(".product-img-all").find("li");
        img.each(function (index) {
            //index从0开始
            if ((index + 1) == img.length) {
                return false;
            };

            var b = $(this).css("border");
            //index会为0
            if (b.indexOf("101, 129, 238") != -1) {
                $(this).css({ "border": "1px solid #bce8f1" }); //浅色
                $(this).next("li").css({ "border": "1px solid #6581ee" }); //深色

                var i = $(this).next("li").find("input").val();
                getProductImg(i);
                return false; //跳出遍历
            }
        });
    });

});

//设置商品大图
function getProductImg(img) {
    $(".product-img").find("img").attr("src", "/upload/store/" + getParameter("storeId") + "/product/show/thumb350_350/" + img);
}

//获取Url地址中的参数
function getParameter(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
}

JQuery------实现点击左右按钮，切换图片功能

相关推荐