您的位置：首页 > Web前端 > JavaScript

js 幻灯片

2016-12-26 13:54 218 查看

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

*{ margin: 0; padding: 0;}

ul,li{ list-style-type: none;}

.slider,.slider img{ width:500px; height:500px;}

.slider{ position: relative; overflow: hidden;}

.slider ul{ position: absolute; top:0; left: 0; }

.slider ul li{float:left;}

.slider ol{ position: absolute; bottom: 5px;left:0; width:100%; text-align: center;}

.slider ol li{width:20px; height:20px;display: inline-block; text-indent: -9999px; border-radius: 50%; background: #fff; opacity: 0.8; margin: 0 2px; cursor: pointer;}

.slider ol li.cursor{ box-shadow: 0 0 5px #abcdef; background: #abcdef; opacity: 1;}

</style>

</head>

<body>

<div class="slider">

<ul>

<li><img src="01.png"></li>

<li><img src="02.jpg"></li>

<li><img src="01.png"></li>

<li><img src="02.jpg"></li>

<li><img src="01.png"></li>

<li><img src="02.jpg"></li>

</ul>

</div>

<script type="text/javascript">

function Slider(){

this.slider=document.getElementsByClassName("slider")[0];

this.time=2000;

this.objul=this.slider.childNodes[1];

this.elem_child = this.objul.childNodes;

this.Sliderwidth=this.slider.offsetWidth;

this.num=slider_lenght(this.objul);

this.objul.style.width=this.num*this.Sliderwidth+"px";

//添加元素

var obj=document.createElement("ol");

for(var i=0;i<this.num;i++){

objli=document.createElement("li");

objli.setAttribute("onclick","clickli(this,"+i+")");

obj.appendChild(objli);

}

this.slider.appendChild(obj);

this.objol=this.slider.childNodes[3];

this.objol.childNodes[0].setAttribute("class","cursor");

this.slidermove=settimemove(this.objul,this.num,this.time,this.Sliderwidth);

}

function clickli(element,index){

var inum=element.parentNode.childNodes.length;

for(var i=0;i<inum;i++){

element.parentNode.childNodes[i].removeAttribute("class");

}

element.setAttribute("class","cursor");

var objul=element.parentNode.parentNode.childNodes[1];

var Sliderwidth=element.parentNode.parentNode.offsetWidth;

objul.style.left=(-index*Sliderwidth)+"px";

//objul.style.transition="all "+(time/2000)+"s ease";

}

function settimemove(objul,num,time,Sliderwidth){

var objol=objul.parentNode.childNodes[3];

var i=0;

var timeId=null;

timeId=setInterval(mt_silder,time);

objul.parentNode.onmouseover=function(){

clearInterval(timeId);

}

objul.parentNode.onmouseout=function(){

timeId=setInterval(mt_silder,time);

}

function mt_silder(){

if(i>=(num-1)){

i=0;

}else{

i++;

}

var inum=objol.childNodes.length;

for(var is=0;is<inum;is++){

objol.childNodes[is].removeAttribute("class");

}

objol.childNodes[i].setAttribute("class","cursor");

objul.style.left=(-i*Sliderwidth)+"px";

objul.style.transition="all "+(time/2000)+"s ease";

}

}

function slider_lenght(obj){

var elem_child = obj.childNodes;

var num=0;

for(var i =0 ; i<elem_child.length;i++){

if(elem_child[i].nodeName!="#text"){

num++;

}

}

return num;

}

var s=new Slider();

s.slidermove;

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航