var myurl;
var mydata;
var mytype = "POST";
var jsonType = "json";
var htmlType = "html";
var commonType = "application/json; charset=utf-8";
var editIndex = undefined;
var zhanbh; //--------------------------------------------------------------
$(function () {
initcoolcarousel();//也不知道为什么我点击打开图片轮播新窗口时,第一次老是显示不了,加了这个方法后就好了,谁能告诉我?
zhanbh = getQueryString("zhanbh");
bindChargStation();
$("#chargstation").val(zhanbh);
//getChargStationPicture();
chargstation_onchanged(); $("#wrapper").css("position", "absolute");
$(window).resize(function () {
if ($(window).width() > 1020) {
$("#wrapper").css("left", "24%");
} else {
$("#wrapper").removeAttr("style");
}
$(".pic-content").css("position", "relative");
$("#wrapper").css("position", "absolute");
});
}); function initcoolcarousel() {
$('#images').carouFredSel({
circular: false,
auto: false,
width: 'auto',
height: 'auto',
items: {
visible: 1
},
scroll: {
fx: 'directscroll'
}
});
$('#thumbs').carouFredSel({
circular: false,
infinite: false,
auto: false,
width: 770,
items: {
visible: 7
},
prev: '#prev',
next: '#next',
pagination: "#foo2_pag"
}); $('#thumbs img').click(function () {
$('#images').trigger('slideTo', "#" + this.alt);
$('#thumbs img').removeClass('selected');
$(this).addClass('selected');
return false;
});
$('#thumbs img:eq(0)').addClass('selected');
} function bindChargStation() { myurl = "../../WebService/PictureChargStationService.ashx";
mydata = { action: 'getChargStation' };
var data = getDatas();
$("#chargstation").empty();
var length = data.rows.length;
$("#chargstation").append("<option value='0'>—请选择—</option>");
if (length == 0) {
return;
}
for (var i = 0; i < length; i++) {
$("#chargstation").append("<option value='" + data.rows[i].ZHAN_BH + "'>" + data.rows[i].ZHUAN_MC + "</option>");
}
} function getChargStationPicture() {
myurl = "../../WebService/PictureChargStationService.ashx";
mydata = { action: 'getChargStationFileCount', id: $("#chargstation option:selected").val() };
var data = getDatas();
for (var k = 0; k <= count; k++) {
$("#images").trigger("removeItem", 0);
$("#thumbs").trigger("removeItem", 0);
}
count = data.Rows.length;
var imagesHtml = "", thumbsHtml = "";
if (!data || data == "empty" || data.Rows.length == 0) {
imagesHtml += "<img id='non-img' src='../../images/noimage.png' alt='non-img' width='450' height='450' />";
thumbsHtml += "<img src='../../images/noimage.png' alt='non-img' width='70' height='70' />";
}
else {
for (var i = 0; i < data.Rows.length; i++) {
imagesHtml += "<img id='img_" + i + "' alt='img_" + i + "'/>";
thumbsHtml += "<img id='" + i + "_img' alt='img_" + i + "' width='70' height='70' />";
}
}
$("#images").trigger("insertItem", imagesHtml);
$("#thumbs").trigger("insertItem", thumbsHtml);
for (var j = 0; j < data.Rows.length; j++) {
$("#img_" + j).attr("src", "../../Scripts/pictureChargStation/SaveChargeStationFile/" + data.Rows[j].Id + "." + data.Rows[j].FileMime);
var w = data.Rows[j].Width;
var h = data.Rows[j].Height;
var hw = 450;
var ptop = 0;
if (w >= h) {
h = (h * hw) / w;
w = hw;
ptop = (hw - h) / 2;
} else {
w = (w * hw) / h;
h = hw;
}
$("#img_" + j).attr("width", w).attr("height", h).css("padding-top", ptop);
$("#" + j + "_img").attr("src", $("#img_" + j).attr("src"));
}
initcoolcarousel();
} //----------------------------------------------------------------------------------------------------
var count = 0;
function chargstation_onchanged() { myurl = "../../WebService/PictureChargStationService.ashx";
mydata = { action: 'getAddress', id: $("#chargstation option:selected").val() };
var data = getDatas();
if (data.rows.length == 0) {
$("#csaddress").val("");
$("#cscount").val("");
return false;
}
$("#csaddress").val(data.rows[0].XIANGXI_DZ);
//mydata = { action: 'getChargPileCount', id: $("#chargstation option:selected").val() };
mydata = { action: 'getCoordinates', id: $("#chargstation option:selected").val() };
data = getDatas();
$("#jd").val(data.rows[0].LONGTUDE);
$("#wd").val(data.rows[0].LATITUDE);
getChargStationPicture(); return true;
} //---------------------------------------------------------------------------------------------------- function getDatas() {
var value;
$.ajax({
url: myurl,
type: mytype,
async: false,
data: mydata,
dataType: htmlType,
success: function (data) {
if (data) {
var val = "";
var ret = data.split("|")[0];
eval("val=" + ret);
var res = data.split("|")[1];
if (ret == "0") {
value = "0";
} else {
value = val;
}
}
},
error: function () {
parent.messager("提示", "error");
}
});
return value;
} /*
* 获取url参数值
*/
function getQueryString(name) {
var url = location.href;
var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
var paraObj = {};
for (var i = 0; j = paraString[i]; i++) {
paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
}
var returnValue = paraObj[name.toLowerCase()];
if (typeof (returnValue) == "undefined") {
return "";
} else {
return returnValue;
}
}

coolcarousel 图片轮播缩放问题的更多相关文章

  1. css3实践之图片轮播(Transform,Transition和Animation)

    楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...

  2. 图片轮播插件-carouFredSel

    carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效. 主页地址:http://caroufredsel.dev7stud ...

  3. WPF3D图片轮播效果

    原文:WPF3D图片轮播效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m0_37591671/article/details/68059169 ...

  4. Android零基础入门第49节:AdapterViewFlipper图片轮播

    原文:Android零基础入门第49节:AdapterViewFlipper图片轮播 上一期学习了ExpandableListView的使用,你已经掌握了吗?本期开始学习AdapterViewFilp ...

  5. 原生js+css3实现图片自动切换,图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  6. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  7. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  8. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  9. 基于面向对象的图片轮播(js原生代码)

    无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...

随机推荐

  1. 使用Mat分析大堆信息

    在定位一线问题时经常碰测试中出现Out Of Memory的问题, 通过jmap查看,发现JVM heap全用满了.有很多工具可以查看JVM堆的信息, 收费的比如JProfiler, YourKit, ...

  2. Eclipse NDK 配置,无需安装Cygwin

    Eclipse NDK 配置,不用安装Cygwin 文章转自http://www.cnblogs.com/chenjiajin/archive/2012/04/12/2444188.html 一.关于 ...

  3. c#语法笔记

    书写代码需要注意的地方: 1.代码中出现的所有标点都是英文半角 shift键快速切换中文半角和英文半角 shift+空格 切换全角/半角 2.在c#代码中,每行代码的结束,我们都以分号结束,注意:这个 ...

  4. .net 创建属于自己的log类

    实习到现在已经接近三个月了,由于是校企联合培养计划,所以没有工资,所幸公司对于我们这些实习生并没有什么要求,刚开始我还觉得要做点什么才能学得快,可是到了后来,发现公司安排给我们的任务并不紧要,也不算太 ...

  5. IntellJ 13.x JPA Persistence Sample

    跟上一篇差不多,一些基本的东西. 这次是JPA + Spring MVC 3.0 1.建立Project 2.Add JPA Support 3.我们以Hibernate为例,设置JPA的Provid ...

  6. Swift下标

    还记得字典吗? var numberOfLegs= ["spider": 8,"ant": 6, "cat":4] numberOfLegs ...

  7. Objective-C 【关于导入类(@class 和 #import的区别)】

    之前我们分析过 #include 和 #import 的区别,#import不会引起交叉编译,#import 确定一个文件只能被导入一次,使在递归包含中不会出现问题. 那么 #import 和 @cl ...

  8. CSS样式一

    样式 首先明确: HTML标签也有标签的属性,CSS中的样式也称作为属性,而且某些html中的属性与css中的属性同名,并且作用也相同,但是属于不同的技术. 尺寸样式: 几乎所有的标签有可以设置 wi ...

  9. Apache使用mysql认证用户

    使用MySQL进行认证 第1步:下载MySQL认证模块,并更名为mod_auth_mysql.so文件,并保存在apache的modules目录下 第2步:apache要加载此功能模块 LoadMod ...

  10. SQLite学习心得

    SQLite是一款很有名气的小型开源跨平台数据库,作为目前最流行的开源嵌入式关系型数据库,在系统结构设计中正在扮演着越来越重要的角色. 本文主要沿着 http://www.cppblog.com/we ...