<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<style type="text/css">
*{margin: 0 auto;padding: 0;list-style: none;border: 0; text-align: center;}
body{background: url(baidu/bg.jpg); -webkit-background-size: cover;
background-size: cover;}
.logo{margin-top: 30px; display: block;}
.links{width: 740px; margin: 0 auto;}
.links a{color: #fff; margin-right: 10px;}
.search{margin-bottom: 40px; margin-top: 10px;}
.search input{width: 537px; height: 40px;}
.search button{width: 104px; height: 40px;}
.container{width: 911px;}
.menu{width: 80px; height: 318px; float: left; background: rgba(0,0,0,0.4);}
.menu span{width: 80px; height: 35px; line-height: 35px; color: #fff; display: inline-block; font-weight: bold; font-size: 14px;}
.menu span.choose{background: rgba(255,255,255,0.6) url(baidu/menu.png);}
.card{width: 813px; height: 318px; float: right; background: rgba(255,255,255,0.6) url(baidu/news.png) right top no-repeat; }
.loop-img{width: 426px; height: 218px; float: left; position: relative;}
.loop-img .d-img-frame{width: 426px; height: 260px; position: relative; overflow: hidden; white-space: nowrap;}
.loop-img .d-img-cell{position: absolute; left: 0; top: 0;}
.loop-img .d-img-cell a{display: inline-block; width: 426px; height: 260px; outline: none;}
.loop-img .d-img-cell img{position: relative; left: 0; top: 0;}
.loop-img .d-img-mask{width: 426px; height: 260px; position: absolute; top: 0; left: 0; cursor: pointer; background-color: #000; opacity: 0.3; transition: opacity 500ms;}
.loop-img.show-arrow .d-img-mask{opacity: 0; transition: opacity 500ms;}
.loop-img .d-img-arrow{position: absolute; top: 0; width: 40px; height: 260px; cursor: pointer;}
.loop-img .go-pre{left: 0;}
.loop-img .go-next{right: 0;}
.loop-img .arrow{position: absolute; width: 19px; height: 36px; top: 115px; left: 11px; display: block; background: url(img/arrow.png) no-repeat 1000px;}
.loop-img.show-arrow .go-pre .arrow{background-position: 0 0;}
.loop-img.show-arrow .go-next .arrow{background-position: -21px 0;}
.loop-img.show-arrow .go-pre:hover .arrow{background-position: -40px 0;}
.loop-img.show-arrow .go-next:hover .arrow{background-position: -61px 0;}
.loop-img .d-title-mask{position: absolute; top: 232px; height: 28px; left: 0; width: 426px; background: #000; opacity: 0.3;}
.loop-img .d-title{position: absolute; top: 232px; left: 0; height: 28px; display: block; color: #e6e6e6; text-indent: 15px; text-decoration: none; font-size: 16px; line-height: 30px;}
.loop-img .d-title:hover{text-decoration: none;}
.loop-img .d-bars{padding: 8px 0 0 15px; height: 50px; background-color: #191919; text-align: left;}
.loop-img .d-small{position: relative; text-align: left; width: 80px; display: inline-block;}
.loop-img .d-small-img{display: inline-block; height: 40px; width: 68px; border: 1px solid #191919;}
.loop-img .d-small-mask{display: inline-block; position: absolute; top: 0; left: 0; width: 70px; height: 42px; opacity: 0.45; background: #000; cursor: pointer; transition: opacity 500ms;}
.loop-img .current .d-small-mask,
.loop-img .d-small-mask:hover{opacity: 0; transition: opacity 500ms;}
.loop-img .current .d-small-img{border: 1px solid #289cff;}
style>
<script src='itcast.js'>script>
<script src="jquery-1.11.3.js">script>
<script type="text/javascript">
var imgData = [
{
url : 'http://photo.gmw.cn/2013-12/27/content_9938379.htm',
title : '新浪图片，年度盘点',
imgUrl : '1'
},
{
url : 'http://photo.gmw.cn/2013-12/27/content_9938379.htm',
title : '意大利回流茅台拍出78.2万',
imgUrl : '2'
},
{
url : 'http://photo.gmw.cn/2013-12/27/content_9938379.htm',
title : '绵阳舰在失联海域发现可疑漂浮物',
imgUrl : '3'
},
{
url : 'http://photo.gmw.cn/2013-12/27/content_9938379.htm',
title : '曝奶茶妹妹与70后京东掌门热恋',
imgUrl : '4'
},
{
url : 'http://photo.gmw.cn/2013-12/27/content_9938379.htm',
title : '抢购年代，不抢就没了',
imgUrl : '5'
}
];
script>
<script type="text/javascript">
$(function(){
var News = function(data){
this.data = data;
this.num = 0;
this.length = data.length;
this.timerBar = null;
this.init();
};
News.prototype = {
init : function(){
this.create();
this.bindEvent();
this.go();
},
create : function(){
var frameTpl = [
'',
'',
'',
'',
'@(title)',
'@(smallImgTpl)
',
].join('')
,bigImg = [
'',
')
',
''
].join('')
,smallImg = [
'',
'',
'',
''
].join(''),
bigTpl = '',
smallTpl = '';
for(var i = 0; i < this.data.length; i++){
this.data[i].curspan = i == 0 ? 'current' : '';
this.data[i].num = i;
this.data[i].imgUrl = 'img/' + this.data[i].imgUrl + '.jpg'
bigTpl += $$.formateString(bigImg, this.data[i]);
smallTpl += $$.formateString(smallImg, this.data[i]);
}
$('.loop-img').html($$.formateString(frameTpl, {
bigImgTpl : bigTpl,
smallImgTpl : smallTpl,
url : this.data[0].url,
title : this.data[0].title
}))
},
bindEvent : function(){
$('.loop-img').on('mouseenter', function(){
$('.loop-img').addClass('show-arrow');
}).on('mouseleave', function(){
$('.loop-img').removeClass('show-arrow');
});
},
stop : function(){
clearInterval(this.timerBar);
this.timerBar = null;
},
go : function(){
var that = this;
that.stop();
that.timerBar = setInterval(function(){
that.num++;
if(that.num >= that.length){
that.num = 0;
}
$('.d-img-cell').css('left', -that.num * 426 + 'px');
$('.d-title').attr('href', that.data[that.num].url).html(that.data[that.num].title);
var $small = $('.d-small').eq(that.num);
$('.d-small').removeClass('current');
$small.addClass('current');
}, 2000);
}
}
new News(imgData);
})
script>
<body>
<img class="logo" width="270" src="baidu/logo_white.png" alt="">
<p class="links">
<a href="http://news.baidu.com" target="_blank">新闻a>
<a href="http://www.baidu.com" target="_blank">网页a>
<a href="http://tieba.baidu.com" target="_blank">贴吧a>
<a href="http://zhidao.baidu.com" target="_blank">知道a>
<a href="http://music.baidu.com" target="_blank">音乐a>
<a href="http://image.baidu.com" target="_blank">图片a>
<a href="http://v.baidu.com" target="_blank">视频a>
<a href="http://map.baidu.com" target="_blank">地图a>
<a href="http://baike.baidu.com" target="_blank">百科a>
<a href="http://wenku.baidu.com" target="_blank">文库a>
<a href="http://www.baidu.com/more/" target="_blank">更多>>a>
p>
<div class="search">
<input type="text"><button>百度一下button>
div>
<div class="container">
<div class="menu">
<span>导航span>
<span class="choose">音乐span>
<span>新闻span>
div>
<div id="card" class="card"><div id="loop_img" class="loop-img">div>div>
div>
body>
html>
