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 ...
随机推荐
- Matrix(线段树版)
poj2155:http://poj.org/problem?id=2155 题意;同上一遍随笔. 题解:这里用二维线段树打了一发.第一次学习别人的代码.才学的.这种树套树的程序,确实很费脑子,一不小 ...
- Web日志分析
http://www.rising.com.cn/newsletter/news/2013-03-20/13380.html https://www.trustwave.com/Resources/S ...
- hibernate和struts2实现分页功能
1.DAO层接口的设计,定义一个PersonDAO接口,里面声明了两个方法: public interface PersonDAO { public List<Person> queryB ...
- 最近点对问题 HDU Quoit Design 1007 分治法
#include<cstdio> #include<cstring> #include<iostream> #include<algorithm> #i ...
- 【转】 android 4.4 Step Counter Sensor计步器的使用
原文网址:http://blog.csdn.net/aikongmeng/article/details/40457233 版权声明:本文为博主原创文章,未经博主允许不得转载. Android 官方参 ...
- House Robber——LeetCode
You are a professional robber planning to rob houses along a street. Each house has a certain amount ...
- cf590B Chip 'n Dale Rescue Rangers
B. Chip 'n Dale Rescue Rangers time limit per test 1 second memory limit per test 256 megabytes inpu ...
- 【转】两种方法教你在Ubuntu下轻松关闭触摸板(TinkPad)
Ubuntu是一个以桌面应用为主的Linux操作系统,所以在使用时我经常的触碰到触摸板,这样会造成我们一些的麻烦,所以要如何的关闭触摸板呢?我们一起来看看吧! Ubuntu下如何关闭触摸板(Tin ...
- 用endsWith()来限制图片的后缀名
var a=document.getElementById('file-name'); var filename=a.value if(!a.endsWith('.jpg')||!a.endsWith ...
- 沧海一声笑,移动应用的CRASH原因我找到! --记最新款数字化測试“星云測试“的使用攻略
沧海一声笑,移动应用的CRASH原因我找到! --记最新款数字化測试"星云測试"的使用攻略 世界进步那么快,非常多新奇的点子层出不穷,于是我们创业.我们做最酷的手机应用,做最轰炸的 ...