实例如下：
JS网页特效-无特效图片焦点图特效（可一个页面多用） * { padding:0; margin:0; font-size:12px; } ul, li { list-style: none; } .indexFocus{border:1px solid #CCC; padding:2px;width:419px;height:185px; margin:0 auto;} .indexFocus .focusBox{width:419px;height:185px;position:relative;margin:0 auto;position:relative} .indexFocus .focusBox .bigPic{width:419px;height:185px;overflow:hidden;position:relative} .indexFocus .focusBox .bigPic li{width:419px;height:185px} .indexFocus .focusBox .bigPic img{width:419px;height:185px} .indexFocus .focusBox .btn{height:16px;position:absolute;right:8px;bottom:4px;z-index:11} .indexFocus .focusBox .btn ul li{width:15px;height:15px;line-height:15px;margin-right:2px;display:block;background:#fff;float:left;text-align:center;cursor:pointer} .indexFocus .focusBox .btn .sel{width:15px;height:15px;background:#B90101;color:#fff} .indexFocus .focusBox .picText_bg{width:100%;height:26px;position:absolute;left:0;bottom:0;background:#000;filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;} .indexFocus .focusBox .picText{width:100%;height:26px;line-height:26px;text-align:left;font-weight:bold;margin:0 auto;position:absolute;left:0;bottom:0;overflow:hidden;z-index:10;} .indexFocus .focusBox .picText a{padding-left:10px;color:#fff;} * { padding:0; margin:0; font-size:12px; } ul, li { list-style: none; } .indexFocus{border:1px solid #CCC; padding:2px;width:419px;height:185px; margin:0 auto;} .indexFocus .focusBox{width:419px;height:185px;position:relative;margin:0 auto;position:relative} .indexFocus .focusBox .bigPic{width:419px;height:185px;overflow:hidden;position:relative} .indexFocus .focusBox .bigPic li{width:419px;height:185px} .indexFocus .focusBox .bigPic img{width:419px;height:185px} .indexFocus .focusBox .btn{height:16px;position:absolute;right:8px;bottom:4px;z-index:11} .indexFocus .focusBox .btn ul li{width:15px;height:15px;line-height:15px;margin-right:2px;display:block;background:#fff;float:left;text-align:center;cursor:pointer} .indexFocus .focusBox .btn .sel{width:15px;height:15px;background:#B90101;color:#fff} .indexFocus .focusBox .picText_bg{width:100%;height:26px;position:absolute;left:0;bottom:0;background:#000;filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;} .indexFocus .focusBox .picText{width:100%;height:26px;line-height:26px;text-align:left;font-weight:bold;margin:0 auto;position:absolute;left:0;bottom:0;overflow:hidden;z-index:10;} .indexFocus .focusBox .picText a{padding-left:10px;color:#fff;} 无特效图片焦点图特效（可一个页面多用）
- 1
- 2
- 3
- 4
- 5
web应用 IT云动态 HTML学习 图文特效集锦 文章特效集锦
- 1
- 2
- 3
HTML学习 图文特效集锦 文章特效集锦 考高分网 www.jb51.netwww.jb51.net
以上这篇纯JS焦点图特效实例(可一个页面多用)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。
