如图:

代码:

html

@*商品主图片*@
<div class="product-img" style="display:table-cell;width: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;width:400px">
  <div class="product-img-prev" style="float:left;width: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;width:30px;height:62px;text-align:center;line-height:62px;color:#fff;font-size:25px;background  -color:#ccc">></div>
</div>

js

$(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------实现点击左右按钮,切换图片功能的更多相关文章

  1. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

  2. 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  3. 使用jQuery实现点击左右滑动切换特效

    使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...

  4. jQuery实现的鼠标滑过切换图片代码实例

    jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...

  5. JQuery移动动画实现点击按钮切换图片--JQuery基础

    直接贴源码了哈,这些都是自己总结的……汗水几何?希望能帮到大家. <%@ Page Language="C#" AutoEventWireup="true" ...

  6. 原生js点击按钮切换图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. 炫酷实用的jQuery插件 涵盖菜单、按钮、图片

    新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...

  8. Axure初体验:简单交互、通过按钮切换图片

    前言: 之前是一直用processon的UI原型设计,后来感觉只能完成静态页面的processon满足不了原型设计的需求,断网时候也不方便修改.展示.最终还是决定学习动态页面的制作,所选工具为原型设计 ...

  9. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

  10. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

随机推荐

  1. SuperMap iServer 9D HBase使用

    需提前将HBase进行部署,参考上篇部署文档 https://www.cnblogs.com/zhangyongli2011/p/9982143.html (转发请注明出处:http://www.cn ...

  2. Cookie技术

    u  常用的API 创建Cookie对象 Cookie(String name, String value)    ->以指定数据创建Cookie对象 设置Cookie对象 void setMa ...

  3. mysql max和count、limit优化

    1.max 的优化记得要对max里面的字段使用索引,可以大大加快速度 2.count的优化,count(*)和count(id) 的结果可能是不一样的,因为可能存在null的情况 3.distinct ...

  4. 推荐10款最常用的Android开发工具

    我们使用各种语言进行开发时,总是会用到各种各样的开发工具.有些开发工具是开发人员的必备品,有些则是为了提高开发效率而用.Android开发同样也会用到多种开发工具,供开发人员设计.创建.测试和发布程序 ...

  5. C#:SqlServer操作的知识点

      1.检查数据库连接的有效性 var client = new System.Net.Sockets.TcpClient(); var ar = client.BeginConnect(host, ...

  6. 【Android UI设计与开发】使用ViewPager实现欢迎引导页面

    一.实现的效果图 每次看别人的代码前,必需要先看实现的效果图达到了一个什么样的效果,是不是跟自己想要实现的效果类似.有图才有真相嘛,同一时候,最下方有源代码的下载地址,差点儿源代码的每一行都有凝视,写 ...

  7. POJ 2750 Potted Flower (单点改动求线段树上最大子序列和)

    题目大意: 在一个序列上每次改动一个值,然后求出它的最大的子序列和. 思路分析: 首先我们不考虑不成环的问题.那就是直接求每一个区间的最大值就好了. 可是此处成环,那么看一下以下例子. 5 1 -2 ...

  8. SQL面试题与附解收集(一)

    数据库三范式是什么? 答: 1NF:字段不可分; 2NF:有主键,非主键字段依赖主键; 3NF:非主键字段不能相互依赖; 解释: 1NF:原子性 字段不可再分,否则就不是关系数据库; 2NF:唯一性 ...

  9. java后台分页实例一

    后台框架:jfinal + velocity.前台框架:jquery  页面 <!DOCTYPE html> <html> <head> <meta char ...

  10. HDU 1863 畅通工程 克鲁斯卡尔算法

    畅通工程 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...