以下是 jquery宽屏焦点图片动画轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery宽屏焦点图片动画轮播代码</title>
<link rel="stylesheet" type="text/css" href="css/main.css" id="main-css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/rev-setting-1.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
</head>
<body>
<div class="fullwidthbanner-container">
<div id="revolution-slider">
<ul>
<li data-transition="fade" data-slotamount="10" data-masterspeed="300" data-thumb="images-slider/thumbs/thumb1.jpg">
<!-- BACKGROUND IMAGE -->
<img src="images-slider/wide3.jpg" alt="" />
<!-- THE CAPTIONS IN THIS SLIDE -->
<div class="tp-caption sfl"
data-x="-130"
data-y="150"
data-speed="300"
data-start="300"
data-easing="easeOutBack">
<img src="images-slider/rb.png" alt="">
</div>
<div class="tp-caption med-white lfl"
data-x="0"
data-y="145"
data-speed="300"
data-start="800"
data-easing="easeOutExpo">
Inspira designed for
</div>
<div class="caption sfb very-big-white"
data-x="0"
data-y="190"
data-speed="300"
data-start="1200"
data-easing="easeOutExpo">
winner
</div>
<div class="tp-caption small-white lfr"
data-x="0"
data-y="255"
data-speed="300"
data-start="1600"
data-easing="easeOutExpo">
<a href="#" class="btn btn-large btn-primary">Purchase Now</a>
</div>
<div class="tp-caption lfb"
data-x="390"
data-y="40"
data-speed="1000"
data-start="2000"
data-easing="easeOutExpo"
data-endeasing="fade"
>
<img src="images-slider/guy-shadow.png" alt="">
</div>
<div class="tp-caption small-white lft"
data-x="240"
data-y="0"
data-speed="2000"
data-start="2600"
data-easing="easeOutExpo">
<img src="images-slider/spotlight.png" alt="">
</div>
<div class="tp-caption fade"
data-x="390"
data-y="40"
data-speed="2000"
data-start="2600"
data-easing="easeOutExpo">
<img src="images-slider/guy.png" alt="">
</div>
</li>
<!-- THE FIRST SLIDE -->
<li data-transition="fade" data-slotamount="10" data-masterspeed="300" data-thumb="images-slider/thumbs/thumb1.jpg">
<!-- BACKGROUND IMAGE -->
<img src="images-slider/wide1.jpg" alt="" />
<!-- THE CAPTIONS IN THIS SLIDE -->
<div class="caption large_text sfb"
data-x="300"
data-y="207"
data-speed="300"
data-start="800"
data-easing="easeOutExpo">
<img src="images-slider/our-features.png" alt="">
</div>
<div class="tp-caption sfr"
data-x="220"
data-y="115"
data-speed="300"
data-start="1000"
data-easing="easeOutBack">
<img src="images-slider/lu.png" alt="">
</div>
<div class="tp-caption sfr"
data-x="110"
data-y="85"
data-speed="300"
data-start="1200"
data-easing="easeOutBack">
<img src="images-slider/clean.png" alt="">
</div>
<div class="tp-caption sfr"
data-x="180"
data-y="217"
data-speed="300"
data-start="1400"
data-easing="easeOutBack">
<img src="images-slider/lm.png" alt="">
</div>
<div class="tp-caption sfr"
data-x="0"
data-y="217"
data-speed="300"
data-start="1600"
data-easing="easeOutBack">
<img src="images-slider/responsive.png" alt="">
</div>
<div class="tp-caption sfr"
data-x="220"
data-y="285"
data-speed="300"
data-start="1800"
data-easing="easeOutBack">
<img src="images-slider/lb.png" alt="">
</div>
<div class="tp-caption sfr"
data-x="40"
data-y="345"
data-speed="300"
data-start="2000"
data-easing="easeOutBack">
<img src="images-slider/bootstrap.png" alt="">
</div>
<div class="tp-caption sfl"
data-x="625"
data-y="115"
data-speed="300"
data-start="2200"
data-easing="easeOutBack">
<img src="images-slider/ru.png" alt="">
</div>
<div class="tp-caption sfl"
data-x="730"
data-y="85"
data-speed="300"
data-start="2400"
data-easing="easeOutBack">
<img src="images-slider/solid.png" alt="">
</div>
<div class="tp-caption sfl"
data-x="650"
data-y="217"
data-speed="300"
data-start="2600"
data-easing="easeOutBack">
<img src="images-slider/rm.png" alt="">
</div>
<div class="tp-caption sfl"
data-x="770"
data-y="217"
data-speed="300"
data-start="2800"
data-easing="easeOutBack">
<img src="images-slider/lightweight.png" alt="">
</div>
<div class="tp-caption sfl"
data-x="625"
data-y="285"
data-speed="300"
data-start="3000"
data-easing="easeOutBack">
<img src="images-slider/rb.png" alt="">
</div>
<div class="tp-caption sfl"
data-x="730"
data-y="345"
data-speed="300"
data-start="3200"
data-easing="easeOutBack">
<img src="images-slider/fresh.png" alt="">
</div>
</li>
<li data-transition="fade" data-slotamount="10" data-masterspeed="300" data-thumb="images-slider/thumbs/thumb1.jpg">
<!-- BACKGROUND IMAGE -->
<img src="images-slider/wide2.jpg" alt="" />
<!-- THE CAPTIONS IN THIS SLIDE -->
<div class="tp-caption sfl"
data-x="-130"
data-y="100"
data-speed="300"
data-start="300"
data-easing="easeOutBack">
<img src="images-slider/rb.png" alt="">
</div>
<div class="caption sfb"
data-x="0"
data-y="130"
data-speed="300"
data-start="800"
data-easing="easeOutExpo">
<img src="images-slider/inspira.png" alt="">
</div>
<div class="tp-caption med-white sfl"
data-x="0"
data-y="220"
data-speed="300"
data-start="1000"
data-easing="easeOutExpo">
Most Complete Template Ever
</div>
<div class="tp-caption small-white sfr"
data-x="0"
data-y="260"
data-speed="300"
data-start="1200"
data-easing="easeOutExpo">
<a href="#" class="btn btn-large btn-primary">Purchase Now</a>
</div>
<div class="tp-caption small-white lfb"
data-x="300"
data-y="40"
data-speed="1000"
data-start="1400"
data-easing="easeOutExpo">
<img src="images-slider/slider-10.png" alt="" />
</div>
</li>
</ul>
</div>
</div>
</body>
</html>JS代码(rev-setting-1.js):
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function(){
if (tpj.fn.cssOriginal!=undefined)tpj.fn.css = tpj.fn.cssOriginal;
var api = tpj('#revolution-slider').revolution({
delay:9000,startwidth:960,startheight:450,onHoverStop:"on",// Stop Banner Timet at Hover on Slide on/offthumbWidth:100,// Thumb With and Height and Amount (only if navigation Tyope set to thumb !)thumbHeight:50,thumbAmount:3,hideThumbs:10,navigationType:"none",// bullet,thumb,nonenavigationArrows:"solo",// nexttobullets,solo (old name verticalcentered),nonenavigationStyle:"round",// round,square,navbar,round-old,square-old,navbar-old,or any from the list in the docu (choose between 50+ different item),customnavigationHAlign:"center",// Vertical Align top,center,bottomnavigationVAlign:"bottom",// Horizontal Align left,center,rightnavigationHOffset:30,navigationVOffset:-40,soloArrowLeftHalign:"left",soloArrowLeftValign:"center",soloArrowLeftHOffset:20,soloArrowLeftVOffset:0,soloArrowRightHalign:"right",soloArrowRightValign:"center",soloArrowRightHOffset:20,soloArrowRightVOffset:0,touchenabled:"on",// Enable Swipe Function:on/offstopAtSlide:-1,// Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0,then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.stopAfterLoops:-1,// Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x,if set to -1 slide never stop automatichideCaptionAtLimit:0,// It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)hideAllCaptionAtLilmit:0,// Hide all The Captions if Width of Browser is less then this valuehideSliderAtLimit:0,// Hide the whole slider,and stop also functions if Width of Browser is less than this valuefullWidth:"on",shadow:0//0 = no Shadow,1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)}
);
// TO HIDE THE ARROWS SEPERATLY FROM THE BULLETS,SOME TRICK HERE:// YOU CAN REMOVE IT FROM HERE TILL THE END OF THIS SECTION IF YOU DONT NEED THIS !api.bind("revolution.slide.onloaded",function (e){
jQuery('.tparrows').each(function(){
var arrows=jQuery(this);
var timer = setInterval(function(){
if (arrows.css('opacity') == 1 && !jQuery('.tp-simpleresponsive').hasClass("mouseisover")) arrows.fadeOut(100);
}
,0);
}
)jQuery('.tp-simpleresponsive,.tparrows').hover(function(){
jQuery('.tp-simpleresponsive').addClass("mouseisover");
jQuery('body').find('.tparrows').each(function(){
jQuery(this).fadeIn(100);
}
);
}
,function(){
if (!jQuery(this).hasClass("tparrows"))jQuery('.tp-simpleresponsive').removeClass("mouseisover");
}
)}
);
// END OF THE SECTION,HIDE MY ARROWS SEPERATLY FROM THE BULLETS}
);
CSS代码(main.css):
/* --------------------------------------------------Inspira CSS by DesignesiaQuick enable/disable css files.To enable css file simply remove mark '/*' and '* /' between line of css file/* -------------------------------------------------- */
/* bootstrap framework */
@import url("bootstrap.css");@import url("../rs-plugin/css/settings.css");@import url("rev-settings.css");/* --------------------------------------------------widescreen.css used to fit in wide screen monitor (>1200px)if you disable this,the container width would be maximum 960px/* --------------------------------------------------@import url("wide-screen.css");*/
/* --------------------------------------------------to use boxed layout please enable code below and disable 'wide-screen.css' above/* -------------------------------------------------- */
/* @import url("boxed.css");*/
/* load color css------------------------------select one:aqua.cssblue.cssgreen.cssgrey.cssred.cssorange.csspink.csspurple.cssyellow.css*/
@import url("colors/orange.css");CSS代码(rev-settings.css):
/***********************-BASICS-***********************/
html{overflow-x:hidden;padding:0 !important;background:#fff;margin:0px !important;}
.fullwidthbanner-container{width:100% !important;position:relative;padding:0;overflow:hidden;background:gray;}
#revolution-slider{max-height:450px !important;}
.tparrows{top:50% !important;}
.med{font-size:24px;letter-spacing:-.5px;}
.med-white{color:#fff;font-size:24px;letter-spacing:-.5px;}
.med-green{color:#469159;font-size:24px;letter-spacing:-.5px;}
.small-white{color:#fff;line-height:1.7em;}
.very-big-white{font-size:84px;letter-spacing:-5px;font-weight:bold;color:#fff;}
.very-big-black{font-size:84px;letter-spacing:-5px;font-weight:bold;color:#333;}
.block{display:inline-block;font-size:20px;color:#fff;padding:8px 12px 8px 12px;}
.block-black{display:inline-block;font-size:20px;background:#333;color:#fff;padding:8px 12px 8px 12px;}
a.btn{color:#fff !important;}
分享到QQ
分享到微博
微信扫一扫
