如图:

代码:

html

  1. @*商品主图片*@
  2. <div class="product-img" style="display:table-cell;width:400px;border:1px solid #aaa;text-align:center">
  3.   <img width="500" height="400" src="/upload/store/@ViewBag.StoreId/product/show/thumb350_350/@ViewBag.ProductImg"/>
  4. </div>
  5.  
  6. @*商品所有图片*@
  7. <div class="product-img-all" style="margin-top:15px;width:400px">
  8.   <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>
  9.   <ul style="display:inline-block;height:60px">
  10.     @foreach (ProductImage item in ViewBag.ProductImages)
  11.     {
  12.       <li name ="list" style="display:inline-block;border:1px solid #bce8f1">
  13.         <img src="/upload/store/@ViewBag.StoreId/product/show/thumb60_60/@item.showimg" />
  14.         <input type="hidden" value="@item.showimg"/>
  15.       </li>
  16.     }
  17.   </ul>
  18.   <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>
  19. </div>

js

  1. $(document).ready(function () {
  2. //商品主图边框为深色
  3. $(".product-img-all").find("li").eq(0).css({ "border": "1px solid #6581ee" });
  4.  
  5. //商品所有图片点击事件
  6. $(".product-img-all").find("li").click(function () {
  7. $(this).css({ "border": "1px solid #6581ee" });
  8. $(this).prevAll("li").css({ "border": "1px solid #bce8f1" });
  9. $(this).nextAll("li").css({ "border": "1px solid #bce8f1" });
  10. var img = $(this).find("input").val();
  11. getProductImg(img);
  12. });
  13.  
  14. //上一张商品图
  15. $(".product-img-prev").mousedown(function () {
  16. $(this).css({ "backgroundColor": "#aaa" });
  17. }).mouseup(function () {
  18. $(this).css({ "backgroundColor": "#ccc" });
  19. var img = $(".product-img-all").find("li");
  20. img.each(function (index) {
  21. var b = $(this).css("border");
  22. //index会为0
  23. if (b.indexOf("101, 129, 238") != -1 && index != 0) {
  24. $(this).css({ "border": "1px solid #bce8f1" }); //浅色
  25. $(this).prev("li").css({ "border": "1px solid #6581ee" }); //深色
  26.  
  27. var i = $(this).prev("li").find("input").val();
  28. getProductImg(i);
  29. }
  30. });
  31. });
  32.  
  33. //下一张商品图
  34. $(".product-img-next").mousedown(function () {
  35. $(this).css({ "backgroundColor": "#aaa" });
  36. }).mouseup(function () {
  37. $(this).css({ "backgroundColor": "#ccc" });
  38. var img = $(".product-img-all").find("li");
  39. img.each(function (index) {
  40. //index从0开始
  41. if ((index + 1) == img.length) {
  42. return false;
  43. };
  44.  
  45. var b = $(this).css("border");
  46. //index会为0
  47. if (b.indexOf("101, 129, 238") != -1) {
  48. $(this).css({ "border": "1px solid #bce8f1" }); //浅色
  49. $(this).next("li").css({ "border": "1px solid #6581ee" }); //深色
  50.  
  51. var i = $(this).next("li").find("input").val();
  52. getProductImg(i);
  53. return false; //跳出遍历
  54. }
  55. });
  56. });
  57.  
  58. });
  59.  
  60. //设置商品大图
  61. function getProductImg(img) {
  62. $(".product-img").find("img").attr("src", "/upload/store/" + getParameter("storeId") + "/product/show/thumb350_350/" + img);
  63. }
  64.  
  65. //获取Url地址中的参数
  66. function getParameter(name) {
  67. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  68. var r = window.location.search.substr(1).match(reg);
  69. if (r != null) return unescape(r[2]); return null;
  70. }

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. Android 图片混排富文本编辑器控件

    概述 一个Android 图片混排富文本编辑器控件(仿兴趣部落) 详细 代码下载:http://www.demodashi.com/demo/12032.html 一.一个Android 图片混排富文 ...

  2. ubuntu 命令行下查看网页 w3m

    w3m localhost/index.php

  3. Android设计模式系列(3)--SDK源码之单例模式

    单例模式,可以说是GOF的23种设计模式中最简单的一个.这个模式相对于其他几个模式比较独立,它只负责控制自己的实例化数量单一(而不是考虑为用户产生什么样的实例),很有意思,是一个感觉上很干净的模式,本 ...

  4. pycharm 控制台字体背景颜色设定让你美到爆

    还在为你控制台字体颜色不入眼而发愁吗? 在某些特殊时刻想要改变下字体的颜色却无从下手而发愁吗? 那你就进来看一看,瞧一瞧,之需看2分钟,花2分钟理解,花3分钟练练手就能让你的控制能字体炫酷起来! 一. ...

  5. 嵌入式Linux下ALSA音频架构ALSA-lib移植与编译心得

    **************************************************************************************************** ...

  6. 【BLE】CC2541之主机端读取特征值

    本篇博文最后改动时间:2017年01月06日,11:06. 一.简单介绍 本文介绍怎样在SimpleBLECentralproject中,读取SimpleBLEPeripheralproject中的特 ...

  7. Atititjs javascript异常处理机制与java异常的转换.js exception process

    Atititjs javascript异常处理机制与java异常的转换.js exception process 1. javascript异常处理机制 Throw str Not throw err ...

  8. [svc]salt基本原理

    转载自:来自:http://tech.mainwise.cn/?p=438 说明:salt是一个异构平台基础设置管理工具(虽然我们通常只用在Linux上),使用轻量级的通讯器ZMQ,用Python写成 ...

  9. 02、Unicode 汉字转码小工具

    在做 Windows app 的时候,与服务器端交互使用的是 json 格式的数据,里面的汉字内容被 编码成 unicode 格式,在调试的时候不太方便,就写了个工具,把里面的 unicode 内容转 ...

  10. 一款基于css3鼠标经过圆形旋转特效

    今天给大家分享一款基于css3鼠标经过圆形旋转特效.当鼠标经过的时候图片边框颜色旋转,图片显示详情.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...