百度应用网站jQuery焦点图轮播滚动切换特效代码

版权:原创 更新时间:1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 百度应用网站jQuery焦点图轮播滚动切换特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:

部分效果截图:

百度应用网站jQuery焦点图轮播滚动切换特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/zzsc.css" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<title>百度应用网站jQuery焦点图 </title>
</head>
<body>
<div align="center">
<table border="0" width="50%" id="table1" height="300">
<tr><td>
<div class="lunbo-recommend cls">
	<div class="slide-pics" id="banner-slide">
		<div class="scrollable">
			<ul class="items cls">
				<li class="item">
				<a href="#">
				<img src="images/1.jpg" alt="" /></a>
				<div class="info-wrapper">
					<div class="info-background">
					</div>
					<div class="pic-info">
						<h3>QQ空间</h3>
						<p><span class="orange">小编推荐:</span>致力于帮助用户随时随地“分享生活,留住感动</p>
						<a class="visite s-index-icon org-btn-blk" href="#">
						访 问</a> </div>
				</div>
				</li>
				<li class="item">
				<a href="#">
				<img src="images/2.jpg" alt="" /></a>
				<div class="info-wrapper">
					<div class="info-background">
					</div>
					<div class="pic-info">
						<h3>中国越野拉力赛</h3>
						<p><span class="orange">小编推荐:</span>全面详解第一届中国越野拉力赛</p>
						<a class="visite s-index-icon org-btn-blk" href="#">
						访 问</a> </div>
				</div>
				</li>
				<li class="item">
				<a href="#">
				<img src="images/3.jpg" alt="" /></a>
				<div class="info-wrapper">
					<div class="info-background">
					</div>
					<div class="pic-info">
						<h3>我叫MT</h3>
						<p><span class="orange">小编推荐:</span>2013最火卡牌手游,纯正的魔兽题材</p>
						<a class="visite s-index-icon org-btn-blk" href="#">
						访 问</a> </div>
				</div>
				</li>
				<li class="item">
				<a href="#">
				<img src="images/4.jpg" alt="" /></a>
				<div class="info-wrapper">
					<div class="info-background">
					</div>
					<div class="pic-info">
						<h3>高端指南:有品位也要有内涵</h3>
						<p><span class="orange">小编推荐:</span>笑一个吧,内涵世界里多欢乐!</p>
						<a class="visite s-index-icon org-btn-blk" href="#">
						访 问</a> </div>
				</div>
				</li>
				<li class="item">
				<a href="#">
				<img src="images/5.jpg" alt="" /></a>
				<div class="info-wrapper">
					<div class="info-background">
					</div>
					<div class="pic-info">
						<h3>发现最美应用</h3>
						<p><span class="orange">小编推荐:</span>体验与品位并存</p>
						<a class="visite s-index-icon org-btn-blk" href="#">
						访 问</a> </div>
				</div>
				</li>
			</ul>
		</div>
		<div class="cover coverleft">
		</div>
		<div class="cover coverright">
		</div>
		<div class="prev prev-next s-index-icon">
			上一张</div>
		<div class="next prev-next s-index-icon">
			下一张</div>
	</div>
<script type="text/javascript">
    $(document).ready(function(){
        $('#word').focus();
    });
</script>
<script type="text/javascript">$(document).ready(function() {
   (function($){
        $.fn.slider=function(arg){
            var me = $(this),opt = $.extend({inteval:5000,auto:true,loop:false,prev:me.find(".prev"),next:me.find(".next"),pageBtns:"",finish:function(){},start:function(){}}, arg),pageBtns,scrollable = me.find(".scrollable"),ori_items = me.find(".items"),total_num = me.find(".item").length,cur_page = 0,mov_w = me.find(".item").outerWidth(),move_left=0,interval;
            opt.start();
            if (opt.loop) {
                ori_items.append(ori_items.find(".item").clone());
                ori_items.prepend(ori_items.find(".item").clone());
                scrollable.scrollLeft(getCurScroLeft());
            }
           opt.prev.length&&opt.prev.bind("click",move).hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")});
           opt.next.length&&opt.next.bind("click",move).hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")});
           if(opt.auto){
               interval=setInterval(move,opt.inteval);
               me.hover(function(){clearInterval(interval)},function(){interval=setInterval(move,opt.inteval);move_left=0});
           }
           if(opt.pageBtns&&!opt.loop){
               pageBtns=opt.pageBtns;
               pageBtns.bind("click",moveTo);
           }
           function moveTo(e){
                pageBtns.unbind("click",moveTo);
                var cur_li=$(e.target).closest("li"),num=cur_li.index();
                pageBtns.removeClass("select");cur_li.addClass("select");
                var cur_scrollLeft=num*mov_w;
                scrollable.animate({scrollLeft:cur_scrollLeft},{duration:'normal',easing:'swing',complete:function(){pageBtns.bind("click",moveTo);opt.finish(num)},queue:false});
           }
           function move(e){
              opt.prev.length&&opt.prev.unbind("click",move);
              opt.next.length&&opt.next.unbind("click",move);
              if(e){
                  clearInterval(interval);
                  var cur_btn=$(e.target);
                  if(cur_btn.hasClass("prev")){move_left=1};
                  if(cur_btn.hasClass("next")){move_left=0};
              }
               var cur_scrollLeft=move_left ? getCurScroLeft()-mov_w:getCurScroLeft()+mov_w;
               scrollable.stop().animate({scrollLeft:cur_scrollLeft},{duration:'normal',easing:'swing',complete:complate,queue:false});
           }
           function complate(){
               cur_page=move_left?cur_page-1:cur_page+1;
               if(cur_page<= -total_num+2){cur_page+=total_num;resetscroll()}
               if(cur_page>=2*total_num-2){cur_page-=total_num;resetscroll()}
               opt.prev.length&&opt.prev.bind("click",move);
               opt.next.length&&opt.next.bind("click",move);
               opt.finish();
           }
           function resetscroll(){
               scrollable.scrollLeft(getCurScroLeft());
           }
           function getCurScroLeft(){
               return opt.loop?total_num * mov_w+cur_page*mov_w:cur_page*mov_w;
           }
        }
    })(jQuery);
    $("#banner-slide").slider({
        interval:5000,
        loop:true,
        auto:true
    });
     $("#ex-app-wrapper").slider({
        interval:5000,
        loop:false,
        auto:false,
        pageBtns:$("#op-page-list li")
    });
    $("#banner-slide .item").hover(function(){$(this).find(".info-wrapper").animate({'top':190},{duration:300,queue:false})},function(){$(this).find(".info-wrapper").animate({'top':266},{duration:300,queue:false})});

});
</script>
</div>
</td></tr>
</table>
</div>
<br>
</body>
</html>

CSS代码(zzsc.css):

/*reset文件 */
html{overflow-x:hidden;overflow-y:scroll;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,textarea,select,optgroup,option,fieldset,legend,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal;}
ins{text-decoration:none;}
li{list-style:none;}
table{font-size:inherit;font:100%;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{margin:0;*font-size:100%;line-height:1.2;}
a img,img{-ms-interpolation-mode:bicubic;}
.cls:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.cls{zoom:1;}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}
/*reset文件结束 */
/*轮播图css */
.slide_pics{position:relative;padding-top:0px;border:1px solid #CCC;background:#F1F1F1;height:262px;width:748px;margin-bottom:12px;}
.slide_pics .scrollable{position:relative;overflow:hidden;width:740px;height:256px;margin-top:3px;float:left;border-left:1px solid #CCC;border-right:1px solid #CCC;z-index:600;}
.slide_pics .scrollable .items{width:20000em;position:absolute;}
.slide_pics .scrollable .items div{float:left;width:583px;}
.slide_pics .scrollable .items a{width:583px;height:256px;display:block;position:relative;left:80px;}
.slide_pics .scrollable img{float:left;margin:0px;background-color:#fff;border:1px solid #ccc;width:581px;height:254px;}
.slide_pics .navi{margin-left:337px;margin-bottom:7px;width:200px;height:20px;}
.slide_pics .navi a{width:12px;height:12px;float:left;margin:3px;background:url("navinactive.png") no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="navinactive.png",sizingMethod="crop");display:block;font-size:1px;}
.slide_pics .navi a.active{background:url("navactive.png") no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="navactive.png",sizingMethod="crop");margin:2px 3px;width:12px;height:12px;}
.slide_pics a.browse{background:url("pc_suite/images/slidebtnleft.png") no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="slidebtnleft.png",sizingMethod="crop");display:block;position:relative;width:28px;height:45px;float:left;margin-top:116px;cursor:pointer;font-size:1px;z-index:700;}
.slide_pics a.right{background:url("pc_suite/images/slidebtnright.png") no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="slidebtnright.png",sizingMethod="crop");clear:right;margin-left:-25px;}
.slide_pics a.left{margin-right:-25px;}
.slide_pics .cover{width:79px;height:255px;background:black;opacity:0.5;filter:alpha(opacity=50);position:relative;z-index:650;left:0px;top:0px;float:left;/*cursor:pointer;*/
}
.slide_pics .coverright{left:585px;}
.slide_pics .topic_des{font-size:16px;line-height:16px;position:absolute;top:0px;left:0px;color:#fff;text-align:center;top:258px;width:100%;font-weight:bold;display:block;}
/*thre*/
.s-index-org{color:#FF4E00;}
.s-index-icon,.s-index-star span{display:block;background-image:url(s-index-icon-3.png?ver=201208010);overflow:hidden;text-indent:-1000em;}
.org-btn-blk{diyaosplay:block;width:60px;height:25px;text-decoration:none;line-height:25px;text-indent:0px;background-position:-73px 0px;text-align:center;color:#fff}
.org-btn-blk:hover{background-position:-73px -27px;text-decoration:none;}
.lunbo-recommend{font-size:12px;line-height:1.5em;}
.lunbo-recommend .slide-pics{;position:relative;float:left;}
.lunbo-recommend .scrollable{width:666px;height:265px;padding-left:86px;overflow:hidden;position:relative;}
.lunbo-recommend .slide-pics .cover{width:86px;height:265px;position:absolute;top:0px;background:black;opacity:0.7;filter:alpha(opacity=70);}
.lunbo-recommend .slide-pics .coverleft{left:0px;}
.lunbo-recommend .slide-pics .coverright{right:0px;}
.lunbo-recommend .slide-pics .prev-next{position:absolute;height:35px;width:28px;top:120px;cursor:pointer;}
.lunbo-recommend .slide-pics .prev{left:30px;background-position:0px 0px;}
.lunbo-recommend .slide-pics .next{right:30px;background-position:-35px 0px;}
.lunbo-recommend .hover.prev{background-position:-0px -36px;}
.lunbo-recommend .hover.next{background-position:-35px -36px;}
.lunbo-recommend .slide-pics .hover{background-position-y:-36px;}
.lunbo-recommend .slide-pics .items{width:30000px;}
.lunbo-recommend .slide-pics .item{float:left;position:relative;height:265px;overflow:hidden;}
.lunbo-recommend .slide-pics .item .info-wrapper{position:absolute;height:75px;width:100%;top:266px;}
.lunbo-recommend .slide-pics .item .info-background{height:75px;background:black;opacity:0.8;filter:alpha(opacity=80);}
.lunbo-recommend .slide-pics .item .pic-info{position:absolute;top:0px;left:0px;font-size:14px;padding:15px 0px 0px 25px;}
.lunbo-recommend .slide-pics .item .pic-info h3{color:#fff;height:24px;}
.lunbo-recommend .slide-pics .item .pic-info p{color:#bebebe;}
.lunbo-recommend .slide-pics .item .pic-info .orange{color:#ff4e00;}
.lunbo-recommend .slide-pics .item .pic-info .visite{position:absolute;top:24px;left:490px;font-size:12px;}
.lunbo-recommend .slide-pics .item a,.lunbo-recommend .slide-pics .item a img{display:block;}
.lunbo-recommend .slide-pics .item img{width:580px;height:265px;}
附件:下载该文件资源,减少时间成本(增值服务)
留言
该资源可下载
File Source
.rar
313.17 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
打赏文章