html代码
<div class="slider" id="slider">
<!-- 轮播图大图容器 -->
<ul>
<li>
<img src="images/pic01.jpg" width="1440" height="330">
</li>
<li>
<img src="images/1.jpg" width="1440" height="330">
</li>
<li>
<img src="images/2.jpg" width="1440" height="330">
</li>
<li>
<img src="images/3.jpg" width="1440" height="330">
</li>
</ul>
<!-- 轮播图大图容器 END -->
<!-- 控制条容器 -->
<dl></dl>
<!-- 控制条容器 END -->
</div>
<div class="main w1003">
<div class="news fl bor">
<div class="news-left fl">
</div>
<div class="news-right fr">
<div class="news-right-top">
<p>最新快讯</p>
<em>NEWS</em>
<a href="#" class="more fr">查看更多</a>
</div>
<div class="news-list">
<ul>
<li>
<h4>2012-12-12<i></i></h4>
<h5>
<a href="#">金华会长出席中国安全生产协会矿用产品专业委员......</a>
</h5>
</li>
<li>
<h4>2012-12-12<i></i></h4>
<h5>
<a href="#">金华会长出席中国安全生产协会矿用产品专业委员......</a>
</h5>
</li>
<li>
<h4>2012-12-12</h4>
<h5>
<a href="#">金华会长出席中国安全生产协会矿用产品专业委员......</a>
</h5>
</li>
<li>
<h4>2012-12-12</h4>
<h5>
<a href="#">金华会长出席中国安全生产协会矿用产品专业委员......</a>
</h5>
</li>
</ul>
</div>
</div>
</div>
<div class="notice fr bor">
<div class="notice-top">
<p>通知公告</p>
<a href="#" class="more fr">NOTICE</a>
</div>
<div class="notice-list">
<ul>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
</li>
</ul>
</div>
</div>
<div class="hydt fl bor">
<div class="hydt-top">
<p>行业动态</p>
<a href="#" class="more fr">Industry dynamics</a>
</div>
<div class="notice-list hydt-list">
<ul>
<li>
<a href="#">金华会长出席中国安全生产矿用产品专...</a>
<span>2012-12-12</span>
</li>
<li>
<a href="#">金华会长出席中国安全协会矿用产品专...</a>
<span>2012-12-12</span>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
<span>2012-12-12</span>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
<span>2012-12-12</span>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
<span>2012-12-12</span>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
<span>2012-12-12</span>
</li>
</ul>
</div>
</div>
<div class="hydt hdxx fl bor">
<div class="hydt-top">
<p>行业动态</p>
<a href="#" class="more fr">Industry dynamics</a>
</div>
<div class="notice-list hydt-list">
<ul>
<li>
<a href="#">金华会长出席中国安全生产矿用产品专...</a>
<span>2012-12-12</span>
</li>
<li>
<a href="#">金华会长出席中国安全协会矿用产品专...</a>
<span>2012-12-12</span>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
<span>2012-12-12</span>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
<span>2012-12-12</span>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
<span>2012-12-12</span>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
<span>2012-12-12</span>
</li>
</ul>
</div>
</div>
<div class="notice cpzs fr bor">
<div class="notice-top">
<p>通知公告</p>
<a href="#" class="more fr">NOTICE</a>
</div>
<div class="notice-list">
<ul>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
</li>
<li>
<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="ad-box bor">
<img src="images/pic02.jpg" alt="">
</div>
</div>
<script src="js/nav.js"></script>
<script src="js/move.js"></script>
<script src="js/slider.js"></script>
<script>
// 导航接口的调用
nav(document.getElementById('nav2'));
/*
* 轮播图接口的调用
* 参数：
* slideImgWrapper: 轮播图大图容器(必传)
* slideDotWrapper: 轮播图控制条容器(可选)
* curIndex: 轮播图默认初始化索引(可选)
* autoPlay: 轮播图是否自动播放(可选)
* callback：回调函数(可选)
*/
slider({
slideImgWrapper: document.getElementById('slider').getElementsByTagName('ul')[0],
slideDotWrapper: document.getElementById('slider').getElementsByTagName('dl')[0],
curIndex: 0,
autoPlay: true,
callback: function(index){
console.log('当前切换到了第'+(index+1)+'张');
}
});
</script>
</body>
css代码
index.css
/* 提取公开的样式 */
.w1003 {
width: 1003px;
margin: 0 auto;
}
.fl {
float: left;
}
.fr {
float: right;
}
.bor {
border: 1px solid #dbdbdb;
}
.text-overflow-cut {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
html {
overflow-x: hidden;
}
/* 页面的头部 */
.header {
height: 140px;
background: url(…/images/head-bg.jpg) 665px 30px no-repeat;
}
.head-logo {
width: 420px;
height: 104px;
background: url(…/images/logo.jpg) no-repeat;
margin: 20px 0 0 32px;
}
.head-logo strong {
margin: -100px 0 0 -500px;
}
/* 导航 */
.naver {
height: 40px;
background: #2d7600;
}
.nav {
height: 100%;
}
.nav ul li {
float: left;
width: 167px;
height: 100%;
text-align: center;
line-height: 40px;
position: relative;
z-index: 99;
}
.nav ul li > a {
display: block;
color: #fff;
font-size: 14px;
}
.nav ul li:hover > a {
background: #419e07;
}
.nav ul li.selected > a {
background: #419e07;
}
.xl-nav {
position: absolute;
width: 100%;
left: 0;
top: 40px;
overflow: hidden;
display: none;
}
.xl-nav dl dd {
height: 33px;
line-height: 33px;
margin-top: 2px;
}
.xl-nav dl dd a {
display: block;
background: rgba(45, 118, 0, .8);
color: #fff;
}
.xl-nav dl dd a:hover {
background: #419e07;
}
/* 轮播图 */
.slider {
width: 100%;
height: 330px;
position: relative;
}
.slider ul {
width: 100%;
height: 100%;
position: relative;
}
.slider ul li {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.slider ul li.current {
z-index: 8;
}
.slider ul li img {
position: absolute;
left: 50%;
top: 0;
margin-left: -720px;
}
.slider dl {
width: 100%;
height: 14px;
position: absolute;
left: 0;
bottom: 15px;
text-align: center;
z-index: 9;
}
.slider dl dd {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
margin: 0 3px;
cursor: pointer;
}
.slider dl dd.selected {
background: #f60;
}
/* 最新快讯 */
.news {
width: 704px;
height: 275px;
margin-top: 12px;
}
.news-left {
width: 320px;
height: 240px;
margin: 18px 0 0 18px;
background: green;
}
.news-right {
width: 328px;
margin: 18px 18px 0 0;
}
.news-right-top {
height: 26px;
border-bottom: 1px solid #dbdbdb;
}
.news-right-top p {
height: 23px;
border-bottom: 4px solid #2d7600;
float: left;
font-size: 16px;
color: #252525;
padding: 0 16px 0 6px;
}
.news-right-top em {
font-family: Arial;
color: #adadad;
font-weight: bold;
line-height: 20px;
}
.more {
color: #797979;
padding: 3px 5px;
}
.more:hover {
color: #5a8509;
}
.news-list {
}
.news-list ul li {
border-bottom: 1px dotted #a9adb3;
padding: 6px 0;
}
.news-list ul li h4 {
line-height: 20px;
color: #5a8509;
background: url(…/images/icon-01.png) 0 50% no-repeat;
padding-left: 10px;
}
.news-list ul li h4 i {
display: inline-block;
width: 25px;
height: 9px;
background: url(…/images/icon-02.jpg) no-repeat;
margin-left: 6px;
}
.news-list ul li h5 {
line-height: 20px;
padding-left: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 通知公告 */
.notice {
width: 282px;
height: 275px;
margin-top: 12px;
}
.notice-top {
border-bottom: 1px solid #dbdbdb;
height: 33px;
margin: 6px 6px 0;
}
.notice-top p {
height: 30px;
line-height: 30px;
border-bottom: 4px solid #2d7600;
float: left;
font-size: 16px;
color: #252525;
padding: 0 6px;
}
.notice-top .more {
line-height: 24px;
}
.notice-list {
padding: 4px 15px 0;
}
.notice-list ul li {
height: 35px;
line-height: 35px;
border-bottom: 1px dotted #a9adb3;
background: url(…/images/icon-01.png) 0 50% no-repeat;
padding-left: 10px;
}
/* 行业动态 */
.hydt {
width: 345px;
height: 275px;
margin-top: 12px;
}
.hydt-top {
height: 44px;
border-bottom: 1px solid #dbdbdb;
background: #ebf2dd;
}
.hydt-top p {
height: 41px;
line-height: 41px;
border-bottom: 4px solid #2d7600;
float: left;
font-size: 16px;
color: #252525;
padding: 0 16px;
}
.hydt-top .more {
color: #71a510;
font-weight: bold;
margin: 14px 10px 0 0;
}
.hydt-list ul li a {
display: inline-block;
width: 224px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hydt-list span {
float: right;
color: #5a8509;
}
.hdxx {
margin-left: 12px;
}
.cpzs {
background: url(…/images/product-bg.jpg) 152px 72px no-repeat;
}
.cpzs .notice-list {
width: 130px;
}
.cpzs .notice-list ul li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 广告位 */
.ad-box {
margin-top: 12px;
}
*reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ‘’;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
style.css
/*
- custom css reset
*/
html {
font-family: “微软雅黑”;
font-size: 12px;
color: #3e3e3e;
}
a {
color: #3e3e3e;
text-decoration: none;
}
a:hover {
color: #5a8509;
text-decoration: none;
}
ul, ol, li {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
img {
display: block;
border: none;
}
em, i {
font-style: normal;
}
.clear {
clear: both;
}
.clearfix:after {
content: ‘’;
display: block;
width: 0;
height: 0;
visibility: hidden;
clear: both;
}
/* reset END */
js
move.js
// 缓冲运动
function move(obj, json, callback){
// 清空定时器，保证运动框架只有一个定时器在运行
// 给节点对象，添加一个timer属性
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var state = 'ready'; // 假设都到了
for (var attr in json){
var cur = parseInt(getStyle(obj, attr));
// 处理速度 -> 越来越小
var speed = (json[attr] - cur) / 8;
// 对速度取整
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (json[attr] != cur){ // 当前的样式没到
state = 'stop';
}
if (attr == 'opacity'){
// chrome, FF
obj.style.opacity = (cur + speed)/100;
// IE
obj.style.filter = 'alpha(opacity: '+ (cur + speed) +')';
} else {
obj.style[attr] = cur + speed + 'px';
}
}
if (state == 'ready'){ // 真的全到了
clearInterval(obj.timer);
callback && callback();
}
}, 20);
}
// 获取元素的样式，兼容所有浏览器
function getStyle(obj, attr){
var res = 0;
if (window.getComputedStyle){ // chrome, FF
res = window.getComputedStyle(obj, false)[attr];
} else { // IE
res = obj.currentStyle[attr];
}
if (attr == ‘opacity’){
res *= 100;
}
return res;
}
nav.js
var nav = (function(){
// 提升变量
var aLiNodeList;
// 事件绑定
function bindEvent(){
for (var i = 0; i < aLiNodeList.length; i++){
// onmouseenter -> 鼠标划过事件，没有冒泡
aLiNodeList[i].onmouseenter = function(){
var obj = this.children[1];
console.log(obj);
if (!obj){
return;
}
// this.className = ‘selected’;
showXlNav(obj);
};
// onmouseleave -> 鼠标离开事件，没有冒泡
aLiNodeList[i].onmouseleave = function(){
var obj = this.children[1];
console.log(obj);
if (!obj){
return;
}
// this.className = ‘’;
hideXlNav(obj);
};
}
}
// 处理下拉导航的显示
function showXlNav(obj){
obj.style.height = '';
// 1. 让div显示
obj.style.display = 'block';
// 2. 获取div的实际高度
var iHeight = obj.offsetHeight;
// 3. 重设div的高度为 0
obj.style.height = 0;
// 4. 调用运动框架
move(obj, {
height: iHeight
});
}
// 处理下拉导航的隐藏
function hideXlNav(obj){
move(obj, {
height: 0
}, function(){
obj.style.display = 'none';
});
}
// 组件的入口
function init(oNav){
// 获取导航 LI 元素节点
// var oNav = document.getElementById(‘nav’);
// var aLiNodeList = oNav.children[0].children;
// var aLiNodeList = document.querySelectorAll(’#nav > ul > li’);
aLiNodeList = oNav.getElementsByTagName('li');
console.log(aLiNodeList);
bindEvent();
}
// 公开接口
return init;
})();
slider.js
/*
-
轮播图接口
-
参数：
-
slideImgWrapper: 轮播图大图容器(必传)
-
slideDotWrapper: 轮播图控制条容器(可选)
-
curIndex: 轮播图默认初始化索引(可选)
-
autoPlay: 轮播图是否自动播放(可选)
-
callback：回调函数(可选)
*/
var slider = (function(){
// 变量的提升
var params = {};// 处理参数
function setParams(option){
params.slideImgWrapper = option.slideImgWrapper;
params.slideDotWrapper = option.slideDotWrapper || null;
params.curIndex = option.curIndex || 0;
params.autoPlay = option.autoPlay || false;
params.callback = option.callback || null;params.timer = null; if (!params.slideImgWrapper){
// console.error(‘参数有误，slideImgWrapper 是一个必选参数！！！’);
throw new Error(‘参数有误，slideImgWrapper 是一个必选参数！！！’);
return;
}
// 获取必要的内部参数
params.slideLiList = params.slideImgWrapper.children;
params.len = params.slideLiList.length;
params.curIndex = params.curIndex > params.len - 1 ? params.len - 1 : params.curIndex;
params.curIndex = params.curIndex < 0 ? 0 : params.curIndex;
}
function slideInit(){
// 给当前的 Li 节点加 class
params.slideLiList[params.curIndex].className = 'current';
// 当前的 LI 透明度重设为 1
params.slideLiList[params.curIndex].style.opacity = 1;
params.slideLiList[params.curIndex].style.filter = 'alpha(opacity:100)';
// 其他的 Li 节点的透明度重设为 0
for (var i = 0; i < params.len; i++){
if (i != params.curIndex){
params.slideLiList[i].style.opacity = 0;
params.slideLiList[i].style.filter = 'alpha(opacity:0)';
}
}
// 初始化轮播图控制条
if (params.slideDotWrapper){
var str = '';
for (var i = 0; i < params.len; i++){
if (i == params.curIndex){
str += '<dd class="selected"></dd>';
} else {
str += '<dd></dd>'
}
}
params.slideDotWrapper.innerHTML = str;
// 获取小圆点的节点列表
params.slideDotList = params.slideDotWrapper.children;
}
}
function bindDotEvent(){
if (!params.slideDotWrapper){
return;
}
for (var i = 0; i < params.len; i++){
params.slideDotList[i].index = i;
params.slideDotList[i].onmouseenter = function(){
if (this.index == params.curIndex){
return;
}
params.curIndex = this.index;
// console.log(params.curIndex);
cutSlideState();
};
}
}
function cutSlideState(){
for (var i = 0; i < params.len; i++){
move(params.slideLiList[i], {opacity: 0});
params.slideLiList[i].className = '';
}
move(params.slideLiList[params.curIndex], {opacity: 100}, function(){
params.callback && params.callback(params.curIndex);
});
params.slideLiList[params.curIndex].className = 'current';
// 切换小圆点儿的状态
cutDotState();
}
function cutDotState(){
if (!params.slideDotWrapper){
return;
}
for (var i = 0; i < params.len; i++){
params.slideDotList[i].className = '';
}
params.slideDotList[params.curIndex].className = 'selected';
}
function play(){
if (!params.autoPlay){
return;
}
params.timer = setInterval(function(){
if (++params.curIndex > params.len - 1){
params.curIndex = 0;
}
cutSlideState();
}, 4000);
}
function stop(){
if (!params.autoPlay){
return;
}
clearInterval(params.timer);
}
function bindWrapperEvent(){
params.slideImgWrapper.parentNode.onmouseenter = function(){
stop();
};
params.slideImgWrapper.parentNode.onmouseleave = function(){
play();
};
}
// 组件的入口方法
function init(option){
// 处理参数
setParams(option);
// 初始化
slideInit();
// 事件绑定
bindDotEvent();
// 给轮播图外层容器绑定事件
bindWrapperEvent();
// 播放
play();
}
// 向外公开接口
return init;
})();
扫一扫
2474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
