Javascript carousal jquery无法在单个文件中工作
我的carousal在js小提琴中正常工作 但是，当我把所有的js、html和css代码放在一个文件中时，它不能正常工作 工作代码 我在下面提供的单个代码不起作用。。。 但是当我在js中做的时候，它会工作 问题是如果我把它保存在我的机器里，然后在chrome中打开它，它就不工作了Javascript carousal jquery无法在单个文件中工作,javascript,jquery-ui,jquery,jquery-plugins,Javascript,Jquery Ui,Jquery,Jquery Plugins,我的carousal在js小提琴中正常工作 但是，当我把所有的js、html和css代码放在一个文件中时，它不能正常工作 工作代码 我在下面提供的单个代码不起作用。。。 但是当我在js中做的时候，它会工作 问题是如果我把它保存在我的机器里，然后在chrome中打开它，它就不工作了 <!DOCTYPE html> <html lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <head>
<!DOCTYPE html>
<html lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- End MS Site Pinning-->
<link href="css/carousel-smMags.css" rel="stylesheet" type="text/css" />
<!-- <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
div { color:red; }
a, img{border: 1px solid red;}
.carousel-hdr {
width:806px;
margin:46px auto 0;
}
.carousel-hdr .bold {
text-transform: uppercase;
font-size: 15px;
color: #3f4444;
font-weight:400;
}
.carousel-hdr .rightlink {
font-weight:300;
font-size: 14px;
}
.carousel-hdr .dark-double {
margin-top:10px;
}
.magHeroCarousel {
color: #999999;
z-index: 0;
position: relative;
height: 260px; /* note - change to 280 when sprites/reading list is functioning */
overflow: hidden;
margin: 25px 0 0 0;
}
.magHeroCarousel .opaque.caroSmallLeft,
.magHeroCarousel .opaque.caroSmallRight {
box-shadow: none;
height: 300px;
position: absolute;
top: 0;
width: 43px;
z-index: 101;
cursor:pointer;
background-attachment: scroll;
background-color: transparent;
/*background-image: url(http://imgs.zinio.com/www/images/ui/grid-carousel-nav.png);*/
background-repeat: no-repeat;
background-position: 0 0;
}
.magHeroCarousel .opaque.caroSmallLeft:hover,
.magHeroCarousel .opaque.caroSmallRight:hover {
/*background-image: url(http://imgs.zinio.com/www/images/ui/grid-carousel-nav-hover.png); */
}
.magHeroCarousel .opaque.caroSmallLeft {
background-position: 0px 96px;
background-color: green;
left: 0px;
border: 1px solid black;
}
.magHeroCarousel .opaque.caroSmallRight {
background-position: -43px 96px;
right: 0px;
background-color:red;
height:300px;
border: 1px solid black;
}
.magHeroCarousel .caroContainer {
position: absolute;
top: 0px;
left: 62px;
height: 100%;
z-index: 3;
}
.magHeroCarousel .caroContainer img {
width:185px;
/* height:auto;*/
}
.magHeroCarousel .caroContainer .grouping {
height: 300px;
}
.magHeroCarousel .caroContainer .active {
margin-left: 31px;
}
.magHeroCarousel .caroContainer .grouping div a {
margin-right: 26px;
display:block;
}
.magHeroCarousel .caroContainer .grouping a {
margin-right: 26px;
}
.magHeroCarousel .caroContainer .grouping :last-child a {
margin-right: 52px;
}
.magHeroCarousel .caroContainer div {
float: left;
}
.magHeroCarousel .caroContainer div p {
margin: 8px 0 0 0;
display: none;
}
.magHeroCarousel .caroContainer div.active p {
display: block;
}
.magHeroCarousel .caroContainer div p span {
background: url(http://imgs.zinio.com/www/images/sprites/carouselSprite.png) no-repeat;
padding-left: 50px;
color:#888888;
font-size:10px;
}
.magHeroCarousel .caroContainer div p :first-child {
background-position: 0 -71px;
}
.magHeroCarousel .caroContainer div p :last-child {
background-position: 0 -47px;
}
.magHeroCarousel .caroContainer p :first-child {
margin: 0 7px 0 0;
}
.sprites {
display: block;
margin-top: 5px;
}
.fave span {
margin-right: 0px;
bottom: 0px;
}
.read span {
margin-right: 0px;
bottom: 0px;
}
</style>
<script>
/*************************************
* z-carousel.jquery.js
*/
(function($) {
'use strict';
$.fn.zCarousel = function() {
return this.each(function() {
var $this = $(this),
$kids = $this.children("div"),
prevBtn = document.createElement("div"),
nextBtn = document.createElement("div"),
pagerWidth, childLength, childWidth, leftMagTitle, rightMagTitle, forPrependingOne, forAppendingOne, $prevArticleBlock, $nextArticleBlock, link;
$kids.addClass("caroContainer");
prevBtn.setAttribute("class", "caroSmallLeft");
nextBtn.setAttribute("class", "caroSmallRight");
function lazyLoad() {
var $active = $this.find(".active"),
$currentImg = $active.find('img');
$currentImg.each(function(i) {
$($currentImg[i]).attr('src', $($currentImg[i]).data('lazyload'))
})
}
if ($this.attr("data-carouselType") === "magazineHero") {
$(prevBtn).addClass("opaque");
$(nextBtn).addClass("opaque");
this.appendChild(prevBtn);
this.appendChild(nextBtn);
pagerWidth = $(prevBtn).width();
childLength = $kids.children().length;
$kids.css("left", pagerWidth + "px").children("div").addClass("grouping");
childWidth = $kids.children("div").width();
leftMagTitle = document.createElement("div");
rightMagTitle = document.createElement("div");
prevBtn.appendChild(leftMagTitle);
nextBtn.appendChild(rightMagTitle);
$kids.width(childLength * childWidth);
$kids.children(":first-child").addClass("active");
$kids.css("left", (pagerWidth - $this.find(".caroContainer").children("div").width()) + "px");
forPrependingOne = $kids.children(":eq(" + (childLength - 1) + ")").clone();
$kids.children(":eq(" + (childLength - 1) + ")").remove();
$kids.prepend(forPrependingOne);
$kids.click(function(e) {
link = $(e.target).parents(this).children("a").attr("href");
if ($(e.target).parents(this) && e.target.tagName !== "IMG" && e.target.tagName !== "INPUT" && e.target.tagName !== "A" && link !== undefined) {
e.preventDefault();
document.location = link;
}
});
lazyLoad();
$(prevBtn).click(function() {
forPrependingOne = $kids.children(":eq(" + (childLength - 1) + ")").clone();
$kids.children(":eq(" + (childLength - 1) + ")").remove();
$kids.prepend(forPrependingOne);
$kids.animate({
left: '-=' + childWidth
}, 0).animate({
left: '+=' + childWidth
}, 250);
$kids.children(".active").removeClass("active").prev().addClass("active");
$(leftMagTitle).empty().append($kids.find(".grouping.active").prev("div").children(".articleInfo").children("h3").clone()).append($kids.find(".grouping.active").prev("div").children(".articleInfo").children(":first-child").clone());
$(rightMagTitle).empty().append($kids.find(".grouping.active").next("div").children(".articleInfo").children("h3").clone()).append($kids.find(".grouping.active").next("div").children(".articleInfo").children(":first-child").clone());
lazyLoad();
});
$(nextBtn).click(function() {
forAppendingOne = $kids.children(":eq(0)").clone();
$kids.children(":eq(0)").remove();
$kids.append(forAppendingOne);
$kids.animate({
left: '+=' + childWidth
}, 0).animate({
left: '-=' + childWidth
}, 250);
$kids.children(".active").removeClass("active").next().addClass("active");
lazyLoad();
});
}
});
};
}(jQuery));
/*************************************
* zin-carousel2.js
*/
;
(function($, window, document, undefined) {
'use strict';
/*************************************
* Jquery Plugin Setup
*/
$.fn.zinCarousel = function(settings) {
var settings = $.extend({}, $.fn.zinCarousel.defaultSettings, settings || {});
return this.each(function() {
var o = $.extend(true, {}, settings),
$elem = $(this),
caro = new Carousel(o, $elem);
caro.init();
});
};
/*************************************
* Default Settings
*/
$.fn.zinCarousel.defaultSettings = { /* settings */
keyboadNav: true,
handleSubData: false,
autoPlay: false,
autoPlayDuration: 4000,
animationSpeed: 250,
easing: 'easeInOutExpo',
/* elements */
body: 'body',
viewPort: '#view-port',
parent: '.carousel_ul',
kids: '.carousel_ul li',
firstKid: '.carousel_ul li:first',
lastKid: '.carousel_ul li:last-of-type',
prevBtn: '.caroLeft',
nextBtn: '.caroRight',
active: '.active',
startPosition: ':nth-child(4)',
leftMagTitle: '#leftMagTitle',
rightMagTitle: '#rightMagTitle'
};
/*************************************
* Main Carousel Object {}
*/
function Carousel(settings, elem) { /* Settings */
this.settings = settings;
this.animationSpeed = this.settings.animationSpeed;
this.startPosition = this.settings.startPosition;
this.handleSubData = this.settings.handleSubData;
this.autoplay = this.settings.autoPlay;
this.autoplayDuration = this.settings.autoPlayDuration; /* Elements */
// this.$elem = $(elem);
this.$body = $(this.settings.body);
this.$viewPort = $(this.settings.viewPort);
this.$parent = $(this.settings.parent);
this.$$kids = $(this.settings.kids);
this.$prevBtn = $(this.settings.prevBtn);
this.$nextBtn = $(this.settings.nextBtn);
this.$leftMagTitle = $(this.settings.leftMagTitle);
this.$rightMagTitle = $(this.settings.rightMagTitle); /* strings */
this.parentString = this.settings.parent;
this.firstKidString = this.settings.firstKid;
this.lastKidString = this.settings.lastKid;
this.active = this.settings.active;
this.activeString = this.active.replace(/^\.+/, ''); /* local settings */
this.itemWidth = this.$$kids.outerWidth(true);
this.leftIndent = parseInt(this.$parent.css('left'), 10);
this.easingStyle = this.settings.easing;
this.leftOffset = this.$parent.css('left');
this.isAutoPlaying = false;
return this;
}
/*************************************
* Methods
*/
Carousel.prototype = {
init: function(elem) {
// set the active element
this.$parent.children(this.startPosition).addClass(this.activeString);
this.lazyLoad();
this.setEvents(this);
if (this.handleSubData) {
this.setMagTitle();
}
if (this.autoplay) {
this.autoPlay();
this.isAutoPlaying = true;
}
},
setEvents: function(_this) {
// Previous Button Event
this.$prevBtn.on('click', function(e) {
_this.prevAction();
});
// Next Button Event
this.$nextBtn.on('click', function(e) {
_this.nextAction();
});
// Capture click on viewport above image
this.$viewPort.on('click', function(e) {
_this.mainMediaClick(e);
});
this.$viewPort.on('mouseover', function(e) {
if (_this.isAutoPlaying) {
_this.stopAutoPlay();
}
});
this.$viewPort.on('mouseout', function(e) {
if (_this.autoplay) {
_this.autoPlay();
}
});
// Keyboard Navigation Event
if (this.settings.keyboadNav) {
_this.$body.on('keydown', function(e) {
_this.keyboardNav(e);
});
}
},
prevAction: function() {
this.animate('prev');
},
nextAction: function() {
this.animate('next');
},
keyboardNav: function(e) {
switch (e.keyCode) {
// left arrow
case 37:
this.prevAction();
break;
// right arrow
case 39:
this.nextAction();
break;
}
},
autoPlay: function() {
var _this = this;
if (this.autoplay) {
this.run = window.setInterval(function() {
_this.nextAction();
}, this.autoplayDuration);
this.isAutoPlaying = true;
}
},
stopAutoPlay: function() {
this.isAutoPlaying = false;
window.clearInterval(this.run);
},
clearAutoPlay: function() {
clearInterval(this.run);
this.autoPlay();
},
mainMediaClick: function(e) {
var link = this.findActive().find('a').attr('href');
e.preventDefault();
window.location = link;
},
findActive: function() {
return this.$parent.find(this.active);
},
lazyLoad: function() {
var $active = this.findActive(),
$currentImg = $active.find('img'),
$nextImg = $active.next('li').find('img'),
$nextImgP = $active.next('li').next('li').find('img'),
$previousImg = $active.prev('li').find('img'),
$previousImgP = $active.prev('li').prev('li').find('img');
$nextImg.attr('src', $nextImg.data('lazyload'));
$nextImgP.attr('src', $nextImgP.data('lazyload'));
$previousImg.attr('src', $previousImg.data('lazyload'));
$previousImgP.attr('src', $previousImgP.data('lazyload'));
$currentImg.attr('src', $currentImg.data('lazyload'));
},
setMagTitle: function() {
var articleInfoPrev = this.findActive().prev('li').children('.articleInfo').children().clone(),
articleInfoNext = this.findActive().next('li').children('.articleInfo').children().clone();
this.$leftMagTitle.find('div').empty().append(articleInfoPrev);
this.$rightMagTitle.find('div').empty().append(articleInfoNext);
},
swapKids: function(direction) {
var _this = this,
firstKid = $(this.firstKidString),
lastKid = $(this.lastKidString);
if (direction === 'prev') {
_this.$parent.css({
'left': _this.leftOffset
});
firstKid.before(lastKid);
} else if (direction === 'next') {
_this.$parent.css({
'left': _this.leftOffset
});
lastKid.after(firstKid);
}
},
animate: function(direction) {
var _this = this,
current = this.findActive(),
left_indent, currentDirection, articleInfo = current.children('.articleInfo'),
animateParent = $(this.parentString + ':not(:animated)');
if (direction === 'prev') {
left_indent = (this.leftIndent + this.itemWidth) + 'px';
currentDirection = current.prev();
} else if (direction === 'next') {
left_indent = (this.leftIndent - this.itemWidth) + 'px';
currentDirection = current.next();
}
articleInfo.css({
'display': 'none'
});
animateParent.animate({
'left': left_indent
}, this.animationSpeed, this.easingStyle, function() {
_this.swapKids(direction);
currentDirection.children('.articleInfo').end().addClass(_this.activeString);
current.removeClass(_this.activeString);
_this.lazyLoad();
// articleInfo.css({
// 'display': 'block'
// });
if (_this.handleSubData) {
_this.setMagTitle();
}
if (_this.autoplay) {
_this.clearAutoPlay();
}
});
}
};
$.extend($.easing, {
def: 'easeOutQuad',
swing: function(x, t, b, c, d) {
//alert($.easing.default);
return $.easing[$.easing.def](x, t, b, c, d);
},
easeInQuad: function(x, t, b, c, d) {
return c * (t /= d) * t + b;
},
easeOutQuad: function(x, t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
},
easeInOutQuad: function(x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t - 2) - 1) + b;
},
easeInCubic: function(x, t, b, c, d) {
return c * (t /= d) * t * t + b;
},
easeOutCubic: function(x, t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
},
easeInOutCubic: function(x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
},
easeInQuart: function(x, t, b, c, d) {
return c * (t /= d) * t * t * t + b;
},
easeOutQuart: function(x, t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeInOutQuart: function(x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
},
easeInQuint: function(x, t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
},
easeOutQuint: function(x, t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
},
easeInOutQuint: function(x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
},
easeInSine: function(x, t, b, c, d) {
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
},
easeOutSine: function(x, t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
},
easeInOutSine: function(x, t, b, c, d) {
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
},
easeInExpo: function(x, t, b, c, d) {
return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
},
easeOutExpo: function(x, t, b, c, d) {
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
},
easeInOutExpo: function(x, t, b, c, d) {
if (t == 0) return b;
if (t == d) return b + c;
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function(x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
easeOutCirc: function(x, t, b, c, d) {
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
},
easeInOutCirc: function(x, t, b, c, d) {
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
},
easeInElastic: function(x, t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (a < Math.abs(c)) {
a = c;
var s = p / 4;
}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
easeOutElastic: function(x, t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (a < Math.abs(c)) {
a = c;
var s = p / 4;
}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
},
easeInOutElastic: function(x, t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) return b;
if ((t /= d / 2) == 2) return b + c;
if (!p) p = d * (.3 * 1.5);
if (a < Math.abs(c)) {
a = c;
var s = p / 4;
}
else var s = p / (2 * Math.PI) * Math.asin(c / a);
if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
},
easeInBack: function(x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
easeOutBack: function(x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
easeInOutBack: function(x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
},
easeInBounce: function(x, t, b, c, d) {
return c - $.easing.easeOutBounce(x, d - t, 0, c, d) + b;
},
easeOutBounce: function(x, t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
},
easeInOutBounce: function(x, t, b, c, d) {
if (t < d / 2) return $.easing.easeInBounce(x, t * 2, 0, c, d) * .5 + b;
return $.easing.easeOutBounce(x, t * 2 - d, 0, c, d) * .5 + c * .5 + b;
}
});
}(jQuery, window, document));
/*************************************
home.js
*/
$(document).ready(function() { /* small magazine carousel */
$(".magHeroCarousel").zCarousel();
/* large article hero carousel */
$(".carousel_container").zinCarousel({ /* settings */
keyboadNav: true,
autoPlay: false,
autoPlayDuration: 1000,
animationSpeed: 400,
handleSubData: true,
easing: "swing" /***** CORRECTION: comma deleted *****/
//easeInOutExpo, swing, easeInOutBack, easeInOutElastic(1500),
});
});
</script>
</head>
<body>
<div class="wrapper" style="width: 330px;">
<!-- top sellers carousel -->
<div class="magHeroCarousel" data-carouselType="magazineHero">
<div>
<div>
<div class="specialHover">
<img src="img/grey.gif" data-lazyload="" width="200" height="187" alt="1" title="AppleMagazine" class="cover lazy" style="background-color: black;" />
</div>
</div>
<div>
<div class="specialHover">
<img src="" data-lazyload="" width="200" height="187" alt="2" title="iPhone Life" class="cover lazy" style="background-color: yellow;" />
</div>
</div>
<div>
<div class="specialHover">
<img src="" data-lazyload="" width="200" height="187" alt="3" title="Popular Science" class="cover lazy" style="background-color: pink;" />
</div>
</div>
</div>
</div>
<!-- deals carousel -->
<!-- end magHeroCarousel -->
</div><!--end wrapper -->
</body>
</html>
默认情况下，Chrome会阻止使用file://协议加载的Javascript。这包括以这种方式加载的.htm/.html文件中的任何Javascript，或由此类文件使用相对链接加载的脚本文件 这是一个很好的安全措施，我不建议绕过它。特别是如果您希望在本地计算机上开发网站，我建议安装Web服务器是一个非常用户友好的软件包，可以帮助您开始。设置WAMPServer时，系统将提示您为服务器的根目录设置文件夹。此文件夹将用于放置网站中使用的任何文件。WAMP默认为C:\WAMP\www。打开浏览器并导航到即可访问该文件夹中的任何文件http://localhost/filename.extension 将表现为从外部服务器加载，但有一些例外，但是这些都超出了这个答案的范围，因为你不太可能遇到它们 如果您仍然反对安装Web服务器，那么您可以通过创建新的Chrome快捷方式，将Chrome切换到允许本地Javascript的模式。右键单击该快捷方式，选择“属性”，然后在“目标”字段中，在引号后添加以下内容：
--allow-file-access --allow-file-access-from-files
当您浏览互联网时，请正常启动Chrome。您使用的是什么web服务器？@joequincy:我没有使用任何web服务器，我只是在桌面上保存为.html文件，并在Chrome中打开。您尝试过吗？…在启动Chrome的快捷方式中。如果你想开发一个网站，最好是找一个像Chrome这样的网站服务器并使用它，而不是搞砸你启动Chrome的方式。基本jQuery正在工作，因为您正在从internet加载它。HTML文件中嵌入的内容不是，Chrome会忽略它。