//小图预览区域图片轮换键
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-商品图片点击轮换的更多相关文章

  1. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  2. js实现图片点击弹出放大效果

    点击图片,显示蒙板,放大图片的简单案例 HTML代码: <div> <img height=" src="https://img-blog.csdn.net/20 ...

  3. 使用纯生js实现图片轮换

    效果图预览. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  4. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  5. Diycode开源项目 磁盘图片缓存+自定义webViewClient+图片点击js方法

    1.磁盘图片缓存器DiskImageCache 1.1.这个类很多情况都可能用的到,耦合性很低,所以分开讲. 源代码: /* * Copyright 2017 GcsSloop * * License ...

  6. js点击获取—通过JS获取图片的绝对对坐标位置

    一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示:  <!DOCTYPE html> <html lang="en"> <head> ...

  7. js点击获取—通过JS获取图片的相对坐标位置

    一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...

  8. js限制图片大小、点击放大图片、点击在新开页面显示

    缩放图片到合适大小        function ResizeImages() {            var myimg, oldwidth, oldheight;            var ...

  9. JS图片自己主动轮换效果实现

    今天不在状态,五一快到了,俺就特想玩了.好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自己主动轮换效果,先看图片 以下是详细的代码,还是比較简单的. <!DOCTYPE ht ...

随机推荐

  1. WM_CLOSE、WM_DESTROY、WM_QUIT的区别(询问,销毁窗口,退出进程,都不是一回事)

    1.发送消息SendMessage.PostMessage PostMessage将消息放入消息队列后马上返回,而SendMessage直到窗口过程处理完消息后才返回 2.三个消息的区别 WM_CLO ...

  2. poi导出word

    最近做了个poi导出word的功能 下面是代码: 一个可以参考的例子: package com.lzb.crm.web; import java.io.FileOutputStream; import ...

  3. (转载)apc_fetch

    (转载)http://php.net/manual/zh/function.apc-fetch.php apc_fetch (PECL apc >= 3.0.0) apc_fetch — 从缓存 ...

  4. Silverlight 中 读取XML文件

    一:xml文件 二:后台代码 private void ReadXml() { List<TreeViewItem> nodes = new List<TreeViewItem> ...

  5. 谈谈托管代码、IL、CLR、ISAPI?

    什么是托管代码?       托管代码是可以使用20多种支持Microsoft .NET Framework的高级语言编写的代码,这些语言包括:C#, J#, Microsoft Visual Bas ...

  6. HDOJ 1014 Uniform Generator(公约数问题)

    Problem Description Computer simulations often require random numbers. One way to generate pseudo-ra ...

  7. fedora19安装jdk

    1.下载安装包 去oracle下载jdk-7u45-linux-i586.rpm 2. 更改权限 #chmod 777jdk-7u45-linux-i586.rpm 3. 安装 #rpm -ivh j ...

  8. LaTex希腊字母

    Name Symbol Command Alpha $\alpha$ $A$ \alpha A Beta $\beta$ $B$ \beta B Gamma $\gamma$ $\Gamma$ \ga ...

  9. JAVA-1-学习历程1:基础知识1

     前言:此文属于个人学习中总结记录的较重要的知识点,分享一下.望对刚開始学习的人有点用. 视频04   语句.函数.数组 1.函数的重载 2.数组内存空间的划分 栈.堆 视频05    数组 1. ...

  10. HDU 4280 Island Transport(网络流)

    转载请注明出处:http://blog.csdn.net/u012860063 题目链接:pid=4280">http://acm.hdu.edu.cn/showproblem.php ...