html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta keyword="左右轮播图-效果比较好">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script type="text/javascript" src="js/animate.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<div class="w-slider" id="js_slider">
<div class="slider">
<div class="slider-main" id="slider_main">
<div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/6.jpg" alt=""></a></div>
</div>
</div>
<div class="slider-ctrl" id="slider_ctrl">
<span class="slider-ctrl-prev"></span>
<span class="slider-ctrl-next"></span>
</div>
</div>
<script>
</script>
</body>
</html>
主要css代码:
.w-slider{
width: 310px;
height: 265px;
background-color: pink;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.slider{
width: 310px;
height: 220px;
}
.slider-main{
width: 620px;
height: 310px;
}
.slider-main img{
vertical-align: top;
}
.slider-main-img{
position: absolute;
top: 0;
left: 0;
}
.slider-ctrl{
text-align:center;
padding-top: 8px;
}
.slider-ctrl-con{
display: inline-block;
width: 24px;
height: 20px;
background-color: blue;
margin: 0 5px;
background: url(../images/icon.png) no-repeat -24px -782px;
cursor: pointer;
text-indent: -20em;
overflow: hidden;
}
.slider-ctrl .current{
background-position: -24px -762px;
}
.slider-ctrl-prev,.slider-ctrl-next{
position: absolute;
top: 50%;
margin-top: -35px;
display: inline-block;
width: 30px;
height: 35px;
background: url(../images/icon.png) no-repeat 6px top;
opacity: 0.8;
cursor: pointer;
}
.slider-ctrl-prev{
left: 0;
}
.slider-ctrl-next{
right: 0;
background-position: -6px -44px;
}
主要js代码(slider.js):
window.onload = function(){
function $(id){ return document.getElementById(id);}
var js_slider = $("js_slider");
var slider_main = $("slider_main");
var imgs = slider_main.children;
var slider_ctrl = $("slider_ctrl");
for(var i = 0; i< imgs.length; i++){
var span = document.createElement("span");
span.className = "slider-ctrl-con";
span.innerHTML = imgs.length - i;
slider_ctrl.insertBefore(span,slider_ctrl.children[1]);
}
var spans = slider_ctrl.children;
spans[1].setAttribute("class","slider-ctrl-con current");
var scrollWidth = js_slider.clientWidth;
for(var i=1; i<imgs.length; i++){
imgs[i].style.left = scrollWidth + "px";
}
var iNow = 0;
for(var k in spans){
spans[k].onclick = function(){
if(this.className == "slider-ctrl-prev"){
animate(imgs[iNow],{left: scrollWidth});
iNow = --iNow < 0 ? imgs.length-1 : iNow;
imgs[iNow].style.left = -scrollWidth + "px";
animate(imgs[iNow],{left:0});
setSquare();
}else if(this.className == "slider-ctrl-next"){
animate(imgs[iNow],{left: -scrollWidth});
iNow = (++iNow) % imgs.length;
imgs[iNow].style.left = scrollWidth + "px";
animate(imgs[iNow],{left:0});
setSquare();
}else{
var clickIndex = this.innerHTML - 1;
if(clickIndex > iNow){
animate(imgs[iNow],{left: -scrollWidth});
imgs[clickIndex].style.left = scrollWidth + "px";
}else if(clickIndex < iNow){
animate(imgs[iNow],{left: scrollWidth});
imgs[clickIndex].style.left = -scrollWidth + "px";
}
iNow = clickIndex;
animate(imgs[iNow],{left:0});
setSquare();
}
}
}
function setSquare(){
for(var i=1; i<spans.length-1; i++){
spans[i].className = "slider-ctrl-con";
}
spans[iNow+1].className = "slider-ctrl-con current";
}
var timer =null;
timer = setInterval(autoPlay,2000);
function autoPlay(){
animate(imgs[iNow],{left: -scrollWidth});
iNow = (++iNow) % imgs.length;
imgs[iNow].style.left = scrollWidth + "px";
animate(imgs[iNow],{left:0});
setSquare();
}
js_slider.onmouseover = function(){
clearInterval(timer);
}
js_slider.onmouseout = function(){
clearInterval(timer);
timer = setInterval(autoPlay,2000);
}
}
缓动动画js代码:(animate.js)
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr];
}
}
function animate(obj,json,fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true;
for(var attr in json){
var current = 0;
if(attr == "opacity")
{
current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
console.log(current);
}
else
{
current = parseInt(getStyle(obj,attr));
}
var step = ( json[attr] - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(attr == "opacity")
{
if("opacity" in obj.style)
{
obj.style.opacity = (current + step) /100;
}
else
{
obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";
}
}
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else
{
obj.style[attr] = current + step + "px" ;
}
if(current != json[attr])
{
flag = false;
}
}
if(flag)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
},30)
}