js转编网上jq的幻灯片案例

    最近在学习css3属性元素过程中，看到transition属性讲的一个实例幻灯片的写法全过程，觉得挺好玩的，我这边就想着能不能根据这个步骤下来吧jq代码部分改编成js的呢？？事实证明完全可行，接下来我先贴下，原jq幻灯片地址：

http://www.w3cplus.com/content/css3-transition

    当然所有这些css3属性学习测试我都是基于谷歌和火狐下的，最终我在ie8下面做了下测试，实际仍能播放，但是那种美妙的过渡效果已经没有了。。

    这边我写好后的最终界面图如下：

    上面这些圆角，阴影效果都是直接css实现的，所以如果你也想看到这些效果，还是使用火狐和谷歌浏览器吧~~~

    

    好了，其实大致就是这样吧，接下来我先贴上js代码了：

<script language="javascript">
/*
***obj对象是获取好的对象
***arrt是所要获取节点的class名称 
***return 出来的是一个数组所以如果想要获取单个class那么必须在后面跟上第几个 
***var oBox=getClass(obj,'banner')[0]这是赋值获取到的第一个class 
*/
function getClass(obj,attr){
var aArray=[];//定义一个新的空数组
var i=0;
var aAll = obj.getElementsByTagName('*');//获取obj对象下面所有的节点
for(i=0;i<aAll.length;i++){
if(aAll[i].className == attr){//判断当前对象的class名称是不是符合传进来的参数
aArray.push(aAll[i]);//如果符合则push到到aArray数组里边
}
}
return aArray;//最后return一下
} 

var currentSlideNum = 0;
var slide  = document.getElementById("demoSlider");
var slides = getClass(document ,"slide-image");                                                   //获取图片数组
var slidesCurrntName = slides[0].className;                                                      //图片的固定样式名                                                     
var slidePages = getClass(document ,"slide-pager")[0].getElementsByTagName("a");  //document.getElementsByClassName("slide-pager")[0].getElementsByTagName("a");   //获取页码，获取某个class里面的dom子节点,ie8提示对象不支持此属性或者方法

//初始化图片按钮样式
slides[currentSlideNum].className = slides[0].className + " current";
slidePages[currentSlideNum].className = "current";


var goToSlide = function(slideNum){                                                             //播放切换特效。

slides[currentSlideNum].className = slidesCurrntName;
slides[slideNum].className = slidesCurrntName + " current";
//alert(slides[slideNum].style.zIndex)
slidePages[currentSlideNum].className = "";
slidePages[slideNum].className = "current";
currentSlideNum = slideNum;
};

var nextSlide = function(){
var nextSlideNum = currentSlideNum + 1;
if(nextSlideNum >= slides.length){
nextSlideNum = 0;
}

goToSlide(nextSlideNum);
};

var prevSlide = function(){
var prevSlideNum = currentSlideNum - 1;
if(prevSlideNum < 0){
prevSlideNum = slides.length - 1;
}
goToSlide(prevSlideNum);
};



var lastHumanNav = 0;
var clicknow = function(){
lastHumanNav = new Date().getTime();
}


document.getElementById("nextSlide").onclick = function(){ 
nextSlide(); 
clicknow();
};
document.getElementById("prevSlide").onclick = function(){ 
prevSlide(); 
clicknow();
};

//页码点击事件
for(var i=0; i<slidePages.length; i++){
slidePages[i].onclick = function(i){ 
return function(){
clicknow();
goToSlide(i);
} 
}(i);
}

setInterval(function(){
var now = new Date().getTime();
if(now - lastHumanNav > 5000){
nextSlide();
}
} ,5000);
</script>

getClass是我网上搜索的一个获取class的函数，挺好用的；然后图片切换的思路就是上一张的透明度为0下一张的变为1，把z-index设大点盖住上一张图片就好了，只要一个current样式就成，goToSlide里面就是交换current样式的函数，其他点击效果各自写成函数，供判断就成了。。还有万年不变的setInterval来实现自动播放特效，，

O(∩_∩)O哈哈~其实跟着jq的代码一步一步往下走才真的发现js也并不是那么难的说嘛~~~

    接下来我就直接放我写好的资源地址了，毕竟html和css可能大部分都不是很有耐心看的

http://download.csdn.net/detail/eadio/7561713    

    如果你还有耐心的话，接着往下走~~

    下面html代码：

<div id="demoSliderContainer">
<ul id="demoSlider" class="slide-images transition-opacity">
<li class="slide-image">
<img src="images/01.jpg" alt="01" />
<span>01</span>
</li>

<li class="slide-image">
<img src="images/02.jpg" alt="02" />
<span>02</span>
</li>

<li class="slide-image">
<img src="images/03.jpg" alt="03" />
<span>03</span>
</li>

<li class="slide-image">
<img src="images/04.jpg" alt="04" />
<span>04</span>
</li>

<li class="slide-image">
<img src="images/05.jpg" alt="05" />
<span>05</span>
</li>
</ul>

<div class="options">
<a href="javascript:;" class="prevSlide" id="prevSlide">Prev</a>

<span class="slide-pager" id="slide-pager">
<a href="javascript:;" class="">1</a>
<a href="javascript:;" class="">2</a>
<a href="javascript:;" class="">3</a>
<a href="javascript:;" class="">4</a>
<a href="javascript:;" class="">5</a>
</span>

<a href="javascript:;" class="nextSlide" id="nextSlide">Next</a>
</div>
</div>

就是分俩框架，按钮一层，图片放一层

    然后是css：

*{ margin:0; padding:0;}
#demoSliderContainer{
background:#000;
-webkit-box-shadow:1px 1px 5px #000;
  -moz-box-shadow:1px 1px 5px #000;
-ms-box-shadow:1px 1px 5px #000;
-o-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
padding:0;
overflow:auto;
margin:10px auto;
width:560px;
}
#demoSlider{
border:solid 1px #000;
border-width:5px 5px 0;
height:220px;
width:550px;
list-style:none;
margin:0 auto;
overflow:hidden;
position:relative;
}
.slide-images .slide-image{ position:absolute;}
.slide-images .slide-image img{ z-index:2;}
.slide-images .slide-image span{
background:rgba(0 ,0 ,0 ,.3);
-webkit-border-radius:5px 0 0 0;
  -moz-border-radius:5px 0 0 0;
-ms-border-radius:5px 0 0 0;
-o-border-radius:5px 0 0 0;
border-radius:5px 0 0 0;
bottom:4px;
color:rgba(255 ,255 ,255 ,.8);
font-size:14px;
font-weight:bold;
padding:5px 10px;
position:absolute;
right:0;
z-index:3;
}
.slide-images .silde-image.current img{ z-index:12;/*不懂为什么ie没有识别到*/}
.slide-images .silde-image.current span{ z-index:13;}
#demoSliderContainer .options{
paddint:3px 10px;
text-align:center;
}
#demoSliderContainer .options a{
color:#91becc;
font:bold 12px "Georgia,Serif";
text-decoration:none;
}
#demoSliderContainer .options a:hover{ color:#d3e5eb;}
#demoSliderContainer .slide-pager a{
-webkit-transition-duration:0.5s;
  -moz-transition-duration:0.5s;
-ms-transition-duration:0.5s;
-o-transition-duration:0.5s;
transition-duration:0.5s;
}
#demoSliderContainer .slide-pager a.current{
background-color:#91becc;
border-radius:5px 5px 5px 5px;
color:black;
padding:0 4px;
}
#demoSliderContainer .options .prevSlide{ float:left;}
#demoSliderContainer .options .nextSlide{ float:right;}

/*effect*/
.slide-images .slide-image,
.slide-images .slide-image img{
-webkit-transition-duration:1.5s;
  -moz-transition-duration:1.5s;
-ms-transition-duration:1.5s;
-o-transition-duration:1.5s;
transition-duration:1.5s;
}
.slide-images.transition-opacity .slide-image{
opacity:0;
width:0;
}
.slide-images.transition-opacity .slide-image.current{
opacity:1;
width:550px;
z-index:12;/*重新设定一遍*/
}

#options{ margin:20px auto; padding:5px; width:550px;}

    主要用的css3属性是box-shadow和box-radius还有就是选择属性transition这几个属性啦，当然如果你有更炫的效果，欢迎加入进去！！