自动轮播--面向对象实现方式
2017-07-11 14:33
281 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</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 = [
'<div class="d-img-frame" num="0">',
// '<div class="d-img-cell-shadow">@(bigImgTpl)</div>',
'<div class="d-img-cell">@(bigImgTpl)</div>',
'<div class="d-img-mask"></div>',
'</div>',
'<div class="d-img-arrow go-pre">',
'<a href="#" onclick="return false;" hidefocus="" class="arrow"></a>',
'</div>',
'<div class="d-img-arrow go-next">',
'<a href="#" onclick="return false;" hidefocus="" class="arrow"></a>',
'</div>',
'<div class="d-title-mask"></div>',
'<a class="d-title" href="@(url)" target="_blank" hidefocus>@(title)</a>',
'<div class="d-bars">@(smallImgTpl)</div>',
].join('')
//大图
,bigImg = [
'<a href="@(url)" class="d-img-link" target="_blank">',
'<img height="260" width="426" src="@(imgUrl)"/>',
'</a>'
].join('')
//小图
,smallImg = [
'<span class="@(curspan) d-small" num="@(num)">',
'<img class="d-small-img" height="40" width="68" src="@(imgUrl)"/>',
'<span class="d-small-mask"></span>',
'</span>'
].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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 简易选项卡面向对象加事件委托方式实现
- 面向对象方式解决比赛名单类问题（Java实现）
- SAPUI5 - JS面向对象继承方式的实现
- 面向对象方式实现二叉树算法
- Lua的面向对象实现方式
- 面向对象---基于组合的继承：属性的继承基于伪装的方式实现，而方法的继承基于原型链的方式继承。
- C#基础第八天-作业答案-设计类-面向对象方式实现两个帐户之间转账
- Javascript 对象方式实现命名参数调用（下）：自动包装偏函数
- 农场一头小母牛，每年生头小母牛，母牛5岁产母牛，20年上多少牛？--java面向对象方式实现
- JavaScript面向对象方式实现栈结构的字符串逆序
- java语句实现数据库的增删查改（面向对象方式，以student为例）
- J2ME中面向对象方式实现数据管理(RMS)
- 省市县三级联动插件（面向过程，面向对象两种方式实现）
- C#基础第八天-作业-设计类-面向对象方式实现两个帐户之间转账
- js面向对象实现图片轮播插件
- 轮播图原生js实现和jquery实现和js面向对象方式实现
- js面向对象实现无缝轮播图
- 实现WebForm下面的自动收集对象属性(与MVC下在的UpdateFrom一样)
- 《面向对象基础：C++实现》学习笔记之八
- 本文是笔者根据数据库编程经验，利用C++语言的模板、继承、授权、多态等面向对象特性，借鉴命令模式，实现了对象在关系数据中的存储，降低应用系统与数据库之间的耦合，提高开发效率。