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 ...
随机推荐
- use of _track and track_visibility
Dosen't work...the followers don't recieve an email when the state is change. Here is the code in th ...
- SQL Union作用
动态构造一个SQL语句然后执行,构造动态语句的查询语句如下 SELECT REPLACE(WMSYS.WM_CONCAT(STR),',',' UNION ') FROM (SELECT 'SELEC ...
- Vijos1935不可思议的清晨题解
- 题目来源 https://vijos.org/p/1935 描写叙述 今天,是2015年2月14日,星期六,情人节. 这真是一个不可思议的日子.今天早上.我打开窗户,太阳居然从西側升了起来. 我与 ...
- android.widget.BaseAdapter调用DataSetObservable.notifyChanged/Invalidated
在android.widget.BaseAdapter类中定义了两个notifyDataXXX方法. public void notifyDataSetChanged() { mDataSet ...
- matplot模块中的pylab
pylab的目的 Pylab combines the functionality of pyplot with the capabilities of NumPy in a single names ...
- Android开发学习之Activity的简介
1.Activity的概念介绍 Activity是Android组件中最基本也是最常用的一种组件,在一个Android应用中,一个Activity通常就是一个单独的屏幕.每一个Activity都被实现 ...
- 【ERROR】bash: vim: command not found的解决办法
今天在学习鸟哥的菜的时候,发现自己linux不可以启用vim命令,错误为:bash: vim: command not found. 机器环境:VMWare8+RED HAT Enterprise5 ...
- 【jQuery】JQuery-ui autocomplete与strtus2结合使用
汉字搜索效果图: 拼音首字母搜索效果图: 1)数据库表及函数(SQL Server 2008) 先来建立数据库表City,它包含两个字段CityID,CityName. CREATE TABLE C ...
- 【Linux】正确的关机方法
1)shutdown命令 我们较常使用的是shutdown这个命令,这个命令可以安全地关闭或重启Linux系统,它在系统关闭之前给系统上的所有登录用户提示一条警告信息.该命令还允许用户指定一个时间参数 ...
- python学习笔记011——检查变量类型type()
>>> a = 1 >>> type(a) <class 'int'> >>> b = 1.0 >>> type(b ...