Permalink
Browse files

Banner basic

  • Loading branch information...
1 parent c9b1e1b commit 54ef6e7f332b0072fece42bc86cba4b5e4ada1a1 unknown committed Apr 12, 2012
View
@@ -0,0 +1,84 @@
+@charset "utf-8";
+/* CSS Document */
+
+*{
+ margin:0;
+ padding:0;
+}
+
+div.container{
+ width:980px;
+ margin:0 auto;
+}
+
+div.banner{
+ width:980px;
+ height:570px;
+ overflow:hidden;
+ margin-top:20px;
+ position:relative;
+}
+
+div.banner div.scroll{
+ width:5000px; /* 5*980 (per img) */
+ height:534px;
+ position:absolute;
+ left:0;
+ top:0;
+ -webkit-transition:all 800ms;
+}
+
+div.banner div.scroll > div{
+ width:980px;
+ height:inherit;
+ float:left;
+ background-repeat:no-repeat;
+ background-position:left top;
+}
+
+div.banner div.scroll > div.adv1{
+ background-color:hsl(0,35%,35%);
+ background-image:url(images/b1.jpg);
+}
+div.banner div.scroll > div.adv2{
+ background-color:hsl(60,35%,35%);
+ background-image:url(images/b2.jpg);
+}
+div.banner div.scroll > div.adv3{
+ background-color:hsl(120,35%,35%);
+ background-image:url(images/b3.jpg);
+}
+div.banner div.scroll > div.adv4{
+ background-color:hsl(180,35%,35%);
+ background-image:url(images/b4.jpg);
+}
+div.banner div.scroll > div.adv5{
+ background-color:hsl(240,35%,35%);
+ background-image:url(images/b5.jpg);
+}
+
+div.banner ul.btn{
+ list-style-type:none;
+ width:200px;
+ position:absolute;
+ right:0;
+ bottom:0;
+}
+
+div.banner ul.btn li{
+ float:left;
+ width:30px;
+ height:10px;
+ margin-right:5px;
+ background-color:#333;
+ cursor:pointer;
+ -webkit-transition:all 800ms;
+}
+
+div.banner ul.btn li:hover,
+div.banner ul.btn li.active{
+ background-color:#39D;
+ height:18px;
+ margin-top:-8px;
+ -webkit-transition-duration:400ms;
+}
View
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Nixy Banner</title>
+<link type="text/css" rel="stylesheet" href="banner.css" />
+<script type="text/javascript" src="banner.js" ></script>
+</head>
+
+<body>
+<div class="container">
+ <div class="banner">
+ <div class="scroll">
+ <div class="adv1"></div>
+ <div class="adv2"></div>
+ <div class="adv3"></div>
+ <div class="adv4"></div>
+ <div class="adv5"></div>
+ </div>
+ <ul class="btn">
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ </ul>
+
+ </div>
+</div>
+</body>
+</html>
View
@@ -0,0 +1,18 @@
+
+window.onload=function(){
+
+ var bannerWidth = 980;
+
+ var divScrl = document.getElementsByClassName('banner').item(0).getElementsByClassName('scroll').item(0);
+
+ var liBtns=document.getElementsByClassName('banner').item(0).getElementsByClassName('btn').item(0).getElementsByTagName('li');
+
+ for(var i=0;i<liBtns.length;i++){
+ (function(i){
+ liBtns.item(i).onclick=function(){
+ divScrl.style.left= (-i*bannerWidth) + 'px';
+ }
+ })(i);
+ }
+
+}
Binary file not shown.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 54ef6e7

Please sign in to comment.