HTML CODE:-
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="Image-Slider-Pager.js"></script>
<link rel="stylesheet" type="text/css" href="Image-Slider-Pager.css">
</head>
<body>
<div class="container">
<div class="slider_wrapper">
<ul id="image_slider">
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/1.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/5.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/1.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/5.jpg"></li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
<ul id="pager">
</ul>
</div>
</body>
</html>
CSS CODE:-
.container{
width:800px;
height:400px;
padding:20px;
border:1px solid gray;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background: black;
text-align: center;
}
.slider_wrapper{
overflow: hidden;
position:relative;
height:280px;
top:auto;
}
#image_slider{
position: relative;
height: auto;
list-style: none;
overflow: hidden;
float: left;
/*Chrom default padding for ul is 40px */
padding:0px;
margin:0px;
}
#image_slider li{
position: relative;
float: left;
}
.nvgt{
position:absolute;
top: 120px;
height: 50px;
width: 30px;
opacity: 0.6;
}
.nvgt:hover{
opacity: 0.9;
}
#prev{
background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/prev.png') no-repeat center;
left: 0px;
}
#next{
background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/next.png') no-repeat center;
right: 0px;
}
#pager{
/* firefox has different center method. this doesn't work for fire fox */
/* not in the center*/
padding:0px;
position:relative;
height:50px;
margin:auto;
margin-top:10px;
}
#pager li{
padding: 0px;
margin:5px;
width:20px;
height:20px;
border:1px solid white;
color:white;
list-style: none;
opacity: 0.6;
float:left;
border-radius: 3px;
cursor: pointer;
}
#pager li:hover{
opacity:0.9;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="Image-Slider-Pager.js"></script>
<link rel="stylesheet" type="text/css" href="Image-Slider-Pager.css">
</head>
<body>
<div class="container">
<div class="slider_wrapper">
<ul id="image_slider">
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/1.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/5.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/1.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg"></li>
<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/5.jpg"></li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
<ul id="pager">
</ul>
</div>
</body>
</html>
CSS CODE:-
.container{
width:800px;
height:400px;
padding:20px;
border:1px solid gray;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background: black;
text-align: center;
}
.slider_wrapper{
overflow: hidden;
position:relative;
height:280px;
top:auto;
}
#image_slider{
position: relative;
height: auto;
list-style: none;
overflow: hidden;
float: left;
/*Chrom default padding for ul is 40px */
padding:0px;
margin:0px;
}
#image_slider li{
position: relative;
float: left;
}
.nvgt{
position:absolute;
top: 120px;
height: 50px;
width: 30px;
opacity: 0.6;
}
.nvgt:hover{
opacity: 0.9;
}
#prev{
background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/prev.png') no-repeat center;
left: 0px;
}
#next{
background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/next.png') no-repeat center;
right: 0px;
}
#pager{
/* firefox has different center method. this doesn't work for fire fox */
/* not in the center*/
padding:0px;
position:relative;
height:50px;
margin:auto;
margin-top:10px;
}
#pager li{
padding: 0px;
margin:5px;
width:20px;
height:20px;
border:1px solid white;
color:white;
list-style: none;
opacity: 0.6;
float:left;
border-radius: 3px;
cursor: pointer;
}
#pager li:hover{
opacity:0.9;
}
JAVASCRIPT
//1. set ul width
//2. image when click prev/next button
var ul;
var liItems;
var imageNumber;
var imageWidth;
var prev, next;
var currentPostion = 0;
var currentImage = 0;
function init(){
ul = document.getElementById('image_slider');
liItems = ul.children;
imageNumber = liItems.length;
imageWidth = liItems[0].children[0].clientWidth;
ul.style.width = parseInt(imageWidth * imageNumber) + 'px';
prev = document.getElementById("prev");
next = document.getElementById("next");
generatePager(imageNumber);
//.onclike = slide(-1) will be fired when onload;
/*
prev.onclick = function(){slide(-1);};
next.onclick = function(){slide(1);};*/
prev.onclick = function(){ onClickPrev();};
next.onclick = function(){ onClickNext();};
}
function animate(opts){
var start = new Date;
var id = setInterval(function(){
var timePassed = new Date - start;
var progress = timePassed / opts.duration;
if (progress > 1){
progress = 1;
}
var delta = opts.delta(progress);
opts.step(delta);
if (progress == 1){
clearInterval(id);
opts.callback();
}
}, opts.delay || 17);
//return id;
}
function slideTo(imageToGo){
var direction;
var numOfImageToGo = Math.abs(imageToGo - currentImage);
// slide toward left
direction = currentImage > imageToGo ? 1 : -1;
currentPostion = -1 * currentImage * imageWidth;
var opts = {
duration:1000,
delta:function(p){return p;},
step:function(delta){
ul.style.left = parseInt(currentPostion + direction * delta * imageWidth * numOfImageToGo) + 'px';
},
callback:function(){currentImage = imageToGo;}
};
animate(opts);
}
function onClickPrev(){
if (currentImage == 0){
slideTo(imageNumber - 1);
}
else{
slideTo(currentImage - 1);
}
}
function onClickNext(){
if (currentImage == imageNumber - 1){
slideTo(0);
}
else{
slideTo(currentImage + 1);
}
}
function generatePager(imageNumber){
var pageNumber;
var pagerDiv = document.getElementById('pager');
for (i = 0; i < imageNumber; i++){
var li = document.createElement('li');
pageNumber = document.createTextNode(parseInt(i + 1));
li.appendChild(pageNumber);
pagerDiv.appendChild(li);
// add event inside a loop, closure issue.
li.onclick = function(i){
return function(){
slideTo(i);
}
}(i);
}
var computedStyle = document.defaultView.getComputedStyle(li, null);
//border width 1px; offsetWidth = 22
var liWidth = parseInt(li.offsetWidth);
var liMargin = parseInt(computedStyle.margin.replace('px',""));
pagerDiv.style.width = parseInt((liWidth + liMargin * 2) * imageNumber) + 'px';
}
window.onload = init;
No comments:
Post a Comment