横向滚动图片设置大小html,图片切换之考虑屏幕尺寸(解决办法隐藏横向滚动条)...

Q: 一般的图片切换是纯图片切换, 结果非要两张页面切换, 这也还好, 主要是现在要在两张页面里加入报名代码切换, 这就有难度,

为啥捏?! (其实这种专题广告很瞎, 但是非要这么做, 偶也没办法)

效果示意: (点击按钮, 切换两张图片)

代码示意: (浏览器尺寸低于1200px, 横向滚动条出现)

Answer:

1) 之前两张图片切换尺寸都是宽1200px(因代码是img设置宽高, 小于1200px横向滚动条就出现),

小屏幕1366*768完全OK(横屏不会出现滚动条)

2)但是现在的有问题, 在于图片宽度尺寸1440px, 早就超过了1366*768笔记本的尺寸, 横向滚动条肯定会出现,

为啥这么考虑1366*768,

因为目前中国使用笔记本的用户很多, No.1的尺寸就是1366*768(我自个电脑目前尺寸1600*900)

3)后来考虑用flexslider插件做, 但是还是失败, 因为在li元素里加入div报名代码后(超长的代码, 还有js),

左右切换按钮消失了, 这绝对是个致命问题, 所以就放弃了.

4)或许让设计重改尺寸, 改成1200px, 到时肯定没问题, 但是从页面内容看, 改成1200px内容呈现会有问题,

该怎么办?!

5)其实1440相较于1366, 并没有宽多少, 也就74px, 最后我选择了html, body{overflow-x: hidden;},

直接把横向滚动条消失, 体验性还好.