经验分享程序开发文档资料数据资源其它资源

微云网站jQuery焦点图轮播滚动切换特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 微云网站jQuery焦点图轮播滚动切换特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

微云网站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="X-UA-Compatible" content="IE=8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>微云网站jQuery焦点图 </title>
    <link href="css/zzsc.css" rel="stylesheet" media="screen" type="text/css" />
    <link href="css/mycss.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>
    <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
    <div id="Contentxt">
        <script language="javascript" type="text/javascript" src="js/jquery.flexslider-min.js"></script>
        <script type="text/javascript">
            $(window).load(function () {
                $('.flexslider').flexslider();
            });
        </script>
        <div class="flexslider">
            <ul class="slides">
                <li><a href="#" target="_blank"><img src='images/1_1305341361.jpg' border='0' width='1000' height='450' alt='枪火战线 首页banner' /></a></li>
                <li><a href="#" target="_blank"><img src='images/2-120F4105H2Z6.jpg' border='0' width='1000' height='450' alt='广告利器' /></a></li>
                <li><a href="#" target="_blank"><img src='images/1-1204101506040-L.jpg' border='0' width='1000' height='450' alt='产品' /></a></li>
            </ul>
        </div>
    </div>
</body>
</html>

JS代码(jquery.flexslider-min.js):

/* * jQuery FlexSlider v1.7 * http://flex.madebymufffin.com * Copyright 2011,Tyler Smith * Free to use under the MIT license. */
(function(a){
	a.flexslider = function(c,b){
	var d = c;
	d.init = function(){
	d.vars = a.extend({
}
,a.flexslider.defaults,b);
	d.data("flexslider",true);
	d.container = a(".slides",d);
	d.slides = a(".slides > li",d);
	d.count = d.slides.length;
	d.animating = false;
	d.currentSlide = d.vars.slideToStart;
	d.atEnd = (d.currentSlide == 0) ? true:false;
	d.eventType = ("ontouchstart" in document.documentElement) ? "touchstart":"click";
	d.cloneCount = 0;
	d.cloneOffset = 0;
	if (d.vars.controlsContainer != ""){
	d.controlsContainer = a(d.vars.controlsContainer).eq(a(".slides").index(d.container));
	d.containerExists = d.controlsContainer.length > 0}
if (d.vars.manualControls != ""){
	d.manualControls = a(d.vars.manualControls,((d.containerExists) ? d.controlsContainer:d));
	d.manualExists = d.manualControls.length > 0}
if (d.vars.randomize){
	d.slides.sort(function(){
	return (Math.round(Math.random()) - 0.5)}
);
	d.container.empty().append(d.slides)}
if (d.vars.animation.toLowerCase() == "slide"){
	d.css({
	overflow:"hidden"}
);
	if (d.vars.animationLoop){
	d.cloneCount = 2;
	d.cloneOffset = 1;
	d.container.append(d.slides.filter(":first").clone().addClass("clone")).prepend(d.slides.filter(":last").clone().addClass("clone"))}
d.container.width(((d.count + d.cloneCount) * d.width()) + 2000);
	d.newSlides = a(".slides > li",d);
	setTimeout(function(){
	d.newSlides.width(d.width()).css({
	"float":"left"}
).show()}
,100);
	d.container.css({
	marginLeft:(-1 * (d.currentSlide + d.cloneOffset)) * d.width() + "px"}
)}
else{
	d.slides.css({
	width:"100%","float":"left",marginRight:"-100%"}
).filter(":first").fadeIn(400,function(){
}
)}
if (d.vars.controlNav){
	if (d.manualExists){
	d.controlNav = d.manualControls}
else{
	var g = a('<ol class="flex-control-nav"></ol>');
	var k = 1;
	for (var l = 0;
	l < d.count;
	l++){
	g.append("<li><a>" + k + "</a></li>");
	k++}
if (d.containerExists){
	a(d.controlsContainer).append(g);
	d.controlNav = a(".flex-control-nav li a",d.controlsContainer)}
else{
	d.append(g);
	d.controlNav = a(".flex-control-nav li a",d)}
}
d.controlNav.eq(d.currentSlide).addClass("active");
	d.controlNav.bind(d.eventType,function(i){
	i.preventDefault();
	if (!a(this).hasClass("active")){
	d.flexAnimate(d.controlNav.index(a(this)),d.vars.pauseOnAction)}
}
)}
if (d.vars.directionNav){
	var f = a('<ul class="flex-direction-nav"><li><a class="prev" href="#">' + d.vars.prevText + '</a></li><li><a class="next" href="#">' + d.vars.nextText + "</a></li></ul>");
	if (d.containerExists){
	a(d.controlsContainer).append(f);
	d.directionNav = a(".flex-direction-nav li a",d.controlsContainer)}
else{
	d.append(f);
	d.directionNav = a(".flex-direction-nav li a",d)}
if (!d.vars.animationLoop){
	if (d.currentSlide == 0){
	d.directionNav.filter(".prev").addClass("disabled")}
else{
	if (d.currentSlide == d.count - 1){
	d.directionNav.filter(".next").addClass("disabled")}
}
}
d.directionNav.bind(d.eventType,function(i){
	i.preventDefault();
	var j = (a(this).hasClass("next")) ? d.getTarget("next"):d.getTarget("prev");
	if (d.canAdvance(j)){
	d.flexAnimate(j,d.vars.pauseOnAction)}
}
)}
if (d.vars.keyboardNav && a("ul.slides").length == 1){
	a(document).keyup(function(i){
	if (d.animating){
	return}
else{
	if (i.keyCode != 39 && i.keyCode != 37){
	return}
else{
	if (i.keyCode == 39){
	var j = d.getTarget("next")}
else{
	if (i.keyCode == 37){
	var j = d.getTarget("prev")}
}
if (d.canAdvance(j)){
	d.flexAnimate(j,d.vars.pauseOnAction)}
}
}
}
)}
if (d.vars.slideshow){
	if (d.vars.pauseOnHover && d.vars.slideshow){
	d.hover(function(){
	d.pause()}
,function(){
	d.resume()}
)}
d.animatedSlides = setInterval(d.animateSlides,d.vars.slideshowSpeed)}
if (d.vars.pausePlay){
	var e = a('<div class="flex-pauseplay"><span></span></div>');
	if (d.containerExists){
	d.controlsContainer.append(e);
	d.pausePlay = a(".flex-pauseplay span",d.controlsContainer)}
else{
	d.append(e);
	d.pausePlay = a(".flex-pauseplay li a",d)}
var h = (d.vars.slideshow) ? "pause":"play";
	d.pausePlay.addClass(h).text(h);
	d.pausePlay.click(function(i){
	i.preventDefault();
	(a(this).hasClass("pause")) ? d.pause():d.resume()}
)}
if (d.vars.touchSwipe && "ontouchstart" in document.documentElement){
	d.each(function(){
	var i,j = 20;
	isMoving = false;
	function o(){
	this.removeEventListener("touchmove",m);
	i = null;
	isMoving = false}
function m(s){
	if (isMoving){
	var p = s.touches[0].pageX,q = i - p;
	if (Math.abs(q) >= j){
	o();
	var r = (q > 0) ? d.getTarget("next"):d.getTarget("prev");
	if (d.canAdvance(r)){
	d.flexAnimate(r,d.vars.pauseOnAction)}
}
}
}
function n(p){
	if (p.touches.length == 1){
	i = p.touches[0].pageX;
	isMoving = true;
	this.addEventListener("touchmove",m,false)}
}
if ("ontouchstart" in document.documentElement){
	this.addEventListener("touchstart",n,false)}
}
)}
if (d.vars.animation.toLowerCase() == "slide"){
	d.sliderTimer;
	a(window).resize(function(){
	d.newSlides.width(d.width());
	d.container.width(((d.count + d.cloneCount) * d.width()) + 2000);
	clearTimeout(d.sliderTimer);
	d.sliderTimer = setTimeout(function(){
	d.flexAnimate(d.currentSlide)}
,300)}
)}
d.vars.start(d)}
;
	d.flexAnimate = function(f,e){
	if (!d.animating){
	d.animating = true;
	if (e){
	d.pause()}
if (d.vars.controlNav){
	d.controlNav.removeClass("active").eq(f).addClass("active")}
d.atEnd = (f == 0 || f == d.count - 1) ? true:false;
	if (!d.vars.animationLoop){
	if (f == 0){
	d.directionNav.removeClass("disabled").filter(".prev").addClass("disabled")}
else{
	if (f == d.count - 1){
	d.directionNav.removeClass("disabled").filter(".next").addClass("disabled");
	d.pause();
	d.vars.end(d)}
else{
	d.directionNav.removeClass("disabled")}
}
}
d.vars.before(d);
	if (d.vars.animation.toLowerCase() == "slide"){
	if (d.currentSlide == 0 && f == d.count - 1 && d.vars.animationLoop){
	d.slideString = "0px"}
else{
	if (d.currentSlide == d.count - 1 && f == 0 && d.vars.animationLoop){
	d.slideString = (-1 * (d.count + 1)) * d.slides.filter(":first").width() + "px"}
else{
	d.slideString = (-1 * (f + d.cloneOffset)) * d.slides.filter(":first").width() + "px"}
}
d.container.animate({
	marginLeft:d.slideString}
,d.vars.animationDuration,function(){
	if (d.currentSlide == 0 && f == d.count - 1 && d.vars.animationLoop){
	d.container.css({
	marginLeft:(-1 * d.count) * d.slides.filter(":first").width() + "px"}
)}
else{
	if (d.currentSlide == d.count - 1 && f == 0 && d.vars.animationLoop){
	d.container.css({
	marginLeft:-1 * d.slides.filter(":first").width() + "px"}
)}
}
d.animating = false;
	d.currentSlide = f;
	d.vars.after(d)}
)}
else{
	d.slides.eq(d.currentSlide).fadeOut(d.vars.animationDuration);
	d.slides.eq(f).fadeIn(d.vars.animationDuration,function(){
	d.animating = false;
	d.currentSlide = f;
	d.vars.after(d)}
)}
}
}
;
	d.animateSlides = function(){
	if (!d.animating){
	var e = (d.currentSlide == d.count - 1) ? 0:d.currentSlide + 1;
	d.flexAnimate(e)}
}
;
	d.pause = function(){
	clearInterval(d.animatedSlides);
	if (d.vars.pausePlay){
	d.pausePlay.removeClass("pause").addClass("play").text("play")}
}
;
	d.resume = function(){
	d.animatedSlides = setInterval(d.animateSlides,d.vars.slideshowSpeed);
	if (d.vars.pausePlay){
	d.pausePlay.removeClass("play").addClass("pause").text("pause")}
}
;
	d.canAdvance = function(e){
	if (!d.vars.animationLoop && d.atEnd){
	if (d.currentSlide == 0 && e == d.count - 1 && d.direction != "next"){
	return false}
else{
	if (d.currentSlide == d.count - 1 && e == 0 && d.direction == "next"){
	return false}
else{
	return true}
}
}
else{
	return true}
}
;
	d.getTarget = function(e){
	d.direction = e;
	if (e == "next"){
	return (d.currentSlide == d.count - 1) ? 0:d.currentSlide + 1}
else{
	return (d.currentSlide == 0) ? d.count - 1:d.currentSlide - 1}
}
;
	d.init()}
;
	a.flexslider.defaults ={
	animation:"fade",slideshow:true,slideshowSpeed:7000,animationDuration:600,directionNav:true,controlNav:true,keyboardNav:true,touchSwipe:true,prevText:"Previous",nextText:"Next",pausePlay:false,randomize:false,slideToStart:0,animationLoop:true,pauseOnAction:true,pauseOnHover:false,controlsContainer:"",manualControls:"",start:function(){
}
,before:function(){
}
,after:function(){
}
,end:function(){
}
}
;
	a.fn.flexslider = function(b){
	return this.each(function(){
	if (a(this).find(".slides li").length == 1){
	a(this).find(".slides li").fadeIn(400)}
else{
	if (a(this).data("flexslider") != true){
	new a.flexslider(a(this),b)}
}
}
)}
}
)(jQuery);

CSS代码(zzsc.css):

/* Reset Styles***********************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
strong{font-weight:bold;}
em{font-style:italic;}
#container{width:80%;max-width:800px;margin:0 auto;}
/* Browser Resets */
.flex-container a:active,.flexslider a:active{outline:none;}
.slides,.flex-control-nav,.flex-direction-nav{margin:0;padding:0;list-style:none;}
.flex-direction-nav{display:none;}
/* FlexSlider Necessary Styles*********************************/
.flexslider{width:100%;margin:0;padding:0;}
.flexslider .slides > li{display:none;}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img{max-width:100%;display:block;z-index:1;}
.flex-pauseplay span{text-transform:capitalize;}
/* Clearfix for the .slides element */
.slides:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
html[xmlns] .slides{display:block;}
* html .slides{height:1%;}
/* No JavaScript Fallback */
/* If you are not using another script,such as Modernizr,make sure you * include js that eliminates this class on page load */
.no-js .slides > li:first-child{display:block;}
/* FlexSlider Default Theme*********************************/
/*<!--.flexslider{background:#fff;border:4px solid #fff;position:relative;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;zoom:1;}
-->*/
.flexslider .slides{zoom:1;}
.flexslider .slides > li{position:relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own,if you wish */
.flex-container{zoom:1;position:relative;}
/* Caption style */
/* IE rgba() hack */
.flex-caption{background:none;-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);zoom:1;}
.flex-caption{width:96%;padding:2%;position:absolute;left:0;bottom:0;background:rgba(0,0,0,.3);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.3);font-size:14px;line-height:18px;}
/* Direction Nav */
/*.flex-direction-nav li a{width:52px;height:52px;margin:-13px 0 0;display:block;background:url(bg_direction_nav.png) no-repeat 0 0;position:absolute;top:50%;cursor:pointer;text-indent:-9999px;}
.flex-direction-nav li a.next{background-position:-52px 0;right:-21px;}
.flex-direction-nav li a.prev{background-position:0 0;left:-20px;}
.flex-direction-nav li a.disabled{opacity:.3;filter:alpha(opacity=30);cursor:default;}
*/
/* Control Nav */
.flex-control-nav{width:100%;position:absolute;bottom:60px;text-align:center;z-index:5;}
.flex-control-nav li{margin:0;display:inline-block;zoom:1;*display:inline;}
.flex-control-nav li:first-child{margin:0;}
.flex-control-nav li a{width:13px;height:13px;display:block;background:url(bg_control_nav.png) no-repeat 0 0;cursor:pointer;text-indent:-9999px;}
.flex-control-nav li a:hover{background-position:0 -13px;}
.flex-control-nav li a.active{background-position:0 -26px;cursor:default;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
516.67 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
516.67 KB
立即下载
冯芳芳
了解
打赏作者 鼓励作者
Html 焦点滚动特效3
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章