自适应宽度的jQuery焦点图代码轮播滚动切换特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是自适应宽度的jQuery焦点图代码轮播滚动切换特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为自适应宽度的jQuery焦点图代码" />
<title>自适应宽度的jQuery焦点图代码</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/lrtk.css">

</head>
<body>
<!-- 代码 开始 -->
<div class="container-fluid text-center">
    <div class="header">
        <img class="headerImg"
             src="images/header.jpg"
             data-slideshow='images/img1.jpg|images/img2.jpg|images/img3.jpg'>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hammer-full.min.js"></script>
<script src="js/plugin.js"> </script>
<script src="js/lrtk.js"></script>
<script>
var links = ["#", "#/lanren/", "#/js/biaoqian.html", "#/js/xiangce.html"];
$(".slide").click(function(){
    var index = $(this).attr('index');
	if(index === undefined) {
		window.open(links[0]);
	} else {
		window.open(links[(parseInt(index)+1)]);
	}

});
</script>
</body>
</html>

JS代码(lrtk.js):

(function ($){
	$('div,img').slideShow({
	timeOut:2000,showNavigation:true,pauseOnHover:true,swipeNavigation:true}
);
	var navbar=$('.navbar') navbar.animate({
	top:'-100px'}
,function (){
	navbar.hide();
}
);
}
(jQuery));

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
.container-fluid{padding:0;}
.navbar{margin:0;}
#activate{margin:17px 0;width:300px;height:64px;font-size:18px;}
.header{margin:0;}
.headerImg{width:100%;}
.col-lg-7{padding-left:150px;}
.col-lg-7 p{font-size:18px;margin:50px 0;}
.col-lg-5{padding:0 100px;}
.col-lg-5 img{width:100%;max-width:400px;}
.col-lg-5 div{margin:0 auto;}
.credit{text-align:center;margin-top:50px;margin-bottom:100px;}
@media (max-width:1200px){.col-lg-7{padding:64px;}
}
@media (max-width:768px){.header{margin-bottom:25px;}
.col-lg-7{padding:15px;}
.col-lg-7 h2{font-size:16px;}
.col-lg-7 p{font-size:12px;}
.credit{margin-bottom:25px;}
}
@media (max-width:1024px){#bsaHolder,footer{display:none;}
}
.navbar-fixed-top,.navbar-fixed-bottom{z-index:1;}
/*Slideshow container*/
.slideshow{position:relative;max-width:100%;}
/*Slideshow images*/
.slide{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-size:cover;cursor:pointer;}
/*Buttons*/
.slideBtn{position:absolute;z-index:10;width:50px;height:100%;cursor:pointer;}
.leftBtn{left:0px;background:linear-gradient(to right,rgba(0,0,0,0.4),rgba(0,0,0,0));}
.rightBtn{right:0px;background:linear-gradient(to left,rgba(0,0,0,0.4),rgba(0,0,0,0));}
/*Arrow pointers*/
.pointer{position:absolute;top:50%;margin-top:-32px;z-index:9001;left:12px;opacity:0.8;}
.previous{width:0;height:0;border-top:20px solid transparent;border-bottom:20px solid transparent;border-right:20px solid white;}
.next{width:0;height:0;border-top:20px solid transparent;border-bottom:20px solid transparent;border-left:20px solid white;right:12px;left:auto;}
/*Helper style classes*/
.hide{visibility:hidden;}

附件:下载该文件资源,减少时间成本(增值服务)