0
정말 간단한 항목 슬라이더를 가져오고 싶습니다. 나는 그것을 실행할 때 0x800a1391 - JavaScript 런타임 오류 : 'jQuery'가 정의되지 않았습니다.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="ItemSlide.Home" %>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Multi-Item Slider with CSS Animations and jQuery</title>
<meta name="description" content="Simple Multi-Item Slider: Category slider with CSS animations" />
<meta name="keywords" content="jquery plugin, item slider, categories, apple slider, css animation" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<script type='text/javascript' src="jquery.catslider.js"></script>
<script type='text/javascript' src='jquery.min.js'></script>
<script type='text/javascript' src="modernizr.custom.63321.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="demos.css" />
</head>
<body>
<div class="container">
<header class="clearfix">
<h1>Simple Multi-Item Slider <span>Category slider with CSS animations</span></h1>
</header>
<div class="main">
<div id="mi-slider" class="mi-slider">
<ul>
<li><a href="#"><img src="images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
<li><a href="#"><img src="images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
<li><a href="#"><img src="images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
<li><a href="#"><img src="images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
</ul>
<ul>
<li><a href="#"><img src="images/5.jpg" alt="img05"><h4>Belts</h4></a></li>
<li><a href="#"><img src="images/6.jpg" alt="img06"><h4>Hats & Caps</h4></a></li>
<li><a href="#"><img src="images/7.jpg" alt="img07"><h4>Sunglasses</h4></a></li>
<li><a href="#"><img src="images/8.jpg" alt="img08"><h4>Scarves</h4></a></li>
</ul>
<ul>
<li><a href="#"><img src="images/9.jpg" alt="img09"><h4>Casual</h4></a></li>
<li><a href="#"><img src="images/10.jpg" alt="img10"><h4>Luxury</h4></a></li>
<li><a href="#"><img src="images/11.jpg" alt="img11"><h4>Sport</h4></a></li>
</ul>
<ul>
<li><a href="#"><img src="images/12.jpg" alt="img12"><h4>Carry-Ons</h4></a></li>
<li><a href="#"><img src="images/13.jpg" alt="img13"><h4>Duffel Bags</h4></a></li>
<li><a href="#"><img src="images/14.jpg" alt="img14"><h4>Laptop Bags</h4></a></li>
<li><a href="#"><img src="images/15.jpg" alt="img15"><h4>Briefcases</h4></a></li>
</ul>
<nav>
<a href="#">Shoes</a>
<a href="#">Accessories</a>
<a href="#">Watches</a>
<a href="#">Bags</a>
</nav>
</div>
</div>
</div><!-- /container -->
<script type="text/javascript">
_init : function(options) {
// the categories (ul)
this.$categories = this.$el.children('ul');
// the navigation
this.$navcategories = this.$el.find('nav > a');
var animEndEventNames = {
'WebkitAnimation' : 'webkitAnimationEnd',
'OAnimation' : 'oAnimationEnd',
'msAnimation' : 'MSAnimationEnd',
'animation' : 'animationend'
};
// animation end event name
this.animEndEventName = animEndEventNames[ Modernizr.prefixed('animation') ];
// animations and transforms support
this.support = Modernizr.csstransforms && Modernizr.cssanimations;
// if currently animating
this.isAnimating = false;
// current category
this.current = 0;
var $currcat = this.$categories.eq(0);
if(!this.support) {
this.$categories.hide();
$currcat.show();
}
else {
$currcat.addClass('mi-current');
}
// current nav category
this.$navcategories.eq(0).addClass('mi-selected');
// initialize the events
this._initEvents();
}
_initEvents : function() {
var self = this;
this.$navcategories.on('click.catslider', function() {
self.showCategory($(this).index());
return false;
});
// reset on window resize..
$(window).on('resize', function() {
self.$categories.removeClass().eq(0).addClass('mi-current');
self.$navcategories.eq(self.current).removeClass('mi-selected').end().eq(0).addClass('mi-selected');
self.current = 0;
});
}
showCategory : function(catidx) {
if(catidx === this.current || this.isAnimating) {
return false;
}
this.isAnimating = true;
// update selected navigation
this.$navcategories.eq(this.current).removeClass('mi-selected').end().eq(catidx).addClass('mi-selected');
var dir = catidx > this.current ? 'right' : 'left',
toClass = dir === 'right' ? 'mi-moveToLeft' : 'mi-moveToRight',
fromClass = dir === 'right' ? 'mi-moveFromRight' : 'mi-moveFromLeft',
// current category
$currcat = this.$categories.eq(this.current),
// new category
$newcat = this.$categories.eq(catidx),
$newcatchild = $newcat.children(),
lastEnter = dir === 'right' ? $newcatchild.length - 1 : 0,
self = this;
if(this.support) {
$currcat.removeClass().addClass(toClass);
setTimeout(function() {
$newcat.removeClass().addClass(fromClass);
$newcatchild.eq(lastEnter).on(self.animEndEventName, function() {
$(this).off(self.animEndEventName);
$newcat.addClass('mi-current');
self.current = catidx;
var $this = $(this);
// solve chrome bug
self.forceRedraw($this.get(0));
self.isAnimating = false;
});
}, $newcatchild.length * 90);
}
else {
$currcat.hide();
$newcat.show();
this.current = catidx;
this.isAnimating = false;
}
}
</script>
ARgh! 너는 나를 때렸다! 어떻게 감히! 아니요, 진지하게,이 답변은 정확하지 않습니다! – SpYk3HH
OP는 근대화 이후에도 플러그인을 넣어야합니다. – SpYk3HH
@ SpYk3HH 필자는 내 인생에서 너무 빨리 타이핑 한 적이 없기 때문에 다른 이들이 산불처럼 타는 것을 알고있었습니다. –