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

带滚动新闻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 href="css/zzsc.css" rel="stylesheet" >
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/jquery.caroufredsel-6.0.4-packed.js" ></script>
<script type="text/javascript" src="js/focus.js" ></script>
</head>

<body>
<!-- 代码 开始 -->
<div class="banner">
  <div class="banner_show" id="banner_show"> <a href="#" target="_blank" class="bannger_inbox"><img src="images/banner1.jpg" width="2000" height="572"></a> <a href="#" target="_blank" class="bannger_inbox"><img src="images/banner2.jpg" width="2000" height="572"></a> <a href="#" target="_blank" class="bannger_inbox"><img src="images/banner3.jpg" width="2000" height="572"></a>
    <div class="banner_mag">
      <div class="banner_magbox">
        <div id="banner_magbox0">
          <div class="focus-img"><img src="images/txt.png" /></div>
          <h4><a href="#">标题（）</a></h4>
          <p>每一个孩子都有一个大大的梦想。参加狮王美国游学，是孩子成长关键期的一次独立洗礼，给孩子正确的教育引导，鼓励激发自我潜能，提高解决困难能力，培养团队合作精神，帮助他们完善自我，学会关爱他人，提高沟通水平，养成独立、自信和快乐的个性。</p>
        </div>
        <div id="banner_magbox1" class="none">
          <div class="focus-img"><img src="images/txt.png" /></div>
          <h4><a href="#">标题（）</a></h4>
          <p>标题（）是一个专业提供网页素材、矢量素材、设计素材、JS特效、UI设计、教程等各种网页设计素材免费下载的网站，致力于做天下人的移动标题。</p>
        </div>
        <div id="banner_magbox2" class="none">
          <div class="focus-img"><img src="images/txt.png" /></div>
          <h4><a href="#">标题（）</a></h4>
          <p>Standard Product Support （简称“SPS”）是用友公司原厂为确保软件产品授权许可升级和正常运行而提供的软件产品支持服务。 用友SPS，让企业管理信息系统拥有持久生命力！</p>
        </div>
      </div>
      <div class="yq_banner_list" id="yq_banner_list"> <a href="javascript:;" rel="0" class="hover">&nbsp;</a> <a href="javascript:;" rel="1">&nbsp;</a> <a href="javascript:;" rel="2">&nbsp;</a> </div>
    </div>
    <div class="banner_pre_next"> <a href="javascript:;" class="banner_btn_left">上一个</a> <a href="javascript:;" class="banner_btn_right">下一个</a> </div>
  </div>
  <!--蓝色文字部分-->
  <div class="focus-news">
    <div class="index-news-title">
      <h2>NEWS/Events</h2>
      <h2>新闻/活动</h2>
      <ul class="index-tabs fix">
        <li id="prev" class="prev"></li>
        <li id="next" class="next"></li>
      </ul>
    </div>
    <div class="index-news-show" id="carousel">
      <ul class="fix">
        <li>
          <h2>标题（）</h2>
          <p>时间：2013.7.25-2013.8.25</p>
          <p>地址：北京朝阳区乐成中心</p>
        </li>
        <li>
          <h2>狮王哈佛未来领袖夏令营</h2>
          <p>时间：2013.7.25-2013.8.25</p>
          <p>地址：北京朝阳区乐成中心</p>
        </li>
        <li>
          <h2>狮王哈佛未来领袖夏令营</h2>
          <p>时间：2013.7.25-2013.8.25</p>
          <p>地址：北京朝阳区乐成中心</p>
        </li>
        <li>
          <h2>狮王哈佛未来领袖夏令营</h2>
          <p>时间：2013.7.25-2013.8.25</p>
          <p>地址：北京朝阳区乐成中心</p>
        </li>
      </ul>
    </div>
    <div class="index-news-tel">4008-89-4008</div>
  </div>
  <!--蓝色文字部分end--> 
</div>
</body>
</html>

JS代码(focus.js):

/*banner*/
$(function(){
	var timer=5000;
	var showtime = 800;
	var showbox = $("#banner_show");
	var inbox = $(".bannger_inbox");
	var movelist = $("#yq_banner_list");
	var s;
	var b = 0;
	var size =inbox.size();
	var play = 1;
	function move(){
	b++;
	if(b>size-1){
	b=0;
}
inbox.each(function(e){
	inbox.eq(e).hide(0);
	$("#banner_magbox"+e).hide();
	movelist.find("a").eq(e).removeClass("hover");
	if(e == b){
	inbox.eq(b).fadeIn(showtime);
	$("#banner_magbox"+b).show();
	movelist.find("a").eq(b).addClass("hover");
}
}
);
}
s = setInterval(move,timer);
	function stopp(obj){
	$(obj).hover(function(){
	if(play){
	clearInterval(s);
	play = 0;
}
}
,function(){
	if(!play){
	s = setInterval(move,timer);
	play = 1;
}
}
);
}
stopp(".banner_show");
	$(".banner_btn_right").click(function(){
	move();
}
);
	$(".banner_btn_left").click(function(){
	b--;
	if(b<0){
	b=size-1}
inbox.each(function(e){
	inbox.eq(e).hide(0);
	movelist.find("a").eq(e).removeClass("hover");
	if(e == b){
	inbox.eq(b).fadeIn(showtime);
	movelist.find("a").eq(b).addClass("hover");
}
}
);
}
);
	movelist.find("a").click(function(){
	var rel = $(this).attr("rel");
	inbox.each(function(e){
	inbox.eq(e).hide(0);
	movelist.find("a").eq(e).removeClass("hover");
	$("#banner_magbox"+e).hide(0);
	if(e == rel){
	inbox.eq(rel).fadeIn(showtime);
	movelist.find("a").eq(rel).addClass("hover");
	$("#banner_magbox"+rel).show(0);
}
}
);
}
);
	$(".bannger_inbox").each(function(e){
	var inboxsize = $(".bannger_inbox").size();
	inboxwimg = $(this).find("img").width();
	$(".bannger_inbox").eq(e).css({
	"margin-left":(-1)*inboxwimg/2+"px","z-index":inboxsize-e}
);
}
);
	/*$(".banner").hover(function(){
	$(".banner_pre_next").fadeIn();
}
,function(){
	$(".banner_pre_next").fadeOut();
}
)*/
}
);
	/*menu*/
$(function(){
	var tt1;
	$(".content_bottom_tig").bind({
	mouseenter:function(){
	$(this).find(".h_bg").addClass("hover");
	that = $(this)tt1= setTimeout(function(){
	that.animate({
	height:130}
);
}
,200);
}
,click:function(){
}
,mouseleave:function(){
	$(this).find(".h_bg").removeClass("hover");
	clearTimeout(tt1);
	that.animate({
	height:25}
);
}
}
);
}
)$(function(){
	$('#carousel ul').carouFredSel({
	prev:'#prev',next:'#next',scroll:1000}
);
}
);

CSS代码(zzsc.css):

*{margin:0;padding:0;}
.w980{width:980px;}
.center{margin:0 auto;}
.main{background:#dcdddd;}
ul{list-style:none;}
.fix{*zoom:1;}
.fix:after{display:block;content:"clear";height:0;clear:both;overflow:hidden;visibility:hidden;}
a{text-decoration:none;}
img{border:none;}
.power{text-align:center;line-height:30px;}
/*以上是基本参数 可不复制 以下是必须*/
/*部分开始-----------------------------------------------------*/
/*banner*/
.none{display:none;}
.banner{min-width:980px;height:572px;position:relative;margin:0 auto;overflow:hidden;z-index:1;}
.banner_show{width:100%;text-align:center;height:572px;overflow:hidden;position:relative;}
.bannger_inbox{position:absolute;left:50%;top:0;}
/*翻页*/
.banner_pre_next{position:relative;z-index:105;top:520px;width:980px;left:50%;height:37px;margin-left:-500px;*left:240px;}
.banner_pre_next a{width:37px;height:37px;background:url(../images/btn.png) no-repeat;text-indent:-999em;}
.banner_pre_next .banner_btn_left{position:absolute;left:-37px;background-position:0px 0px;}
.banner_pre_next .banner_btn_right{position:absolute;right:-37px;background-position:-37px 0px;}
/*圆点*/
.yq_banner_list{width:200px;height:25px;position:absolute;top:485px;text-align:right;z-index:100;left:120px;padding-right:12px;}
.yq_banner_list a{display:inline-block;width:19px;height:19px;background:url(../images/abg.png) no-repeat right;margin-right:10px;}
.yq_banner_list a.hover{background:url(../images/abg.png) no-repeat left;}
/*文字*/
.banner_mag{width:345px;height:520px;position:absolute;overflow:hidden;left:50%;top:0px;margin-left:-500px;text-align:left;z-index:99;font-family:"Microsoft YaHei";}
.banner_magbox{height:520px;background:url(../images/ico3.png) repeat;text-align:left;padding:80px 30px 35px;}
.banner_magbox .focus-img{text-align:right;margin-bottom:40px;}
.banner_magbox h4{font-size:18px;font-weight:normal;color:#fff;margin-bottom:10px;}
.banner_magbox h4 a{color:#fff;}
.banner_magbox p{font-size:14px;color:#fff;font-weight:normal;line-height:22px;}
/*新闻*/
.focus-news{height:100px;color:#fff;padding:30px 0px 10px 0px;background:#30a7e0;position:absolute;bottom:0px;width:980px;left:50%;margin-left:-500px;z-index:9999;font-family:"Microsoft YaHei";}
.index-news-title{float:left;width:130px;margin-right:60px;position:relative;padding-left:70px;}
.index-news-title h2{font-size:20px;height:30px;font-weight:normal;}
.index-tabs{position:absolute;right:0px;width:34px;bottom:10px;}
.index-tabs li{width:17px;height:17px;float:left;cursor:pointer;background:url(../images/dot.gif) no-repeat;}
.index-tabs li.prev{background-position:0px 0px;}
.index-tabs li.next{background-position:-19px 0px;}
.index-news-show{float:left;width:460px;}
.index-news-show ul{}
.index-news-show ul li{float:left;width:230px;}
.index-news-show ul li h2{font-size:14px;}
.index-news-show ul li h2 a{color:#fff;}
.index-news-show ul li p{font-size:14px;}
.index-news-show ul.hide{display:none;}
.index-news-tel{font-weight:bold;float:right;padding-left:30px;background:url(../images/tel.gif) left no-repeat;font-size:20px;width:180px;}
/*部分结束-----------------------------------------------------*/
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
603.40 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
603.40 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
打赏文章