Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Banner basic

  • Loading branch information...
commit 54ef6e7f332b0072fece42bc86cba4b5e4ada1a1 1 parent c9b1e1b
unknown authored
View
84 banner basic/banner.css
@@ -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
31 banner basic/banner.html
@@ -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
18 banner basic/banner.js
@@ -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);
+ }
+
+}
View
BIN  banner basic/images/Thumbs.db
Binary file not shown
View
BIN  banner basic/images/b1.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  banner basic/images/b2.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  banner basic/images/b3.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  banner basic/images/b4.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  banner basic/images/b5.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Please sign in to comment.
Something went wrong with that request. Please try again.