js实现点击按钮实现上一张下一张相册滚动效果
/*
***判断图片是否构成滚动效果
*/
$(function(){
if($("#bar").find('img').size()*71<=$("#bar").width()){
$("#table_img").width($("#bar").find('img').size()*71);
}
if($("#bar").find('img').size()*71>=$("#bar").width()){
var scrollfn = function(direction,bar,callback){
bar=document.getElementById(bar);
var step = 71, scrollLeft=parseInt($(bar).attr('scrollLeft'),10) + direction*step,
scrollWidth=parseInt($(bar).attr('scrollWidth'),10), row=$(bar).find('tr'), len = $(bar).find('img').size();
var first = $(bar).find('img').first(),
last = $(bar).find('img').last();
if(scrollLeft<0){scrollLeft=0;}
if(direction > 0 ){
var offset = last.offset();
if(offset.left-$("#leftbt").offset().left <= $(bar).width()){
var first=$(row.find('td').get(0));
row.append('<td>'+first.html()+'</td>');
}
}else{
var offset = first.offset();
if(offset.left-$("#leftbt").offset().left<step&&offset.left-$("#leftbt").offset().left>0){
var last=$(row.find('td').get(row.find('td').size()-1));
row.prepend('<td>'+last.html()+'</td>');
$(bar).attr('scrollLeft',step+scrollLeft);
}
}
$(bar).animate({
scrollLeft:scrollLeft
},{
complete:function(){
if(row.find('td').size()>len){
if(direction>0){
var first=$(row.find('td').get(0));
first.remove();
}else if(direction<0){
var last=$(row.find('td').get(row.find('td').size()-1));
last.remove();
}
}
if(callback)callback();
}
});
};
var getIndex = function(list, it){
var index = 0;
list.each(function(i){
if(this == it){
index = i;
return false;
}
});
return index;
};
function left_click(){
var index = getIndex($('#bar').find('td'), $('.focus').get(0));
$('#bar').find('td').eq(index - 1).click();
}
function right_click(){
var index = getIndex($('#bar').find('td'), $('.focus').get(0));
$('#bar').find('td').eq(index + 1).click();
}
/*
左右按钮点击事件
*/
$('#leftbt').click(function(){
if(!$('#bar').is(":animated")){
scrollfn(-1,"bar",left_click);
}
});
$('#rightbt').click(function(){
if(!$('#bar').is(":animated")){
scrollfn(1,"bar",right_click);
scrollfn(1,"bar");
}
});
}
function table_tab(number){
/**
* 判断当前选中图片
*
**/
$("#bar td").removeClass('focus');
if(!isNaN(number)){
$("#bar td").eq(number).addClass('focus');
var img = $("#bar td").find('img').eq(number);
$('#ph_img_big').find('img').attr('src', img.attr('src'));
images_WH();
}else{
$("#bar td").eq(0).addClass('focus');
var img = $("#bar td").find('img').eq(0);
$('#ph_img_big').find('img').attr('src', img.attr('src'));
images_WH();
}
}
/**
* 图片的切换
*
**/
$("#bar td").live("click",function(){
$("#bar td").removeClass('focus');
$(this).addClass('focus');
var img = $(this).find('img');
$('#ph_img_big').find('img').attr('src', img.attr('src'));
images_WH();
})
table_tab(2);//默认情况下点击的图片时哪一张,如果传值则默认的是传值的那一张,否则为第一张;
/**
**点击大图事件
*
*/
function getEvent(){
if(document.all){
return window.event;
}
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0. stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
function Get_mouse_pos(obj){
var event=getEvent();
if(navigator.appName=='Microsoft Internet Explorer'){
return event.offsetX;
}else if(navigator.appName=='Netscape'){
return event.pageX-obj.offsetLeft;
}
}
function turnover(obj){
var move_x=Get_mouse_pos(obj);
var img_width=document.getElementById("imgID").offsetWidth;
var show_width=img_width;
if(move_x >= show_width/2){
obj.style.cursor="URL(../images/next.cur),auto";
obj.title='下一张';
obj.onclick=function(){
$('#rightbt').click();
};
}else{
obj.style.cursor="URL(../images/pre.cur),auto";
obj.title='上一张';
obj.onclick=function(){
$('#leftbt').click();
}
}
}
$("#imgID").mousemove(function(){
turnover(this);
})
});
/*
*图片缩放
*/
var showImg = function(img,maxWidth,maxHeight){
var rate=(maxHeight/img.height>maxWidth/img.width?maxWidth/img.width:maxHeight/img.height);
if(rate<1){
img.width=img.width*rate;
img.height=img.height*rate;
}
return img;
};
function images_WH(){
var imgs =new Image();
/**
**图片超出等比例缩放
**/
var imagID=document.getElementById("imgID");
imgs.onload = function(){
var FitWidth=894,FitHeight=435;
showImg(this, FitWidth, FitHeight);
imagID.width = imgs.width;
imagID.height = imgs.height;
imagID.style.display='';
};
imgs.src=imagID.src;
}
js实现点击按钮实现上一张下一张相册滚动效果的更多相关文章
- js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框
转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
- vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
- js实现点击按钮传值
js实现点击按钮传值 page1源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...
- JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...
- 使用js实现点击按钮下载文件
有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...
- 原生 js 实现点击按钮复制文本
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...
- 原生JS 实现点击按钮创建元素
要求: 点击按钮,随机生成一个20px-100px宽度正方形,随机颜色,随机位置,不能出可视区域外 思路:(1)创建按钮,为按钮添加事件侦听 (2)触发事件,创建一个元素 (3)设置元素样式,包括大小 ...
- JS实现点击按钮,下载文件
PS:本文说的,并非如何用js创建流.创建文件.实现下载功能. 而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮.下载文件到本地.(可以是zip啦.excel啦都是一样) 有两 ...
- js实现点击按钮弹出上传文件的窗口
转自:https://www.jb51.net/article/100916.htm 1.详细描述 在页面上设置一个“选择文件”按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 ? 1 2 ...
随机推荐
- java 泛型 精析
Created by Marydon on 1.概述 泛型是Java SE 1.5的新特性,泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数: 这种参数类型可以用在类.接口和方法的 ...
- Socket实现服务器与客户端的交互
连接过程: 根据连接启动的方式以及本地套接字要连接的目标,套接字之间的连接过程可以分为三个步骤:服务器监听,客户端请求,连接确认. (1)服务器监听:是服务器端套接字并不定位具体的客户端套接 ...
- smack 4.1.2+openfire 3.10.2i
openfire 和以往版本号配置没有多大差别就不具体介绍了,网上搜会有一大堆的图解 以下主要说一下smack 4.1.2 的开发使用,在网上看了好多文章包含stackoverflow的都没有4.1以 ...
- 执行Android项目时指定特定的AVD进行測试
一个Androidproject空间能够创建一个或多个AVD来对指定的Android项目进行測试,假设仅仅创建了一个AVD则执行Android项目时自然启动该AVD,但是假设创建了多个AVD那么我们该 ...
- 用zd1211+Ubuntu 10.04实现的AP
[日期:2010-06-24] zd1211 在Ubuntu 10.04 LTS上的master mode 的问题解决之后,理论上就可以把zd1211 USB网卡用来做一个AP了,实际上还有几个问 ...
- iOS获取设备卸载后不变的UUID
1.首先导入系统库Security.framework 2.创建文件SFHFKeychainUtils.h如下(复制即可): @interface SFHFKeychainUtils : NSObje ...
- oc Delegate
把内部的状态通知给外界,我们可以制定一个变量,然后这个变量从外界来指定,之后我们可以通过变量去通知给外界有什么发生了. 按照上文讲的到新建一个protocol,名字为IPeople #import & ...
- 转:C#实现office文档转换为PDF或xps的一些方法
代码支持任意office格式 需要安装office 2007 还有一个office2007的插件OfficeSaveAsPDFandXPS 下载地址 [url]http://www.microsoft ...
- python标准库介绍——9 copy模块详解
==copy 模块== ``copy`` 模块包含两个函数, 用来拷贝对象, 如 [Example 1-64 #eg-1-64] 所示. ``copy(object) => object`` 创 ...
- unity, 延迟执行代码
使用协程实现比较方便,可以带参数. void Start(){ StartCoroutine(delayLaunchRocket(rocket,2.0f)); } IEnumerator delayL ...