网站banner一般都是2000px以上的宽度,为了让在小的屏幕上图片不被压缩并且是居中表现:

  方法是让包裹图片全部的那个大容器始终正居中

<!-- banner -->

<div id="sy_top">

  <div class="sy_bigbox">

    <div id="sy_picbox" class="sy_picbox">

<a href="#" target="_blank">

         <img src="${ctx }/static/img/banner_1209a.jpg"/>

       </a>

       <a href="#" target="_blank">

          <img src="${ctx }/static/img/banner_1209b.jpg"/>

        </a>

        <a href="#" target="_blank">

          <img src="${ctx }/static/img/banner_1209c.jpg"/>

        </a>

      </div>

  </div>

  <!-- 都点  -->

  <div id="sy_bigpicbtn" class="sy_bigpicbtn"></div>

</div>

css写法

/*------------------------ banner ------------------------*/

.sy_bigbox {

position: relative;

width: 100%;

height: 600px;

background-color: #f1f1f1;

overflow: hidden;

}

.sy_picbox {

position: absolute;

white-space: nowrap;

font-size: 0;

width: 100%;

left: 50%;

margin-left: -1000px;

top: 0px;

}

.sy_bigpicbtn {

position: absolute;

width: 100px;

height: 25px;

top: 690px;

left: 0px;

width: 100%;

text-align: center;

}

.sy_bigpicbtn a {

display: inline-block;

width: 50px;

height: 2px;

background-color: #b2c7cd;

margin-right: 10px;

}

.sy_bigpicbtn a.active {

background-color: #687477;

-webkit-animation: dh2 0.7s linear infinite;

}

js 实现轮播动画

var sindex = 0;

var prewindex = 0;

var timeindex = setInterval(doscroll, 3000);

var num = $(".sy_picbox a").length;

var html = "";

for(var i = 0;i<num;i++){

html+= '<a id="a'+i+'" href="#" class=""></a>';

}

$('.sy_bigpicbtn').append(html);

function doscroll() {

prewindex = sindex;

if (sindex != $(".sy_picbox a").length - 1)

sindex++

else

sindex = 0;

$(".sy_bigpicbtn a").removeClass("active")

$(".sy_bigpicbtn a").eq(sindex).addClass("active");

$(".sy_picbox a").hide();

$(".sy_picbox a").eq(sindex).fadeIn(500);

}

网站Bannr适应大小屏幕,图片始终居中不被压缩的更多相关文章

  1. bootstrap轮播组件,大屏幕图片居中效果

    在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...

  2. css未知大小的图片居中

    未知大小的图片在指定大小的div盒子中垂直水平居中: 无需要JS <style> .box { /*垂直居中*/ display: table-cell; vertical-align:m ...

  3. CSS实现自适应不同大小屏幕的背景大图的两种方法(转自简书)

    CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...

  4. Android 截取屏幕图片并保存

    Android市场上有很多屏幕截图软件,把当前屏幕截取出来并保存,这一节我们就来看看屏幕截图的具体实现. 操作步骤: 1.创建一片屏幕大小的缓冲区,用于存放屏幕大小的图片 Bitmap bitmap ...

  5. css全局定位内容图片自动居中

    最近在做一个资讯站点时候,因为采集的数据,图片不居中,导致界面很不美观,所以需要全局定义下图片输出时候进行居中. .content img { max-width:800px;_width:expre ...

  6. html/css系列-图片上下居中

    本文详情:http://www.zymseo.com/276.html图片上下居中的问题常用的几种方法:图片已知大小和未知大小,自行理解 .main{ width: 400px;height: 400 ...

  7. Qt自适应大小显示图片,添加菜单

    由于后面的图像处理需要UI,OpenCV自带也不怎么会,MFC实在懒得学的.听同学说Qt不错,就用Qt做UI了. 本文主要介绍三个内容:在Qt Creator中使用OpenCV2.Qt中自适应显示图片 ...

  8. 只用CSS实现容器内图片上下左右居中

    一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...

  9. Wordpress文章图片不居中与开头缩进问题

    //段落开头缩进 .Mid2L_con p {text-indent:2em;} //文章内图片不居中(设置居中后) .Mid2L_con .aligncenter { display: block; ...

随机推荐

  1. 搭建http服务

    一.本地测试 访问的地址为:localhost或者127.0.0.1

  2. 在本地调试移动设备上的页面——神器weinre介绍

    平时写代码,最喜欢用chrome的developer Tool调试页面了,基本是离不了的工具.但是当页面需要在移动设备上使用,尤其是被嵌入到Hybird APP中时,由于移动版的chrome没有dev ...

  3. Wrong list

    1.背包dp[i][j]无论当前物品是否不大于j都可以转移dp[i-1][j] 2.循环从0开始还是1开始的问题 3.无向图边集数组开两倍 4.(3*987654321) > maxint 4. ...

  4. js构造函数的方法与原型prototype

    把方法写在构造函数内的情况我们简称为函数内方法,把方法写在prototype属性上的情况我们简称为prototype上的方法 函数内的方法: 使用函数内的方法我们可以访问到函数内部的私有变量,如果我们 ...

  5. linux 下串口独占方式打开

    参考文章: http://blog.csdn.net/rl529014/article/details/51336161  http://blog.csdn.net/lin_fs/article/de ...

  6. SubMenu的setHeaderView使用时发现的问题

    SubMenu android.view.SubMenu.setHeaderView(View view) 上面是这个方法的完整签名,作用就是自定义子菜单的菜单头,但是在OptionsMenu里面设置 ...

  7. web自动化工具-Browsersync

    web自动化工具-Browsersync browser-sync才是神器中的神器,和livereload一样支持监听所有文件.可是和livereload简单粗暴的F5刷新相比,browsersync ...

  8. BZOJ4318——OSU!

    1.题意:一个序列,连续的一段1对得分具有贡献,那么问期望得分 2.分析:一道裸的期望dp,那么新加入一个1,对答案的贡献为 直接暴力算出期望的平方和期望,每次dp的时候更新一下就好了 #includ ...

  9. infoq 微信后台存储架构

    infoq 上微信后台存储架构 视频很是值得认真一听,大概内容摘要如下: 主要内容:同城分布式强一致,园区级容灾KV存储系统 - sync 序列号发生器      移动互联网场景下,频繁掉线重连,使用 ...

  10. javascript for循环

    2016年12月28日 20:01:54 星期三 html: <a href="aaaa">AAAA</a> <a href="bbbb&q ...