JS-商品图片点击轮换
//小图预览区域图片轮换键
const LIWIDTH=62;
var moveCount=0;
document.getElementById("btForward").onclick=function(){
if(this.className=="forward_disabled"){
return;
}
moveCount++;
iconList.style.left=moveCount*LIWIDTH*(-1)+"px";
document.getElementById("btBack").className="backward";
if(moveCount>=imgList.length-5){
this.className="forward_disabled";
}
}
document.getElementById("btBack").onclick=function(){
if(this.className=="backward_disabled"){
return;
}
moveCount--;
iconList.style.left=moveCount*LIWIDTH*(-1)+"px";
document.getElementById("btForward").className="forward";
if(moveCount<=0){
this.className="backward_disabled";
}
}
JS-商品图片点击轮换的更多相关文章
- Js实现图片点击切换与轮播
Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- js实现图片点击弹出放大效果
点击图片,显示蒙板,放大图片的简单案例 HTML代码: <div> <img height=" src="https://img-blog.csdn.net/20 ...
- 使用纯生js实现图片轮换
效果图预览. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- vue项目 一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
- Diycode开源项目 磁盘图片缓存+自定义webViewClient+图片点击js方法
1.磁盘图片缓存器DiskImageCache 1.1.这个类很多情况都可能用的到,耦合性很低,所以分开讲. 源代码: /* * Copyright 2017 GcsSloop * * License ...
- js点击获取—通过JS获取图片的绝对对坐标位置
一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...
- js点击获取—通过JS获取图片的相对坐标位置
一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...
- js限制图片大小、点击放大图片、点击在新开页面显示
缩放图片到合适大小 function ResizeImages() { var myimg, oldwidth, oldheight; var ...
- JS图片自己主动轮换效果实现
今天不在状态,五一快到了,俺就特想玩了.好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自己主动轮换效果,先看图片 以下是详细的代码,还是比較简单的. <!DOCTYPE ht ...
随机推荐
- Web分析日志分析2
http://www.docin.com/p-649515490.html http://wenku.baidu.com/link?url=kB-83fbl1Zc3Y6U2BYLj-lKMWShe8Z ...
- ShapeDrawable 资源
ShapeDrawable 用于定义一个基本的几何图形(如矩形.圆形.线条等),定义 ShapeDrawable 的 XML 文件的根元素是<shape.../>元素,该元素可指定如下属性 ...
- SQLite for xamarin
原文地址:http://www.codeproject.com/Articles/1097179/SQLite-with-Xamarin-Forms-Step-by-Step-guide SQLite ...
- 【HDOJ】5154 Harry and Magical Computer
拓扑排序. /* 5154 */ #include <iostream> #include <cstdio> #include <cstring> #include ...
- Qt入门(7)——QApplication类
QApplication类管理图形用户界面应用程序的控制流和主要设置.它包含主事件循环,在其中来自窗口系统和其它资源的所有事件被处理和调度.也用于处理应用程序的初始化和结束,并且提供对话管理.它也处理 ...
- 读取Word文档的标题
一:描述,将读取的文档标题添加到下拉框中 二:代码 #region 方法:得到Word文档标题的内容 public static List<string> GetTitles(int j, ...
- 利用C++11的function和bind简化类创建线程
问题引出 当在类中需要创建线程时,总是因为线程函数需要定义成静态成员函数,但是又需要访问非静态数据成员这种需求,来做若干重复性的繁琐工作.比如我以前就经常定义一个静态成员函数,然后定一个结构体,结构体 ...
- [Java Concurrent] 多线程合作 wait / notifyAll 的简单案例
本案例描述的是,给一辆汽车打蜡.抛光的场景. Car 是一辆被打蜡抛光的汽车,扮演共享资源的角色. WaxOnCommand 负责给汽车打蜡,打蜡时需要独占整部车,一次打一部分蜡,等待抛光,然后再打一 ...
- [Design Pattern] Iterator Pattern 简单案例
Iterator Pattern,即迭代时模式,按照顺序依次遍历集合内的每一个元素,而不用了解集合的底层实现,属于行为类的设计模式.为了方便理解记忆,我也会称其为遍历模式. 下面是一个迭代器模式的简单 ...
- js中widow.open()方法详解
一. window.open() 支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: window.open(pageURL,nam ...