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,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...
随机推荐
- Xcode编译时出现cannot run using the selected device提示
很多文章说这个管用: 1) Project->Info->Deployment Target->iOS Deployment Target更改为<=设备的版本号; 2) Tar ...
- C# 4 dynamic 动态对象 动态类型转换
public class User { //使用省缺参数,一般不需要再为多态做各种静态重载了 public User( string name = "anonym", string ...
- IOS中的内存不足警告处理(译)
由于在IOS中虚拟内存系统不会采用页置换的方式来获取请求内存,取而代之的是它通过移除应用程序中的强引用来释放一些内存资源,我们知道强引用在IOS中表示拥有关系,只要有至少一个变量拥有这个对象,那么对象 ...
- java坑之无法创建线程
环境:linux 错误:java.lang.OutOfMemoryError: unable to create new native thread 原因:OS对线程是有限制 解决办法: 在Linux ...
- 找不到System.Runtime.Serialization.Json的解决方案
System.ServiceModel System.ServiceModel.Web System.Runtime.Serialization 三者均要添加引用
- ASP.NET MVC 路由进阶(之二)--自定义路由约束
3.自定义路由约束 什么叫自定义路由约束呢?假如路由格式为archive/{year}/{month}/{day},其中year,month,day是有约束条件的,必须是数字,而且有一定范围. 这时候 ...
- java新手笔记31 集合实现类
Person类: package com.yfs.javase; import java.util.Date; public class Person implements Comparable { ...
- NodeJS安全设计:好吃的草莓味糖果,只给好朋友小红
上一篇文章中,我们已经建立了一个有缓冲机制的文件服务器,能给客户端响应附件类型的文件,其实,就爱莲(iLinkIT)而言,NodeJS的模块做到这样也就已经可以了,因为使用的场景就是电脑和手机之间,与 ...
- 你需要知道的三个CSS技巧
各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新.最先进的W3C Web标准的设备,以一种更具交互性的方式来访问互联网.这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁, ...
- Mysql数据表的操作
表的操作 前提:选择数据库 语法: use 数据库名; 1.创建数据表 语法: create table 表名( 字段1 字段类型 [附加属性], 字段2 字段类型 [附加属性], 字段3 字段类型 ...