大前端jquery焦点图轮播滚动切换特效代码

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

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

以下是大前端jquery焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>大前端jquery焦点图</title>
<link rel="stylesheet" href="css/style.css" media="all">
<script src="js/jquery.min.js"></script>
</head>
<body>
<section class="central container"><link rel="stylesheet" href="css/theme.css" media="all">
<h1 class="theme-tit"></h1>

<div class="theme-picbox">
<dl class="theme-picbox-roller">
<dd>
<ul></ul>
</dd></dl>
<div class="theme-picbox-desc">
<ul></ul>
</div>
<span class="theme-picbox-next">&gt;</span>
<span class="theme-picbox-prev">&lt;</span>
</div>


<script>
var themeSlug = 'd7';
var picboxSrc = 'img/theme_d7_';
var picboxInfo = {
1 : 'D7 国内非常专业的中文主题 将持续为购买者提供售后和D7更新服务',
2 : '首页主要内容高清晰图',
3 : '分类目录页、标签页高清一角',
4 : '文章详情页面',
5 : '文章详情页正文末尾以及相关文章显示',
6 : '评论列表，有倒序楼层',
7 : '评论区域，强大的编辑器和友好的评论表情',
8 : '侧边栏-近期文章和最新评论（有头像）',
9 : '关注微博和订阅以及腾讯邮件订阅',
10 : '标签云页面，标签+文章数目+最近的一篇文章',
11 : '文章存档页面',
12 : '强大的读者墙',
13 : '友情链接页面，特别有爱',
14 : '后台小工具集成，让设置更为简单',
15 : '主题设置区域，这是主题的控制区域，可以设置很多东西',
16 : '独一无二的广告系统，带实时预览'
}
</script>
<script src="js/theme.js"></script>
</body>
</html>

JS代码(theme.js):

jQuery.noConflict();
	jQuery(document).ready(function($){
	$('.theme-login').click(function(){
	$('.theme-popover-mask').show();
	$('.theme-popover').slideDown(300);
}
)$('.theme-poptit .close').click(function(){
	$('.theme-popover-mask').hide();
	$('.theme-popover').slideUp(300);
}
)$('.theme-gologin').click(function(){
	$('.theme-signin').fadeIn();
}
)$('.theme-tabs li').each(function(e){
	$(this).click(function(){
	$(this).addClass('active').siblings().removeClass('active');
	$($('.theme-main')[e]).fadeIn(200).siblings('.theme-main').hide();
}
)}
)varbtnPrev = $('.theme-picbox-prev'),btnNext = $('.theme-picbox-next'),roller= $('.theme-picbox-roller');
	descer= $('.theme-picbox-desc')i = 0,flag=true;
	var picboxNum = 0;
	for(var e in picboxInfo){
	picboxNum++;
}
picboxNum = picboxNum-1;
	for(e=1;
	e<3;
	e++){
	roller.find('ul').append('<li><img alt="'+picboxInfo[e]+'" src="'+picboxSrc+e+'.jpg"></li>');
	descer.find('ul').append('<li>'+picboxInfo[e]+'</li>');
}
roller.find('ul').width(roller.width()*2);
	btnNext.click(function(){
	if(i >= roller.find('li').length-1){
	return;
}
;
	if(flag == true){
	i++;
	flag = false;
	roller.find('ul').animate({
	marginLeft:'-'+roller.width()*i+'px'}
,{
	duration:300,complete:function(){
	flag = true;
	if(i >= roller.find('li').length-1 && i<picboxNum){
	var picDesc = picboxInfo[i+2];
	roller.find('ul').append('<li><img alt="'+picDesc+'" src="'+picboxSrc+(i+2)+'.jpg"></li>');
	descer.find('ul').append('<li>'+picDesc+'</li>');
	roller.find('ul').width(roller.width()*roller.find('li').length);
	//descer.find('ul').width(descer.width()*roller.find('li').length);
}
}
}
)descer.find('ul').animate({
	marginTop:'-'+descer.height()*i+'px'}
,{
	duration:300,complete:function(){
	flag = true;
}
}
)}
;
}
)btnPrev.click(function(){
	if(i <= 0){
	return;
}
;
	if(flag == true){
	i--;
	flag = false;
	roller.find('ul').animate({
	marginLeft:'-'+roller.width()*i+'px'}
,{
	duration:300,complete:function(){
	flag = true;
}
}
)descer.find('ul').animate({
	marginTop:'-'+descer.height()*i+'px'}
,{
	duration:300,complete:function(){
	flag = true;
}
}
)}
;
}
);
	var isget = true;
	$(".theme-gobuy").click(function(){
	if(!isget) return;
	var themecode='';
	if(document.URL.indexOf(themeSlug)!==0){
	themecode = themeSlug;
}
$.ajax({
	type:'POST',url:themeUrl+'tpl/theme/theme.php',data:'themecode='+themecode,success:function(msg){
	// console.log(msg);
	if(msg=='Success'){
	isget = false;
	setTimeout(function(){
	window.location.href = 'http://www.daqianduan.com/profile/#!order';
}
,500);
}
}
}
);
}
)}
)

CSS代码(theme.css):

.theme-tabs{line-height:45px;height:46px;text-align:center;position:relative;*left:50%;*margin-left:-273px;*width:546px}
.theme-tabs li{display:inline-block;*float:left;vertical-align:top;width:180px;border:solid 1px #e2e2e2;margin-right:-1px;font-weight:bold;font-size:14px;background-color:#fbfbfb;border-bottom:none;color:#666;cursor:pointer;}
.theme-tabs li.active{background-color:#fff;color:#222;border-top:solid 2px #357AE8;line-height:45px;position:relative;z-index:2}
.theme-tit{padding:20px 0;font-size:42px;text-align:center;color:#555;line-height:48px;text-shadow:0 -1px 0 #fff;}
.theme-tit em{display:block;font-size:14px;font-style:normal;color:#888;font-weight:normal;}
.theme-main{display:none;border:solid 1px #e2e2e2;padding:20px;border-radius:5px;}
.theme-function{overflow:hidden;display:block;}
.theme-function ul{float:left;width:25%;}
.theme-function li{padding:12px;height:78px;color:#aaa;}
.theme-function h2{font-size:14px;color:#444;margin-bottom:5px;}
.theme-function li:hover{box-shadow:0 0 2px #ddd;background-color:#fdfdfd;}
.theme-picbox{position:relative;text-align:center;margin-bottom:30px;}
.theme-picbox-roller{margin:0 auto 10px;overflow:hidden;width:960px;height:400px;border:solid 1px #ddd;box-shadow:0 0 8px #eee,inset 0 0 1px #fff;padding:10px;}
.theme-picbox-roller dd{width:960px;overflow:hidden;}
.theme-picbox-roller ul{width:960px;}
.theme-picbox-roller li{float:left;width:960px;}
.theme-picbox-roller img{background-color:#fff;width:960px;height:400px;}
.theme-picbox-prev,.theme-picbox-next{position:absolute;top:38%;font-family:simsun;font-size:72px;color:#ddd;font-weight:bold;width:72px;text-align:center;cursor:pointer;overflow:hidden;text-shadow:0 -1px 0 #fff;}
.theme-picbox-prev:hover,.theme-picbox-next:hover{background-color:#aaa;color:#fff;}
.theme-picbox-prev{left:0;}
.theme-picbox-next{right:0;}
.theme-picbox-desc{margin:0 auto;width:600px;height:24px;border-radius:20px;background:#7F7F7F;color:#fff;line-height:24px;text-align:center;overflow:hidden;}
.theme-picbox-desc ul{height:24px}
.theme-picbox-desc li{height:24px}
.theme-buy{margin-bottom:30px;text-align:center;}
.theme-gobuy,.theme-signin{font-size:15px;}
.theme-price{position:relative;bottom:-6px;font-family:microsoft yahei,Arial,Helvetica,sans-serif;margin-right:20px;font-weight:bold;color:#f60;line-height:32px;font-size:24px;display:inline-block;}
.theme-price dfn{font-style:normal;font-size:18px;margin-right:2px;}
.theme-desc{padding:30px;}
.theme-version{padding:30px;}
.theme-popover-mask{z-index:9998;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:.4;filter:alpha(opacity=40);display:none}
.theme-popover{z-index:9999;position:fixed;top:50%;left:50%;width:660px;height:360px;margin:-180px 0 0 -330px;border-radius:5px;border:solid 2px #666;background-color:#fff;display:none;box-shadow:0 0 10px #666;}
.theme-poptit{border-bottom:1px solid #ddd;padding:12px;position:relative;}
.theme-popbod{padding:60px 15px;color:#444;height:148px;}
.theme-popbom{padding:15px;background-color:#f6f6f6;border-top:1px solid #ddd;border-radius:0 0 5px 5px;color:#666}
.theme-popbom a{margin-left:8px}
.theme-poptit .close{float:right;color:#999;padding:5px;margin:-2px -5px -5px;font:bold 14px/14px simsun;text-shadow:0 1px 0 #ddd}
.theme-poptit .close:hover{color:#444}
.btn.theme-reg{position:absolute;top:8px;left:43%;display:none}
.inp-gray,.feed-mail-inp{border:1px solid #ccc;background-color:#fdfdfd;width:220px;height:16px;padding:4px;color:#444;margin-right:6px}
.dform{padding:80px 60px 40px;text-align:center;}
.dform .ipt_error{background-color:#FFFFCC;border-color:#FFCC66}
.dform-tip{display:none;background-color:#080;color:#fff;line-height:42px;margin-top:10px;display:;font-size:14px;}
.dform-tip-errer{background-color:#CF301A;}
.dform-tip a{display:inline-block;padding:0 20px;margin-left:10px;background-color:#FFE924;color:#CF301A;}
.dform-login{padding:0;height:270px;overflow:hidden;}
.dform-login iframe{height:470px;margin-top:-180px;}
.theme-signin{margin:-50px -20px -50px 90px;text-align:left;font-size:14px;}
.theme-signin h4{color:#999;font-weight:100;margin-bottom:20px;font-size:12px;}
.theme-signin li{padding-left:80px;margin-bottom:15px;}
.theme-signin li strong{float:left;margin-left:-80px;width:80px;text-align:right;line-height:32px;}
.theme-signin .btn{margin-bottom:10px;}
.theme-signin p{font-size:12px;color:#999;}
.theme-desc,.theme-version{padding-top:0}

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