收藏本站腾讯微博新浪微博

开启辅助访问邮件列表客服QQ 800003860 切换到宽版

蓝色理想最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务请多用悬赏提问 热夏来袭，选一款蓝色理想的个性T恤吧！

手机上论坛，使用APP获得更好体验 急需前端攻城狮，获得内部推荐机会 论坛开通淘帖功能，收藏终于可以分类了！

»论坛 › 网站开发区 › 前端技术专栏 › 这是怎么回事？请教大神...

发新帖

查看: 1523|回复: 1

[讨论] 这是怎么回事？请教大神...

发表于 2017-4-21 16:53:33 | 显示全部楼层 |阅读模式

50体力

想加个当前状态？点击的时候已经加上了，但自动切的时候怎么也加不上当前状态...为什么呢？求教....

<!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" />
<title></title>
</head>

<style>
*{padding:0; margin:0; list-style:none;}
.flash{ width:1120px; height:260px; margin:50px auto; padding:10px; box-shadow:0 0 10px #000;}
.flash .con{ width:1120px; height:260px;}
.flash .con ul li{ width:46px; height:260px; position:relative; overflow:hidden; float:left;}
.flash .con ul li.current{ width:970px;}
.flash .con ul li h3{ width:16px; height:230px; color:#fff; font-family:"微软雅黑"; font-size:16px; padding:15px; background:#CCC; margin-right:2px;}
.flash .con ul li.current h3{background:#F00;}
.show{ position:absolute; left:46px; top:0; width:880px; height:200px; padding:30px 12px 30px 32px;}
.show img{ width:200px; height:200px; margin-right:20px; box-shadow:0 0 10px #000; float:left;-webkit-animation:zq 2s infinite; animation:zq 2s infinite; border-radius:50%;}
@keyframes zq{ from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
@-webkit-keyframes zq{ from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
</style>

<body>

<div class="flash">
	<div class="con">
		<ul>
			<li class="current ti1">
				<h3>关于我们</h3>
				<div class="show">
				</div>
			</li>
			<li class="ti2">
				<h3>联系我们</h3>
				<div class="show">
				</div>
			</li>
			<li class="ti3">
				<h3>给我留言</h3>
				<div class="show">
				</div>
			</li>
			<li class="ti4">
				<h3>网站首页</h3>
				<div class="show">
				</div>
			</li>
		</ul>
	</div>
</div>

<script language="javascript" src="http://zhuanti.chla.com.cn/2014/03/nv/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var timer=null;
var i=0;
$(function(){
	$(".flash .con ul li").mouseover(function(){
		clearInterval(timer);
	});
	$(".flash .con ul li").click(function(){
		$(this).siblings('li').removeClass('current');	
		$(this).addClass('current');
		$(this).stop().animate({width:"970px"},300).siblings().stop().animate({width:"46px"},300)
		
	});
	$(".flash .con ul li").mouseout(function(){
		timer=setInterval("startMove()",2000)
	});
	
})
function startMove(){
  i++;
  if(i>$(".flash .con ul li").length-1){i=0}
  $(".flash .con ul li").stop().eq(i).animate({width:"970px"},300).siblings().stop().animate({width:"46px"},300)
};
timer=setInterval("startMove()",2000)
</script>

</body>
</html>

提示：您可以先修改部分代码再运行

最佳答案

查看完整内容

[html] *{padding:0; margin:0; list-style:none;} .flash{ width:1120px; height:260px; margin:50px auto; padding:10px; box-shadow:0 0 10px #000;} .flash .con{ width:1120px; height:260px;} .flash .con ul li{ width:46px; height:260px; position:relative; overflow:hidden; float:left;} .flash .con ul li.current{ width:970px;} .flash .con ul li h3{ width:16px; height:230px; color:#fff; ...

回复

使用道具举报

发表于 2017-4-21 16:53:34 | 显示全部楼层

<!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" />
<title></title>
</head>

<style>
*{padding:0; margin:0; list-style:none;}
.flash{ width:1120px; height:260px; margin:50px auto; padding:10px; box-shadow:0 0 10px #000;}
.flash .con{ width:1120px; height:260px;}
.flash .con ul li{ width:46px; height:260px; position:relative; overflow:hidden; float:left;}
.flash .con ul li.current{ width:970px;}
.flash .con ul li h3{ width:16px; height:230px; color:#fff; font-family:"微软雅黑"; font-size:16px; padding:15px; background:#CCC; margin-right:2px;}
.flash .con ul li.current h3{background:#F00;}
.show{ position:absolute; left:46px; top:0; width:880px; height:200px; padding:30px 12px 30px 32px;}
.show img{ width:200px; height:200px; margin-right:20px; box-shadow:0 0 10px #000; float:left;-webkit-animation:zq 2s infinite; animation:zq 2s infinite; border-radius:50%;}
@keyframes zq{ from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
@-webkit-keyframes zq{ from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
</style>

<body>

<div class="flash">
	<div class="con">
		<ul>
			<li class="current ti1">
				<h3>关于我们</h3>
				<div class="show">
				</div>
			</li>
			<li class="ti2">
				<h3>联系我们</h3>
				<div class="show">
				</div>
			</li>
			<li class="ti3">
				<h3>给我留言</h3>
				<div class="show">
				</div>
			</li>
			<li class="ti4">
				<h3>网站首页</h3>
				<div class="show">
				</div>
			</li>
		</ul>
	</div>
</div>

<script language="javascript" src="http://zhuanti.chla.com.cn/2014/03/nv/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var timer=null;
var i=0;
$(function(){
	$(".flash .con ul li").mouseover(function(){
		clearInterval(timer);
	});
	$(".flash .con ul li").click(function(){
		$(this).siblings('li').removeClass('current');	
		$(this).addClass('current');
		$(this).stop().animate({width:"970px"},300).siblings().stop().animate({width:"46px"},300)
		
	});
	$(".flash .con ul li").mouseout(function(){
		timer=setInterval("startMove()",2000)
	});
	
})
function startMove(){
  i++;
  if(i>$(".flash .con ul li").length-1){i=0}
  $(".flash .con ul li").removeClass('current');
  $(".flash .con ul li").stop().eq(i).addClass('current');
  $(".flash .con ul li").stop().eq(i).animate({width:"970px"},300).siblings().stop().animate({width:"46px"},300)
};
timer=setInterval("startMove()",2000)
</script>

</body>
</html>

提示：您可以先修改部分代码再运行

回复

使用道具举报

发新帖

|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )

GMT+8, 2020-8-12 14:01 , Processed in 0.140269 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表