JQuery------实现点击左右按钮,切换图片功能
2017-02-07 13:44
1056 查看
如图:
代码:
html
js
代码:
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——左右按钮点击切换一组图片功能
- 基于jquery实现左右按钮点击的图片切换效果
- 基于jquery实现左右按钮点击的图片切换效果
- JS实现点击按钮图片左右切换、点击图片按钮出现下拉菜单
- 基于jquery实现点击左右按钮图片横向滚动
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
- jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
- 使用jQuery实现鼠标点击左右按钮滑动切换
- 使用:target实现点击按钮切换图片的功能(纯CSS)
- JQuery移动动画实现点击按钮切换图片--JQuery基础
- 使用jquery + css + html实现点击左右箭头切换图片
- 基于jquery实现点击左右按钮图片横向滚动
- 使用ImageSwitcher实现点击按钮浏览图片功能
- 基于jquery快速实现网页右下角按钮点击后滚动回顶端的功能
- JQUERY JFLOW图片滚动插件左右按钮控制图片内容滑动切换
- 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
- 使用jQuery简单实现产品展示的图片左右滚动功能
- 用 JS 点击左右按钮 使图片切换
- jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
- 基于jQuery图片切换实现预加载插件,左右带控制