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,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...
随机推荐
- 【线性结构上的动态规划】UVa 11400 - Lighting System Design
Problem F Lighting System Design Input: Standard Input Output: Standard Output You are given the tas ...
- hdu 3093 动态规划
思路:直接引用论文的话. 暂时先不考虑“使剩下的物品都放不下”的条件,那就是求 0-1 背包的所有可行方案. 用 Fi[j]表示前 i 件物品中选若干件总体积为 j 的方案数,初始为 F0[0]=1, ...
- 今天学习css一些动画效果
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
- 关于Class.forName("oracle.jdbc.driver.OracleDriver");报ClassNotFoundException 的异常
关于try { Class.forName("oracle.jdbc.driver.OracleDriver"); }catch(ClassNotFoundException e) ...
- django 学习-4 模板标签
1.第一个标签是 if 标签 vim learn/home.html <!DOCTYPE html><html><head> <title&g ...
- HDOJ2023求平均成绩
求平均成绩 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- Intent的属性介绍
在Android系统的设计中有四大组件:Activity,Service,BroadcastReceiver,ContentProvider.Intent可以被应用于ContentProvider之外 ...
- 老男孩-金角大王-python学习博客地址
http://www.cnblogs.com/alex3714/category/770733.html
- JAVA之数据溢出
Integer在java中属于包装类,既能用于字符串与整型的转换,也能用于拆箱与装箱 package ABC; public class A{ public static void main(Stri ...
- Error This project references NuGet package(s) that are missing on this computer. Use NuGet Package Restore to download them. For more information, see http://go.microsoft.com/fwlink/?LinkID=322105. T
错误提示: Severity Code Description Project File Line Suppression StateError This project references NuG ...