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

联想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="Content-Type" content="text/html; charset=gb2312" />
<title>联想jQuery大屏焦点图代码</title>
<link rel="stylesheet" href="css/zzsc.css" type="text/css">
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="banner_index">
  <a href="javascript:void(0);" class="btn btnPre" id="banner_index_pre"></a>
  <a href="javascript:void(0);" class="btn btnNext" id="banner_index_next"></a>
    <ul class="banner_wrap" id="banner_index">
      <li><a href="#" target="_blank"><img src="images/banner_index_1.jpg"/></a></li>
      <li><a href="#" target="_blank"><img src="images/banner_index_2.jpg"/></a></li>
      <li><a href="#" target="_blank"><img src="images/banner_index_3.jpg"/></a></li>
      <li><a href="#" target="_blank"><img src="images/banner_index_4.jpg"/></a></li>
    </ul>
</div>
<div class="indexBanner_num" id="index_numIco"></div>
<script type="text/javascript">
var ShowPre1 = new ShowPre({box:"banner_index",Pre:"banner_index_pre",Next:"banner_index_next",numIco:"index_numIco",loop:1,auto:1});
</script>
</body>
</html>

JS代码(common.js):

function ShowPre(o){
	var that= this;
	this.box = $("#"+o["box"]);
	this.btnP = $("#"+o.Pre);
	this.btnN= $("#"+o.Next);
	this.v = o.v||1;
	this.c = 0;
	var li_node = "li";
	this.loop = o.loop||false;
	//循环生成domif(this.loop){
	this.li = this.box.find(li_node);
	this.box.append(this.li.eq(0).clone(true));
}
;
	this.li = this.box.find(li_node);
	this.l = this.li.length;
	//滑动条件不成立if(this.l<=this.v){
	this.btnP.hide();
	this.btnN.hide();
}
;
	this.deInit = true;
	this.w = this.li.outerWidth(true);
	this.box.width(this.w*this.l);
	this.maxL = this.l - this.v;
	//要多图滚动 重新计算变量this.s = o.s||1;
	if(this.s>1){
	this.w = this.v*this.w;
	this.maxL = Math.floor(this.l/this.v);
	this.box.width(this.w*(this.maxL+1));
	//计算需要添加数量var addNum = (this.maxL+1)*this.v-this.l;
	var addHtml = "";
	for(var adN = 0;
	adN < addNum;
	adN++){
	addHtml += "<li class='addBox'><div class='photo'></div><div class='text'></div></li>";
}
;
	this.box.append(addHtml);
}
;
	//生成状态图标this.numIco = null;
	if(o.numIco){
	this.numIco = $("#"+o.numIco);
	var numHtml = "";
	numL = this.loop?(this.l-1):this.l;
	for(var i = 0;
	i<numL;
	i++){
	numHtml+="<a href='javascript:void(0);
	'>"+i+"</a>";
}
;
	this.numIco.html(numHtml);
	this.numIcoLi = this.numIco.find("a");
	this.numIcoLi.bind("click",function(){
	if(that.c==$(this).html())return false;
	that.c=$(this).html();
	that.move();
}
);
}
;
	this.bigBox = null;
	this.loadNumBox = null;
	if(o.loadNumBox){
	this.loadNumBox = $("#"+o.loadNumBox);
}
;
	//当前序号设置this.allNumBox = null;
	if(o.loadNumBox){
	this.allNumBox = $("#"+o.allNumBox);
	if(o.bBox){
	var cAll = this.l<10?("0"+this.l):this.l;
}
else{
	var cAll = this.maxL<10?("0"+(this.maxL+1)):(this.maxL+1);
}
;
	this.allNumBox.html(cAll);
}
;
	//大图按钮点击操作if(o.bBox){
	this.bigBox = $("#"+o.bBox);
	this.li.each(function(n){
	$(this).attr("num",n);
	var cn = (n+1<10) ? ("0"+(n+1)):n+1;
	$(this).find(".text").html(cn);
}
);
	this.loadNum = 0;
	this.li.bind("click",function(){
	if(that.loadNum==$(this).attr("num"))return false;
	var test = null;
	if(that.loadNum>$(this).attr("num")){
	test = "pre";
}
;
	that.loadNum = $(this).attr("num");
	that.loadImg(test);
}
);
	that.loadImg();
	if(o.bNext){
	that.bNext = $("#"+o.bNext);
	that.bNext.bind("click",function(){
	that.loadNum<that.l-1 ?that.loadNum++:that.loadNum=0;
	that.loadImg();
}
);
}
;
	if(o.bPre){
	that.bPre = $("#"+o.bPre);
	that.bPre.bind("click",function(){
	that.loadNum> 0? that.loadNum--:that.loadNum=that.l-1;
	that.loadImg("pre");
}
);
}
;
}
;
	//滑动点击操作(循环or不循环)if(this.loop){
	this.btnP.bind("click",function(){
	if(that.c<=0){
	that.c = that.l-1;
	that.box.css({
	left:-that.c*that.w}
);
}
;
	that.c --;
	that.move(1);
}
);
	this.btnN.bind("click",function(){
	if(that.c>=(that.l-1)){
	that.box.css({
	left:0}
);
	that.c = 0;
}
;
	that.c++;
	that.move(1);
}
);
}
else{
	this.btnP.bind("click",function(){
	that.c> 0? that.c--:that.c=that.maxL;
	that.move(1);
}
);
	this.btnN.bind("click",function(){
	that.c<that.maxL ?that.c++:that.c=0;
	that.move(1);
}
);
}
;
	that.timer = null;
	if(o.auto){
	that.box.bind("mouseover",function(){
	clearInterval(that.timer);
}
);
	that.box.bind("mouseleave",function(){
	that.autoPlay();
}
);
	that.autoPlay();
}
;
	this.move();
}
ShowPre.prototype ={
	move:function(test){
	//滑动方法var that = this;
	var pos = this.c*this.w;
	//document.title = (test&&that.timer);
	if(test&&that.timer){
	clearInterval(that.timer);
}
;
	//当前序号图标if(that.numIco){
	that.numIcoLi.removeClass("on");
	var numC = that.c;
	if(that.loop&&(that.c==(this.l-1))){
	numC= 0;
}
;
	that.numIcoLi.eq(numC).addClass("on");
}
;
	this.box.stop();
	this.box.animate({
	left:-pos}
,function(){
	if(test&&that.auto){
	that.autoPlay();
}
;
	if(that.loop&&that.c==that.maxL){
	that.c = 0;
	that.box.css({
	left:0}
)}
;
}
);
	if(that.bigBox)return false;
	//设置大图加载序号if(that.loadNumBox){
	var loadC = parseInt(that.c)+1;
	loadC = loadC<10?"0"+loadC:loadC;
	that.loadNumBox.html(loadC);
}
;
}
,loadImg:function(test){
	//加载大图方法var that = this;
	var _src = this.li.eq(that.loadNum).attr("bsrc"),bigTh3=null,bigTh4=null,bigText=null;
	if(that.li.eq(that.loadNum).attr("data-h")){
	//$("#bigT h3").html(that.li.eq(that.loadNum).attr("data-h"));
	var bigTh3 = $("#bigT h3");
	$("#bigT").hide();
	bigTh3.html("");
}
;
	if(that.li.eq(that.loadNum).attr("data-m")){
	//$("#bigT h4").html(that.li.eq(that.loadNum).attr("data-m"));
	var bigTh4 = $("#bigT h4");
	$("#bigT").hide();
	bigTh4.html("");
}
;
	if(that.li.eq(that.loadNum).attr("data-text")){
	//$("#bigText").html(that.li.eq(that.loadNum).attr("data-text"));
	var bigText = $("#bigText");
	bigText.html("").hide();
}
;
	var img = new Image();
	$(img).hide();
	//loading dom操作(分首次加载和后面加载，根据点击操作设置运动方向)if(that.deInit){
	var le = 0;
	that.deInit = false;
	that.bigBox.html("<div class='loading'></div><div class='loading'></div>");
}
else{
	if(test!="pre"){
	var le = -1230;
	that.bigBox.append("<div class='loading'></div>");
}
else{
	var le = 1230;
	that.bigBox.find(".loading").before("<div class='loading'></div>");
	that.bigBox.css({
	"margin-left":-1230}
);
	le = 0;
}
;
}
;
	that.bigBox.animate({
	"margin-left":le}
,function(){
	$(img).bind("load",function(){
	//判断出现方向if(test!="pre"){
	var n = 1,oldN = 0;
}
else{
	var n = 0,oldN = 1;
}
;
	that.bigBox.find(".loading").eq(n).html(img);
	that.bigBox.find(".loading").eq(oldN).remove();
	that.bigBox.css({
	"margin-left":0}
);
	$(this).fadeIn(200,function(){
	if(bigTh3){
	$("#bigT").fadeIn()bigTh3.html(that.li.eq(that.loadNum).attr("data-h"));
}
;
	if(bigTh4){
	$("#bigT").fadeIn()bigTh4.html(that.li.eq(that.loadNum).attr("data-m"));
}
;
	if(bigText){
	bigText.html(that.li.eq(that.loadNum).attr("data-text")).fadeIn();
}
;
}
);
}
);
	img.src = _src;
}
);
	//添加当前加载序号that.li.removeClass("on");
	that.li.eq(that.loadNum).addClass("on");
	if(that.loadNumBox){
	var loadC = parseInt(that.loadNum)+1;
	loadC = loadC<10?"0"+loadC:loadC;
	that.loadNumBox.html(loadC);
}
;
}
,autoPlay:function(){
	//自动播放方法var that =this;
	that.timer = setInterval(function(){
	that.c<that.maxL?that.c++:that.c=0;
	that.move();
}
,4000);
}
}

CSS代码(zzsc.css):

/*reset*/
ul,li,p,h1,h2,h3,h4,h5,body{margin:0px;padding:0px;}
ul,li,dl,dd,dt{list-style:none;}
body{font-size:12px;}
a{text-decoration:none;color:#252525;}
a:hover,.fot a:hover{color:#ee2d24;}
a img{border:none 0;display:block;}
/*banner*/
.banner_index{height:582px;position:relative;overflow:hidden;width:1200px;margin:30px auto;}
.banner_index .btn,.banner_pro .bBtn{position:absolute;top:235px;width:56px;height:78px;display:block;z-index:3;}
.banner_index .btnPre,.banner_pro .bPre{background:url(../images/bg_btnPre_index.png) no-repeat 0 0;left:20px;}
.banner_index .btnPre:hover,.banner_pro .bPre:hover{background:url(../images/bg_btnPre_index_hover.png) no-repeat 0 0;}
.banner_index .btnNext,.banner_pro .bNext{background:url(../images/bg_btnNext_index.png) no-repeat 0 0;right:20px;}
.banner_index .btnNext:hover,.banner_pro .bNext:hover{background:url(../images/bg_btnNext_index_hover.png) no-repeat 0 0;}
.banner_index .banner_wrap{position:absolute;left:0px;top:0px;z-index:2;}
.banner_index .banner_wrap li{width:1230px;float:left;}
.indexBanner_num{width:1000px;margin:0 auto;padding:10px 0;text-align:center;}
.indexBanner_num a{width:8px;height:8px;display:inline-block;_zoom:1;background:url(../images/bg_num.png) no-repeat 0 0;font-size:0px;line-height:0px;margin:0 1px;}
.indexBanner_num a.on,.indexBanner_num a:hover{background:url(../images/bg_num_on.png) no-repeat 0 0;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
1.21 MB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
1.21 MB
立即下载
严眉
了解
打赏作者 鼓励作者
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
打赏文章