coolcarousel 图片轮播缩放问题
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 图片轮播缩放问题的更多相关文章
- css3实践之图片轮播(Transform,Transition和Animation)
楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...
- 图片轮播插件-carouFredSel
carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效. 主页地址:http://caroufredsel.dev7stud ...
- WPF3D图片轮播效果
原文:WPF3D图片轮播效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m0_37591671/article/details/68059169 ...
- Android零基础入门第49节:AdapterViewFlipper图片轮播
原文:Android零基础入门第49节:AdapterViewFlipper图片轮播 上一期学习了ExpandableListView的使用,你已经掌握了吗?本期开始学习AdapterViewFilp ...
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 基于面向对象的图片轮播(js原生代码)
无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...
随机推荐
- Web前端学习笔记1
Day1. 1.Windows常用快捷键. 快捷键 功能 ctrl+c 复制 ctrl+v 粘贴 ctrl+x 剪切(复制和剪切后都可以粘贴) ctrl+a 全选 ctrl+s 保存 ctrl+tab ...
- Tomcat - 持久化 Session
Session 是保存在内存中的,如果服务器重启.宕机的话,Session 就会丢失.有时候,我们需要对 Session 持久化以应对意外的情况发生.例如,客户端与服务器在交互过程中,可能因为 Ses ...
- Lombok 安装
Lombok 是一种 Java™ 实用工具,可用来帮助开发人员消除 Java 的冗长,尤其是对于简单的 Java 对象(POJO).它通过注释实现这一目的.通过在开发环境中实现 Lombok ,开发人 ...
- 关于Tesseract3.01的使用方法
Tesseract就不多介绍勒,能找到的人都知道是干嘛的 下面记录一下C# vs2010下的使用方法(借鉴http://blog.csdn.net/bobo1013767522/article/det ...
- centos6.5下逻辑卷操作
1.将两块独立磁盘分别分区 2.创建物理卷-pvcreate 3.创建卷组 4.创建逻辑卷 5.格式化逻辑卷 6.扩展逻辑卷 7.缩小逻辑卷
- linux中vsftpd登陆慢卡问题解决方法
1.修改服务器上的/etc/resolv.conf令其内容只有类似 nameserver 192.81.133.229 nameserver 114.114.114.114 出现问题的机器的resol ...
- SQL Server 中WITH (NOLOCK)浅析(转潇湘隐者)
博文出处:http://www.cnblogs.com/kerrycode/p/3946268.html 概念介绍 开发人员喜欢在SQL脚本中使用WITH(NOLOCK), WITH(NOLOCK)其 ...
- 设置一个View的背景图片的集中方法
控制器view的背景图片的方法, 四种: 1.直接在控制器view上添加一个imageView大小设置的和view一样 UIImageView *beijingimage = [UIImageView ...
- FAILURE: Build failed with an exception. Crunching Cruncher screen.png failed
自己测试ionic的模板项目cutePuppyPics时,按照https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md#angular-updat ...
- Android开发虚拟机的各种分辨率