做出来这玩意,发现生疏的还是CSS;虽然可以弄出来;但是感觉速度很渣渣!

实现原理;固定一个background;然后图片平铺;DIV为内容区;和PS做内容区是一样的了;

然后分为左右两个区域;距离顶部都是有一段距离的,可以保持美感;

右边是一个文字,下面一个大的DIV,然后DIV里面套ul。套LI;

 

左边是DIV里面分为N个小DIV;为了让他们来回滚动;把大的DIV高度固定了,然后宽度做的很大;然后做个overflover是hidden的属性;这样就有一个假象了;

移动端也做过一次的,移动端当时做的如下:

http://taobao.fm/works/youku2/detail.html

这个轮播图很简单的;听网友说像智能社的公开视频中,有一个轮播图的方法,那个做的很完美了;下次要去学习下;

这个是轮播图+定时器;很简单的效果;

HTML代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>图片轮换效果</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="mp-banner" class="mp-banner">
<!--内容区-->
<div id="j-banner" class="mp-banner-wrap">
<!--左边的栏目-->
<div class="mp-banner-inner">
<ul class="mp-banner-ct" id="mp-banner-ct">
<li class="mp-banner-item">
<div class="mp-banner-front">
<img width="237" height="163" alt="剑宗" src="img/1.jpg" class="mp-banner-img">
<div class="mp-banner-footer2">
<span class="num">1</span>
<h3>剑宗</h3>
<span class="role">角色扮演</span>
</div>
<span class="openGame">开始游戏</span>
<p class="mp-banner-intro">大型3D武侠修仙网页游戏,全视角3D战斗!</p>
</div>
</li>
<li class="mp-banner-item">
<div class="mp-banner-front">
<img width="237" height="163" alt="剑宗" src="img/2.jpg" class="mp-banner-img">
<div class="mp-banner-footer2">
<span class="num">2</span>
<h3>剑宗</h3>
<span class="role">角色扮演</span></div>
<span class="openGame">开始游戏</span>
<p class="mp-banner-intro">大型3D武侠修仙网页游戏,全视角3D战斗!</p>
</div>
</li>
<li class="mp-banner-item">
<div class="mp-banner-front">
<img width="237" height="163" alt="剑宗" src="img/3.jpg" class="mp-banner-img">
<div class="mp-banner-footer2">
<span class="num">3</span>
<h3>剑宗</h3>
<span class="role">角色扮演</span></div>
<span class="openGame">开始游戏</span>
<p class="mp-banner-intro">大型3D武侠修仙网页游戏,全视角3D战斗!</p>
</div>
</li>
<li class="mp-banner-item">
<div class="mp-banner-front">
<img width="237" height="163" alt="剑宗" src="img/4.jpg" class="mp-banner-img">
<div class="mp-banner-footer2">
<span class="num">4</span>
<h3>剑宗</h3>
<span class="role">角色扮演</span></div>
<span class="openGame">开始游戏</span>
<p class="mp-banner-intro">大型3D武侠修仙网页游戏,全视角3D战斗!</p>
</div>
</li>
<li class="mp-banner-item">
<div class="mp-banner-front">
<img width="237" height="163" alt="剑宗" src="img/5.jpg" class="mp-banner-img">
<div class="mp-banner-footer2">
<span class="num">5</span>
<h3>剑宗</h3>
<span class="role">角色扮演</span></div>
<span class="openGame">开始游戏</span>

<p class="mp-banner-intro">大型3D武侠修仙网页游戏,全视角3D战斗!</p>
</div>
</li>
<li class="mp-banner-item">
<div class="mp-banner-front">
<img width="237" height="163" alt="剑宗" src="img/6.jpg" class="mp-banner-img">
<div class="mp-banner-footer2">
<span class="num">6</span>
<h3>剑宗</h3>
<span class="role">角色扮演</span></div>
<span class="openGame">开始游戏</span>

<p class="mp-banner-intro">大型3D武侠修仙网页游戏,全视角3D战斗!</p>
</div>
</li>
</ul>
</div>
<!--侧边栏的-->
<div id="j-banner-side" class="mp-banner-aside">
<h3 class="title">大家都爱玩</h3>
<ul class="list">
<li class="list-item">
<a target="_blank" href="javascript:;">
<img alt="大天使之剑" src="img/s1.jpg" class="pic">
<div class="txt">
<h4 class="name">大天使之剑</h4>
<p class="role">战争策略</p>
<p class="platform">37游戏</p>
</div>
</a>
</li>
<li class="list-item">
<a target="_blank" href="javascript:;">
<img alt="大天使之剑" src="img/s2.jpg" class="pic">
<div class="txt">
<h4 class="name">大天使之剑</h4>
<p class="role">战争策略</p>
<p class="platform">37游戏</p>
</div>
</a>
</li>
<li class="list-item">
<a target="_blank" href="javascript:;">
<img alt="大天使之剑" src="img/s3.jpg" class="pic">
<div class="txt">
<h4 class="name">大天使之剑</h4>
<p class="role">战争策略</p>
<p class="platform">37游戏</p>
</div>
</a>
</li>
</ul>
</div>
<!--两个箭头的-->
<div class="mp-banner-pager">
<div class="mp-banner-pager-prev OP_LOG_LINK" id="mp-banner-pager-prev">
<i class="arrow-left mp-png"></i>
</div>
<div class="mp-banner-pager-next OP_LOG_LINK" id="mp-banner-pager-next">
<i class="arrow-right mp-png"></i>
</div>
</div>
</div>
<!--背景-->
<div class="mp-banner-bg"></div>
</div>
<div>
<h3 id="home_top">网络游戏轮播图 - Powered By <a href="http://taobao.fm/"target="_blank">broszhu</a>  博客网址:<a href="http://taobao.fm/" target="_blank">taobao.fm</a> </h2>
<p id="home_bottom">学习JavaScript是一件很有趣的事,可以做出很多自豪的小玩意!--broszhu (这个页面是实现原理:<a href="#" target="_blank">点此查看</a></p>
</div>
<script src="js/js.js"></script>
</body>
</html>

CSS代码如下:

/* 清楚样式*/
@charset "utf-8";
/* Broszhu - taobao.fm */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;-webkit-user-select: none;}
img{border:none;}
ul,ol{list-style:none;}
input,select,textarea{outline:none; border:none; background:#FFF;}
textarea{resize:none;}
a{text-decoration:none;}
/*清浮动*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
/*盒子大小*/
.mp-banner{position: relative;height: 303px;}
/*盒子内容*/
.mp-banner-wrap{width: 980px;height: 303px;position: relative;margin: 0 auto;}
/*左侧*/
.mp-banner-inner{position: relative;top:20px;width: 757px;height: 282px;float: left;display: block;overflow: hidden;}
.mp-banner-inner .mp-banner-ct{width: 20000px;}
.mp-banner-inner .mp-banner-ct li{float: left;width: 237px;height: 283px;margin-right: 23px;}
/*左侧内容*/
.mp-banner-item .mp-banner-front{width: 237px;height: 238px;}
.mp-banner-item .mp-banner-front img{cursor: pointer;}
.mp-banner-link {width: 237px;height: 238px;display: block;position: absolute;}
.mp-banner-footer2{width: 237px;height: 57px;float: left;}
.mp-banner-footer2 .num{font-size: 48px;color:#fff;float: left;margin-right: 10px;}
.mp-banner-footer2 h3{display: block;font-size: 18px;padding: 8px 0 0 10px;color: #FFF;}
.mp-banner-footer2 .role{display: block;font-size: 14px;padding-top: 5px;color: orange;}
.mp-banner-item .mp-banner-front .openGame{display: inline-block;width: 75px;height: 28px;line-height: 28px;text-align: center;background: orange;border-radius: 2px;color: #FFF;position: relative;left: 160px;top: -42px;cursor: pointer;}
.mp-banner-intro{display: block;font-size: 14px;color: #FFF;position: relative;top:-25px;}
/*右侧*/
.mp-banner-aside{position: relative;top:20px;width:200px;height: 282px;margin-left: 780px;}
.mp-banner-aside .title{width: 200px;height: 36px;line-height: 36px;text-align: center;background: #4f4f4f;color: #FFF;font-size: 16px;}
.list{width: 200px;height: 246px;overflow: hidden;}
.list .list-item{width: 200px;height: 82px; background: #323232;}
.list .list-item:hover{background: #000;}
.list .list-item .pic{width: 76px;height: 64px;position: relative;top:9px;left: 9px;float: left;}
.list .list-item .txt{width: 105px;height: 75px;padding-left:95px;}
.list .list-item .txt .name{width: 105px;height: 22px;padding-top:12px;color: #FFF;font-size: 14px;}
.list .list-item .txt .role{width: 105px;height: 12px;color: #999;font-size: 12px;}
.list .list-item .txt .platform{width: 105px;height: 22px;line-height:22px;color: #ee7116;font-size: 12px;}
/*2个箭头的*/
.mp-banner-pager{width: 757px;height: 140px;position: absolute;top: 20px;padding-top: 50px;}
.mp-banner-pager-prev{width: 65px;height:65px;background:url("../img/banner-arrow.png")no-repeat 0 -225px;float: left;cursor: pointer;}
.mp-banner-pager-next{width: 65px;height:65px;background:url("../img/banner-arrow.png")no-repeat 0 -160px;float: right;cursor: pointer;}
/*盒子背景*/
.mp-banner-bg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background:url(../img/banner-bg-red.jpg) repeat;z-index: -2;}
/*页脚的标注*/
#home_top {height: 48px;line-height:48px;font-size:18; text-align: center; color:#008CD7;}
#home_bottom {color:#008CD7;text-align:center;font-size:14px;}

JavaScript代码如下:

var box = document.getElementById('j-banner'),
prev = document.getElementById('mp-banner-pager-prev'),
next = document.getElementById('mp-banner-pager-next'),
list = document.getElementById('mp-banner-ct'),
items = list.getElementsByTagName('li'),
li = items[0];
//初始化值;
var now = 0,
timer = null,
flag = false;
//显示区域的定位
list.style.position = 'relative';
list.style.width = '20000px';
list.style.left = '0px';

prev.onclick = function(){
if(now == 0){
for(var i = 3; i < 6; i++){
move(items[i], -1560);
}
!flag && act(list, 'left', (li.clientWidth + 23) * 3, function(){
for(var i = 3; i < 6; i++){
clear(items[i]);
}
list.style.left = '-780px';
flag = true;
});
flag = false;
now += 3;
} else {
act(list, 'left', (li.clientWidth + 23) * 0);
now = 0;
}
};
next.onclick = function(){
if(now == 0){
act(list, 'left', -(li.clientWidth + 23) * 3);
now += 3;
} else {
for(var i = 0; i < 3; i++){
move(items[i], 1560);
}
act(list, 'left', -(li.clientWidth + 23) * 6, function(){
for(var i = 0; i < 3; i++){
clear(items[i]);
}
list.style.left = '0';
});
now = 0;
}
};

box.onmouseover = function(){
prev.style.display = 'block';
next.style.display = 'block';
clearInterval(timer);
};
box.onmouseout = function(){
prev.style.display = 'none';
next.style.display = 'none';
timer = setInterval(play, 4000);
};

function auto(){
timer = setInterval(play, 4000);
}
function play(){
next.onclick();
}
auto();


function act(obj, attr, target, fn){
obj.timer && clearInterval(obj.timer);
obj.timer = setInterval(function(){
doMove(obj, attr, target, fn);
}, 20);

var d = new Date();
if (d.getTime() - obj.lastMove > 30) {
doMove(obj, attr, target, fn);
}
}

function doMove(obj, attr, target, fn){
var cur = 0;
cur = parseInt(obj.style[attr]);
var speed = (target - cur) / 8;
var stop = true;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(cur != target){
stop = false;
obj.style[attr] = cur + speed + 'px';
}
if(stop){
clearInterval(obj.timer);
obj.timer = null;
fn && fn();
}

obj.lastMove = (new Date()).getTime();
}

function move(obj, val){
obj.style.position = 'relative';
obj.style.left = val + 'px';
}
function clear(obj){
obj.removeAttribute('style');
}

····