实施Hero Carousel Slider的问题 [英] Problems implenting Hero Carousel Slider
本文介绍了实施Hero Carousel Slider的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图实现的滑块/旋转木马是这样的： http：// www.paulwelsh.info/jquery-plugins/hero-carousel/
我知道我必须为它添加HTML代码，但我无法由于设计网站的经验不足（一个月前开始我的课程）。你能帮我用我应该添加的HTML代码来实现这个功能吗？这是我的HTML，CSS&的JavaScript。 HTML是我认为它应该看起来像，这显然是错误的。
$ b HTML
< div class =what here？>
< ul class =and what here？>
什么在这里？
< li>< img src =images / deadmau5 / slide1.jpg>< / li>
< li>< img src =images / deadmau5 / slide2.jpg>< / li>
< li>< img src =images / deadmau5 / slide3.jpg>< / li>
< li>< img src =images / deadmau5 / slide4.jpg>< / li>
< / ul>
< / div>
CSS
.hero {
width：100％;
职位：亲属;
overflow：hidden;
margin-bottom：48px;
}
.hero-carousel article {
width：980px;
margin：0 auto;
height：480px;
display：block;
float：left;
职位：亲属;
}
.hero-carousel-container article {
float：left;
}
.hero-carousel article img {
position：absolute;
top：0;
剩下：0;
z-index：1;
}
.hero-carousel article .contents {
position：relative;
z-index：2;
top：72px;
left：48px;
list-style：none;
颜色：＃000;
width：556px;
padding：20px;
背景：rgba（255,255,255,0.8）;
-pie-background：rgba（255,255,255,0.8）;
-moz-border-radius：20px;
-webkit-border-radius：20px;
border-radius：20px;
行为：url（/assets/PIE.htc）;
}
.hero-carousel-nav {
width：980px;
位置：绝对;
bottom：0;
剩下：50％;
margin-left：-490px;
z-index：2;
}
.hero-carousel-nav li {
position：absolute;
bottom：48px;
右：48px;
list-style：none;
}
.hero-carousel-nav li.prev {
left：48px;
right：auto;
}
.hero-carousel-nav li a {
background：＃D21034;
颜色：#fff;
border：none;
概述：无;
display：block;
float：left;
padding：5px 20px;
-moz-border-radius：20px;
-webkit-border-radius：20px;
border-radius：20px;
行为：url（/assets/PIE.htc）;
}
.hero-carousel-nav li a：hover {
background：＃89051C;
}
.hero-carousel-nav li a：active，
.hero-carousel-nav li a：focus {
border：none;
概述：无;
}
Javascript $ b
jQuery.fn.heroCarousel = function（a）{a = jQuery.extend（{animationSpeed：1000，navigation：true，easing：，timeout：5000 ，暂停：真，pauseOnNavHover：真，prevText： 上一个，nextText： 下一步，css3pieFix：假，currentClass： 当前，的onLoad：函数（）{}，在onStart：函数（）{}，的onComplete：功能（）{}}，a）; if（jQuery.browser.msie&& parseFloat（jQuery.browser.version）< 7）{a.animationSpeed = 0} return this.each（function（）{var k = jQuery的（这），b = k.children（）; CURRENTITEM = 1; childWidth = b.width（）; childHeight = b.height（）;如果（b.length个→2）{b.each（函数（M） {如果（a.itemClass）{jQuery的（本）.addClass（a.itemClass）}}）; b.filter（ ：第一）addClass（a.currentClass）。之前（b.filter（ ：最后一个 ））; var d = Math.round（childWidth * k.children（）。length），l = - + Math.round（childWidth + Math.round（childWidth / 2））+px; k.addClass （ 英雄传送带容器）的CSS（{位置： 相对，溢出： 隐藏，左： 50％，顶端：0 利润率左：L，高度：CH ildHeight，width：d}）; k.before（'< ul class =hero-carousel-nav>< li class =prev>< a href =＃>'+ a .prevText +'< / a>< / li>< li class =next>< a href =＃>'+ a.nextText +< / a>< / li>< ; / ul>）; var e = k.prev（。hero-carousel-nav），h; if（a.timeout> 0）{var j = false; if（a.pause）{k.hover （函数（）{J = TRUE}，函数（）{J = FALSE}）}如果（a.pauseOnNavHover）{e.hover（函数（）{J = TRUE}，函数（）{J = FALSE}）}函数c（）{if（！j）{e.find（。next a）。trigger（click）}} h = window.setInterval（c，a.timeout）} e.find（a ）.data（disabled，false）.click（function（p）{p.preventDefault（）; var m = jQuery（this），n = m.parent（）。hasClass（prev），o = k 。儿童（）;如果（m.data（ 无效）===假）{a.onStart（K，E，o.eq（CURRENTITEM），一个）;如果（N）{F（o.filter（ ：最后一个）， 以前）}其他{F（o.filter（ ：第一个）， 下一个）} m.data（ 已禁用，真正的）; setTimeout的（函数（）{m.data （ 禁用，假）}，a.animationSpeed + 200）;如果（a.timeout大于0）{window.clearInterval（H）; H = window.setInterval（C，a.timeout）}}}）;功能f（m，q）{var o = p arseFloat（k.position（）左侧。）中，n = parseFloat（k.css（ 利润率左））;如果（Q === 前一个）{m.before（m.clone（）addClass（。 carousel-clone））; k.prepend（m）; var p = Math.round（n-childWidth）; var r =+ =} else {m.after（m.clone（）。addClass（如果（a.css3pieFix）{g（jQuery（.carousel-clone））} k.css（））; k.append（m）; var p = 1; var r = - = （{左：○，宽度：Math.round（d + childWidth）， 利润率左：p}）。动画（{左：R + childWidth}，a.animationSpeed，a.easing，函数（）{ķ .css（{left：50％，width：d，margin-left：n}）; jQuery（。carousel-clone）。remove（）; i（）}）} function g（n） {var m = n.attr（_ pieId）; if（m）{n.attr（_ pieId，m +_ cloned）} n.find（* [_ pieId]）each（function（o， p）{var q = $（p）.attr（_ pieId）; $（p）.attr（_ pieId，q +_ cloned）}）} function i（）{var m = k.children ; m.removeClass（a.currentClass）.EQ（CURRENTITEM）.addClass（a.currentClass）; a.onComplete（K，k.prev（ 英雄传送带-NAV），m.eq（CURRENTITEM），一个）}如果（jQuery.browser.msie）{e.find（ A）。ATTR（ HIDEFOCUS， 真）} a.onLoad（K，E，k.children（）。当量（CURRENTITEM），一个）}}）};
解决方案
从您提供的示例页面嵌入这些资源：
< link rel =stylesheetmedia =allhref =jquery.heroCarousel.csstype =text / css/>
< script type ='text / javascript'src ='jquery.heroCarousel-1.3.js'>< / script>
< script type ='text / javascript'src ='http：//code.jquery.com/jquery-1.8.2.js'>< / script>
然后按照这个HTML结构：
< div class =hero>
< div class =hero-carousel>
< article>< img src =http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg>
< / article>
<文章>
< img src =http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg>
< / article>
<文章>
< img src =http://www.deadmau5.com/wp-content/uploads/2012/06/ATGH_deadmau5.com_1.jpg>
< / article>
<文章>
< img src =http://www.deadmau5.com/wp-content/uploads/2012/05/deadmau5-web-banner-1.jpg>
< / article>
然后将此JavaScript代码添加到您网站的末尾：
$（document）.ready（function（）{
$（'。hero-carousel'）。 heroCarousel（{
css3pieFix：true
}）;}）;
DEMO： http://jsfiddle.net/dCYB7/1/ ，编辑：
p>在一个HTML + CSS + Javascript集合中的整个滑块：
< style>
#slider {width：100％;溢出：隐藏;高度：372px;背景图像：网址（http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-bg.png）;边距：25像素; }
＃slider-container {height：352px;宽度：950像素;保证金：汽车;填充顶：10px的;位置：相对; }
＃slider-inner {width：10000px;高度：352px;位置：绝对的;顶部：10px的;左：-970px; }
.slide {width：938px;高度：340px; border：6px solid＃000;向左飘浮;保证金权：20px的;位置：相对; }
＃slider-arrow-left {display：block;宽度：115px;高度：124px;背景图像：网址（http://www.deadmau5.com/wp-content/themes/deadmau5/images/large-arrow-left.png）;位置：绝对的;左：-53px;顶：120像素;的z-index：999; }＃slider-arrow-left：hover {background-position：0 -124px; }
＃slider-arrow-right {display：block;宽度：115px;高度：124px;背景图像：网址（http://www.deadmau5.com/wp-content/themes/deadmau5/images/large-arrow-right.png）;位置：绝对的;右：-53px;顶：120像素;的z-index：999; }＃slider-arrow-right：hover {background-position：0 -124px; }
＃slider-fade-left {display：block;高度：372px;宽度：300像素;背景图像：网址（http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-left.png）;位置：绝对的;左：-320px;顶：0像素;的z-index：2; }
＃slider-fade-left：hover {opacity：0.92; }
＃slider-fade-right {display：block;高度：372px;宽度：300像素;背景图像：网址（http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-right.png）;位置：绝对的;右：-320px;顶：0像素;的z-index：2; }
＃slider-fade-right：hover {opacity：0.92; }
＃slider-black-left {height：372px;宽度：1000像素;位置：绝对的;顶：0像素;左：-1300px;背景色：＃0c100f; }
＃slider-black-right {height：372px;宽度：1000像素;位置：绝对的;顶：0像素;右：-1300px;背景色：＃0c100f; }
< / style>
< div id =slider>
< div id =slider-container>
< div id =slider-inner>
< div class =slide>
< a target =_ blankhref =http://www.youtube.com/watch?v=Mz8sQSEUGn4>< img alt =deadmau5 Bannersrc =http：// www .deadmau5.com / wp-content / uploads / 2012/06 / slide1.jpg/>< / a> < / DIV>
< div class =slide>
< a target =_ blankhref =http://bzz.is/heapmau5>< img alt =deadmau5 Bannersrc =http://www.deadmau5.com/wp -content / uploads / 2012/06 / telemiss_website_banner2.jpg/>< / a> < / DIV>
< div class =slide>
< a target =_ blankhref =http://smarturl.it/albumtitlegoeshere>< img alt =deadmau5 Bannersrc =http://www.deadmau5.com/wp -content / uploads / 2012/06 / ATGH_deadmau5.com_1.jpg/>< / a> < / DIV>
< div class =slide>
< a target =_ blankhref =http://bzz.is/neffmau5>< img alt =deadmau5 Bannersrc =http://www.deadmau5.com/wp -content / uploads / 2012/05 / deadmau5-web-banner-1.jpg/>< / a> < / DIV>
< div class =slide>
< a target =_ blankhref =http://www.youtube.com/watch?v=Mz8sQSEUGn4>< img alt =deadmau5 Bannersrc =http：// www .deadmau5.com / wp-content / uploads / 2012/06 / slide1.jpg/>< / a> < / DIV>
< div class =slide>
< a target =_ blankhref =http://bzz.is/heapmau5>< img alt =deadmau5 Bannersrc =http://www.deadmau5.com/wp -content / uploads / 2012/06 / telemiss_website_banner2.jpg/>< / a> < / DIV>
< / div>
< a href =＃id =slide-left>< span id =slider-arrow-left>< / span>< / a>
< a href =＃id =slide-right>< span id =slider-arrow-right>< / span>< / a>
< a href =＃id =slide-left-fade>< span id =slider-fade-left>< / span>< / a>
< a href =＃id =slide-right-fade>< span id =slider-fade-right>< / span>< / a>
< div id =slider-black-left>< / div>
< div id =slider-black-right>< / div>
< div id =hearts>
< a href =＃id =heart1>< span class =heart>< / span>< / a>
< a href =＃id =heart2>< span class =heart>< / span>< / a>
< a href =＃id =heart3>< span class =heart>< / span>< / a>
< a href =＃id =heart4>< span class =heart>< / span>< / a>
< / div>
< / div>
< / div>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js> ;< /脚本>
< script type =text / javascriptsrc =http://malsup.github.com/chili-1.7.pack.js>< / script>
< script type =text / javascriptsrc =http://malsup.github.com/jquery.cycle.all.js>< / script>
< script type =text / javascriptsrc =http://malsup.github.com/jquery.easing.1.3.js>< / script>
< script type =text / javascript>
$ b $（document）.ready（function（）{
function slideLeft（evt）{
evt.preventDefault（）;
clearInterval（refreshId ）;
unbindAll（）;
var oldOrb = jQuery.data（document.body，'activeOrb'）;
var newOrb = oldOrb - 1; if（newOrb <1）{newOrb = 4;}
jQuery.data（document.body，'activeOrb'，newOrb）;
orbChange（newOrb）;
$（'＃slider-inner'）。animate（{
left：'+ = 970'
}，600，'easeOutQuart'，function（）{
var me = $ （this）;
var p = me.position（）;
if（p.left> -10）{me.css（'left'，'-3880px'）;}
bindAll（）;
}）;
}
函数slideRight（evt）{
evt.preventDefault（）;
clearInterval（refreshId）;
unbindAll（）;
var oldOrb = jQuery.data（document.body，'activeOrb'）;
oldOrb = parseInt（oldOrb）;
var newOrb = oldOrb + 1;如果（newOrb> 4）{newOrb = 1; }
jQuery.data（document.body，'activeOrb'，newOrb）;
orbChange（newOrb）;
$（'＃slider-inner'）。animate（{
left：' - = 970'
}，600，'easeOutQuart'，function（）{
var me = $（this）;
var p = me.position（）;
if（p.left< -4840）{me.css（'left'，'-970px' ）;}
bindAll（）;
}）;
函数slideRight2（）{
var oldOrb = jQuery.data（document.body，'activeOrb'）;
var newOrb = oldOrb + 1;如果（newOrb> 4）{newOrb = 1; }
jQuery.data（document.body，'activeOrb'，newOrb）;
orbChange（newOrb）;
$（'＃slider-inner'）。animate（{
left：' - = 970'
}，600，'easeOutQuart'，function（）{
var me = $（this）;
var p = me.position（）;
if（p.left< -4840）{me.css（'left'，'-970px' ）;}
}）;
函数slideTo（evt）{
evt.preventDefault（）;
clearInterval（refreshId）;
unbindAll（）;
var oldOrb = jQuery.data（document.body，'activeOrb'）;
var newOrb = $（this）.attr（'id'）; newOrb = newOrb.substr（5,6）;
jQuery.data（document.body，'activeOrb'，newOrb）;
orbChange（newOrb）;
var To;
if（newOrb == 1）{To = -970; } if（newOrb == 2）{To = -1940; } if（newOrb == 3）{To = -2910; } if（newOrb == 4）{To = -3880; }
$ b $（'＃slider-inner'）。animate（{
left：To
}，600，'easeOutQuart'，function（）{
bindAll （）;
}）;
}
函数orbChange（orb）{
$（'。heart-active'，'#hearts'）。removeClass（'heart-active'）;
$（'＃heart'+ orb +'span'）。addClass（'heart-active'）;
函数bindAll（）{
$（'＃slide-left'）。bind（'click'，slideLeft）;
$（'＃slide-right'）。bind（'click'，slideRight）;
$（'＃slide-left-fade'）。bind（'click'，slideLeft）;
$（'＃slide-right-fade'）。bind（'click'，slideRight）;
$（'＃hearts a'）。bind（'click'，slideTo）;
函数unbindAll（）{
$（'＃slide-left'）。unbind（'click'，slideLeft）;
$（'＃slide-right'）。unbind（'click'，slideRight）;
$（'＃slide-left-fade'）。unbind（'click'，slideLeft）;
$（'＃slide-right-fade'）。unbind（'click'，slideRight）;
$（'＃hearts a'）。unbind（'click'，slideTo）;
}
var refreshId = setInterval（function（）{
slideRight2（）;
}，6000）;
bindAll（）;
}）;
< / script>
The slider/carousel I'm trying to implent is this: http://www.paulwelsh.info/jquery-plugins/hero-carousel/
I know that I have to add HTML code for it, which I am unable to due to little experience with designing websites (started my course around a month ago). Can you help me with the HTML code I am supposed to add to get this to work? This is my HTML, CSS & Javascript. The HTML is what I THINK it should look like, which is obviously wrong.
HTML
<div class="what here?">
<ul class="and what here?">
anything here?
<li><img src="images/deadmau5/slide1.jpg" ></li>
<li><img src="images/deadmau5/slide2.jpg" ></li>
<li><img src="images/deadmau5/slide3.jpg" ></li>
<li><img src="images/deadmau5/slide4.jpg" ></li>
</ul>
</div>
CSS
.hero {
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 48px;
}
.hero-carousel article {
width: 980px;
margin: 0 auto;
height: 480px;
display: block;
float: left;
position: relative;
}
.hero-carousel-container article {
float: left;
}
.hero-carousel article img{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.hero-carousel article .contents {
position: relative;
z-index: 2;
top: 72px;
left: 48px;
list-style: none;
color: #000;
width: 556px;
padding: 20px;
background: rgba(255,255,255,0.8);
-pie-background: rgba(255,255,255,0.8);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav {
width: 980px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -490px;
z-index: 2;
}
.hero-carousel-nav li {
position: absolute;
bottom: 48px;
right: 48px;
list-style: none;
}
.hero-carousel-nav li.prev {
left: 48px;
right: auto;
}
.hero-carousel-nav li a {
background: #D21034;
color: #fff;
border: none;
outline: none;
display: block;
float: left;
padding: 5px 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav li a:hover {
background: #89051C;
}
.hero-carousel-nav li a:active,
.hero-carousel-nav li a:focus {
border: none;
outline: none;
}
Javascript
jQuery.fn.heroCarousel=function(a){a=jQuery.extend({animationSpeed:1000,navigation:true,easing:"",timeout:5000,pause:true,pauseOnNavHover:true,prevText:"Previous",nextText:"Next",css3pieFix:false,currentClass:"current",onLoad:function(){},onStart:function(){},onComplete:function(){}},a);if(jQuery.browser.msie&&parseFloat(jQuery.browser.version)<7){a.animationSpeed=0}return this.each(function(){var k=jQuery(this),b=k.children();currentItem=1;childWidth=b.width();childHeight=b.height();if(b.length>2){b.each(function(m){if(a.itemClass){jQuery(this).addClass(a.itemClass)}});b.filter(":first").addClass(a.currentClass).before(b.filter(":last"));var d=Math.round(childWidth*k.children().length),l="-"+Math.round(childWidth+Math.round(childWidth/2))+"px";k.addClass("hero-carousel-container").css({position:"relative",overflow:"hidden",left:"50%",top:0,"margin-left":l,height:childHeight,width:d});k.before('<ul class="hero-carousel-nav"><li class="prev"><a href="#">'+a.prevText+'</a></li><li class="next"><a href="#">'+a.nextText+"</a></li></ul>");var e=k.prev(".hero-carousel-nav"),h;if(a.timeout>0){var j=false;if(a.pause){k.hover(function(){j=true},function(){j=false})}if(a.pauseOnNavHover){e.hover(function(){j=true},function(){j=false})}function c(){if(!j){e.find(".next a").trigger("click")}}h=window.setInterval(c,a.timeout)}e.find("a").data("disabled",false).click(function(p){p.preventDefault();var m=jQuery(this),n=m.parent().hasClass("prev"),o=k.children();if(m.data("disabled")===false){a.onStart(k,e,o.eq(currentItem),a);if(n){f(o.filter(":last"),"previous")}else{f(o.filter(":first"),"next")}m.data("disabled",true);setTimeout(function(){m.data("disabled",false)},a.animationSpeed+200);if(a.timeout>0){window.clearInterval(h);h=window.setInterval(c,a.timeout)}}});function f(m,q){var o=parseFloat(k.position().left),n=parseFloat(k.css("margin-left"));if(q==="previous"){m.before(m.clone().addClass("carousel-clone"));k.prepend(m);var p=Math.round(n-childWidth);var r="+="}else{m.after(m.clone().addClass("carousel-clone"));k.append(m);var p=l;var r="-="}if(a.css3pieFix){g(jQuery(".carousel-clone"))}k.css({left:o,width:Math.round(d+childWidth),"margin-left":p}).animate({left:r+childWidth},a.animationSpeed,a.easing,function(){k.css({left:"50%",width:d,"margin-left":n});jQuery(".carousel-clone").remove();i()})}function g(n){var m=n.attr("_pieId");if(m){n.attr("_pieId",m+"_cloned")}n.find("*[_pieId]").each(function(o,p){var q=$(p).attr("_pieId");$(p).attr("_pieId",q+"_cloned")})}function i(){var m=k.children();m.removeClass(a.currentClass).eq(currentItem).addClass(a.currentClass);a.onComplete(k,k.prev(".hero-carousel-nav"),m.eq(currentItem),a)}if(jQuery.browser.msie){e.find("a").attr("hideFocus","true")}a.onLoad(k,e,k.children().eq(currentItem),a)}})};
解决方案
Embed these resources from the sample page that you provided:
<link rel="stylesheet" media="all" href="jquery.heroCarousel.css" type="text/css" />
<script type='text/javascript' src='jquery.heroCarousel-1.3.js'></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
Then follow this HTML Structure:
<div class="hero">
<div class="hero-carousel">
<article><img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" >
</article>
<article>
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" >
</article>
<article>
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/ATGH_deadmau5.com_1.jpg" >
</article>
<article>
<img src="http://www.deadmau5.com/wp-content/uploads/2012/05/deadmau5-web-banner-1.jpg" >
</article>
</div>
Then add this javascript code to the end of your site:
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
css3pieFix: true
});});
DEMO: http://jsfiddle.net/dCYB7/1/, http://fiddle.jshell.net/dCYB7/1/show/
EDIT:
The entire slider in one HTML+CSS+Javascript collection:
<style>
#slider { width:100%; overflow:hidden; height:372px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-bg.png); margin-bottom:25px; }
#slider-container { height:352px; width:950px; margin:auto; padding-top:10px; position:relative; }
#slider-inner { width:10000px; height:352px; position:absolute; top:10px; left:-970px; }
.slide { width:938px; height:340px; border:6px solid #000; float:left; margin-right:20px; position:relative; }
#slider-arrow-left { display:block; width:115px; height:124px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/large-arrow-left.png); position:absolute; left:-53px; top:120px; z-index:999; } #slider-arrow-left:hover { background-position:0 -124px; }
#slider-arrow-right { display:block; width:115px; height:124px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/large-arrow-right.png); position:absolute; right:-53px; top:120px; z-index:999; } #slider-arrow-right:hover { background-position:0 -124px; }
#slider-fade-left { display:block; height:372px; width:300px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-left.png); position:absolute; left:-320px; top:0px; z-index:2; }
#slider-fade-left:hover { opacity:0.92; }
#slider-fade-right { display:block; height:372px; width:300px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-right.png); position:absolute; right:-320px; top:0px; z-index:2; }
#slider-fade-right:hover { opacity:0.92; }
#slider-black-left { height:372px; width:1000px; position:absolute; top:0px; left:-1300px; background-color:#0c100f; }
#slider-black-right { height:372px; width:1000px; position:absolute; top:0px; right:-1300px; background-color:#0c100f; }
</style>
<div id="slider">
<div id="slider-container">
<div id="slider-inner">
<div class="slide">
<a target="_blank" href="http://www.youtube.com/watch?v=Mz8sQSEUGn4"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://bzz.is/heapmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://smarturl.it/albumtitlegoeshere"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/ATGH_deadmau5.com_1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://bzz.is/neffmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/05/deadmau5-web-banner-1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://www.youtube.com/watch?v=Mz8sQSEUGn4"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://bzz.is/heapmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" /></a> </div>
</div>
<a href="#" id="slide-left"><span id="slider-arrow-left"></span></a>
<a href="#" id="slide-right"><span id="slider-arrow-right"></span></a>
<a href="#" id="slide-left-fade"><span id="slider-fade-left"></span></a>
<a href="#" id="slide-right-fade"><span id="slider-fade-right"></span></a>
<div id="slider-black-left"></div>
<div id="slider-black-right"></div>
<div id="hearts">
<a href="#" id="heart1"><span class="heart"></span></a>
<a href="#" id="heart2"><span class="heart"></span></a>
<a href="#" id="heart3"><span class="heart"></span></a>
<a href="#" id="heart4"><span class="heart"></span></a>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function slideLeft(evt) {
evt.preventDefault();
clearInterval(refreshId);
unbindAll();
var oldOrb = jQuery.data(document.body, 'activeOrb');
var newOrb = oldOrb - 1; if (newOrb < 1) { newOrb = 4; }
jQuery.data(document.body, 'activeOrb', newOrb);
orbChange(newOrb);
$('#slider-inner').animate({
left: '+=970'
}, 600, 'easeOutQuart', function() {
var me = $(this);
var p = me.position();
if (p.left > -10) { me.css('left', '-3880px'); }
bindAll();
});
}
function slideRight(evt) {
evt.preventDefault();
clearInterval(refreshId);
unbindAll();
var oldOrb = jQuery.data(document.body, 'activeOrb');
oldOrb = parseInt(oldOrb);
var newOrb = oldOrb + 1; if (newOrb > 4) { newOrb = 1; }
jQuery.data(document.body, 'activeOrb', newOrb);
orbChange(newOrb);
$('#slider-inner').animate({
left: '-=970'
}, 600, 'easeOutQuart', function() {
var me = $(this);
var p = me.position();
if (p.left < -4840) { me.css('left', '-970px'); }
bindAll();
});
}
function slideRight2() {
var oldOrb = jQuery.data(document.body, 'activeOrb');
var newOrb = oldOrb + 1; if (newOrb > 4) { newOrb = 1; }
jQuery.data(document.body, 'activeOrb', newOrb);
orbChange(newOrb);
$('#slider-inner').animate({
left: '-=970'
}, 600, 'easeOutQuart', function() {
var me = $(this);
var p = me.position();
if (p.left < -4840) { me.css('left', '-970px'); }
});
}
function slideTo(evt) {
evt.preventDefault();
clearInterval(refreshId);
unbindAll();
var oldOrb = jQuery.data(document.body, 'activeOrb');
var newOrb = $(this).attr('id'); newOrb = newOrb.substr(5,6);
jQuery.data(document.body, 'activeOrb', newOrb);
orbChange(newOrb);
var To;
if (newOrb == 1) { To = -970; } if (newOrb == 2) { To = -1940; } if (newOrb == 3) { To = -2910; } if (newOrb == 4) { To = -3880; }
$('#slider-inner').animate({
left: To
}, 600, 'easeOutQuart', function() {
bindAll();
});
}
function orbChange(orb) {
$('.heart-active', '#hearts').removeClass('heart-active');
$('#heart' + orb + ' span').addClass('heart-active');
}
function bindAll() {
$('#slide-left').bind('click', slideLeft);
$('#slide-right').bind('click', slideRight);
$('#slide-left-fade').bind('click', slideLeft);
$('#slide-right-fade').bind('click', slideRight);
$('#hearts a').bind('click', slideTo);
}
function unbindAll() {
$('#slide-left').unbind('click', slideLeft);
$('#slide-right').unbind('click', slideRight);
$('#slide-left-fade').unbind('click', slideLeft);
$('#slide-right-fade').unbind('click', slideRight);
$('#hearts a').unbind('click', slideTo);
}
var refreshId = setInterval(function() {
slideRight2();
}, 6000);
bindAll();
});
</script>
这篇关于实施Hero Carousel Slider的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
