js之焦点图轮播特效
一.原理介绍
焦点图在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思,只不过加上了图片。据国外的设计机构调查统计,网站焦点图的点击率明显高于纯文字。在很多购物网主页面可以看到。
二.样式布局——整体思路
1.小圆点buttons以及箭头arrow控制图片的显示。
2.一个container容器放上有7张图片的列表list,其中有两张图片和第一张还有最后一张相同,目的是为了实现无缝隙的滚动。
3.将鼠标移开container容器有自动播放的效果(实则是注册next.onclick事件),将鼠标移进容器时停止播放。这两者使用定时器来实现。
优化工作:当显示的button与点击的button是同一个按钮时,不需要执行遍历buttons数组来清除颜色,直接return;。
注意事项:写代码之前最好搞懂position属性的使用,父元素设置为position:relative
并不会脱离文档流,也就是说——利用给父元素设置position:relative
属性,再将子元素设置为position:absolute
就可以在文档流中实现需要的定位,此时子元素的定为是相对父元素定位的。参考链接:详细解读定位属性 position
三.代码实现
1)cssReset.css
@charset "utf-8";
html {color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,
input,textarea,p,blockquote,th,td{marg