分享2个自己写的轮播图 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sliderShow</title>
    <style>
        .container{
            position: relative;
            width: 1240px;
            margin:0 auto;
        }
        #pt>img:not(:first-child){
            position: absolute;
            top: 0;opacity: 0;
        }
        span{
            width: 13px;height: 13px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0);
            border:1px solid #fff;
            margin-right: 10px;
            display: inline-block;
        }
        span:first-child{
            background-color: rgba(255,255,255,1);
        }
        #sliderCicle{
            position: absolute;
            top: 450px;left: 620px;
            z-index: 1;
        }
        #prev{
            width: 30px;height: 60px;
            position: absolute;top: 40%;
        }
        #next{
            width: 30px;height: 60px;
            position: absolute;
            top: 40%;right: 0;
        }
    </style>
</head>
<body>
    <div id="slider">
        <div class="container">
            <div id="sliderCicle">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div id="pt">
                <img src="./images/1.jpg" alt="1">
                <img src="./images/2.jpg" alt="2">
                <img src="./images/3.jpg" alt="3">
            </div>
            <div id="prev">
                <img src="./images/l.png" alt="" style="margin-top:16px;">
            </div>
            <div id="next">
                <img src="./images/r.png" alt="" style="margin-top:16px;">
            </div>
        </div>
    </div>
</body>
    <script>
        var cicle = document.getElementsByTagName('span');
        var cont = document.getElementsByClassName('container')[0];
        var images = pt.getElementsByTagName('img');
        var prev=document.getElementById('prev');
        var next=document.getElementById('next');
        var index=0;
        var len = images.length;
        //写一个箭头背景促发事件
        cont.onmousemove=function(){
            prev.style.background="rgba(0,0,0,.6)";
            next.style.background="rgba(0,0,0,.6)";
        }
        cont.onmouseout=function(){
            prev.style.background="";
            next.style.background="";
        }
        //圆点触发事件
        for (var x = 0; x < cicle.length; x++) {
            (function(x){
                cicle[x].onmousemove=function()
                {
                    clearInterval(timer);
                    for (var i = 0; i < cicle.length; i++) {
                        cicle[i].style.backgroundColor='rgba(255,255,255,0)';
                        images[i].style.opacity = '0';
                    }
                    cicle[x].style.backgroundColor='rgba(255,255,255,1)';
                    images[x].style.opacity='1';
                    images[x].style.transition="1s";
                }
                cicle[x].onmouseout=function()
                {
                    index=x;
                    timer=setInterval(run,3000);
                    this.style.background='rgba(255,255,255,1)';
                }
            })(x)
        }
        var timer;
        timer  = setInterval(run,3000);
        function run(){
            images[index].style.opacity = '0';
            cicle[index].style.backgroundColor = 'rgba(255,255,255,0)';
            index = ++index == len ? 0 : index;
            images[index].style.opacity = '1';
            cicle[index].style.backgroundColor = 'rgba(255,255,255,1)';
            images[index].style.transition="1s";
        }
        // 箭头的函数
        function show(index)
        {
            for (var i = 0; i < cicle.length; i++) {
                cicle[i].style.backgroundColor = 'rgba(255,255,255,0)';
                images[i].style.opacity = '0';
            }
            cicle[index].style.backgroundColor = 'rgba(255,255,255,1)';
            images[index].style.opacity = '1';
            images[index].style.transition="1s";
        }
        prev.onclick=function()
        {
            index -=1;
            if (index < 0) {
                index = 2;
            }
            clearInterval(timer);
            show(index);
            timer=setInterval(run,3000);
        }
        next.onclick=function()
        {
            index +=1;
            if (index > 2) {
                index = 0;
            }
            clearInterval(timer);
            show(index);
            timer=setInterval(run,3000);
        }
    </script>
</html>

这几天做项目类似于天猫京东的商城，就粗略的写了一个轮播，比较简单，大家参考参考，js写的，哪里能优化大家可以指出来！当然了，用jQuery更简单，更快，利于项目的开发，项目不急自己写着玩也是不错的！

下面再分享一个自己写的手风琴轮播图！很多音乐软件上很常见的！看到觉得很有意思，于是自己也写了一个玩！原理其实很简单，通过操作json对象来实现原理！下面看具体代码，不懂的可以留言，当然可以更优化，大牛勿喷！

 

HTML代码：

　1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <link rel="stylesheet" href="../css/css.css">
  7 </head>
  8 <body>
  9     <div class="wrap" id="wrap">
 10            <div class="slide" id="slide">
 11            <ul>
 12                <li><a href="#"><img src="../images/slidepic1.jpg" alt=""/></a></li>
 13                <li><a href="#"><img src="../images/slidepic2.jpg" alt=""/></a></li>
 14                <li><a href="#"><img src="../images/slidepic3.jpg" alt=""/></a></li>
 15                <li><a href="#"><img src="../images/slidepic4.jpg" alt=""/></a></li>
 16                <li><a href="#"><img src="../images/slidepic5.jpg" alt=""/></a></li>
 17                <li><a href="#"><img src="../images/slidepic9.jpg" alt=""/></a></li>
 18            </ul>
 19            <div class="arrow" id="arrow">
 20                <a href="javascript:;" class="prev"></a>
 21                <a href="javascript:;" class="next"></a>
 22            </div>
 23            </div>
 24     </div>
 25 </body>
 26     <script src="../js/animate.js"></script>
 27     <script>
 28     //获取元素
 29         var arrow=document.getElementById('arrow');
 30         var wrap=document.getElementById('wrap');
 31         var slide=document.getElementById('slide');
 32         var lis=slide.getElementsByTagName('li');
 33     //写大盒子的事件，鼠标放上盒子，箭头出现
 34         wrap.onmouseover=function()
 35         {
 36             animate(arrow,{opacity:100});
 37         }
 38         wrap.onmouseout=function()
 39         {
 40             animate(arrow,{opacity:0});
 41         }
 42     //用json为每一个图片写属性
 43         var json=[
 44         {
 45             //1
 46             width:400,
 47             top:20,
 48             left:50,
 49             opacity:20,
 50             zIndex:3
 51         },
 52         {
 53             //2
 54             width:550,
 55             top:60,
 56             left:0,
 57             opacity:80,
 58             zIndex:4
 59         },
 60         {
 61             //3
 62             width:700,
 63             top:100,
 64             left:200,
 65             opacity:100,
 66             zIndex:5
 67         },
 68         {
 69             //4
 70             width:550,
 71             top:60,
 72             left:600,
 73             opacity:80,
 74             zIndex:4
 75         },
 76         {
 77             //5
 78             width:400,
 79             top:20,
 80             left:750,
 81             opacity:20,
 82             zIndex:3
 83         },
 84         {
 85             //6
 86             width:400,
 87             top:0,
 88             left:400,
 89             opacity:10,
 90             zIndex:2
 91         }
 92         ];
 93     //接着写点击事件，先判断哪个箭头被单击，接着用animate函数完成特效
 94         var as=arrow.children;
 95         var jieliu=true;//设置节流的作用是为了照顾ie浏览器，对DOM的操作会占用内存，限制了在一定时间内最多执行的次数，减少占用浏览器的资源，页面元素很多时，不节流有可能会造成页面崩溃！
 96         change();
 97         for (var i = 0; i < as.length; i++) 
 98         {
 99             as[i].onclick=function(){
100                 if (this.className=='prev') 
101                 {
102                     if (jieliu==true) 
103                     {
104                         change(true);
105                         jieliu = false;   //点击完毕之后立马取反
106                     }
107                 }
108                 else
109                 {
110                     if (jieliu==true) 
111                     {
112                         change(false);
113                         jieliu = false;
114                     }
115                 }
116             }
117         }
118     //写一个传参的函数
119         function change(f)
120         {
121             if (f) 
122             {
123                 json.push(json.shift());//思路：
124                 //移出第一个，放到json的最后一个，只对json进行操控，其实就是把第一个json[attr]给删了，然后呢现在json[0]的一项就变成了以前的第二项也就是json[1]；所以第一张图片就接受了之前的json[1]的属性，他们之间位置什么的有变化啊，就产生了这样的轮播效果！
125                 
126                 //push():向数组的末尾添加一个或多个元素，并返回新的长度
127                 //shift():用于把数组的第一个元素从其中删除，并返回第一个元素的值
128             }
129             else
130             {
131                 //把最后一个json  删除 ，并且把最后一个添加到Json的第一个位置上去
132                 json.unshift(json.pop());
133                 //unshift():代表向数组的开头添加一个或更多元素，并返回新的长度
134                 //pop()：代表删除并返回数组的最后一个元素
135             }
136             for(var i = 0; i<json.length;i++)
137             {
138                 animate(lis[i],{
139                     width:json[i].width,
140                     // height:json[i].height,
141                     top:json[i].top,
142                     left:json[i].left,
143                     opacity:json[i].opacity,
144                     zIndex:json[i].zIndex
145                 },function(){jieliu=true});
146             }
147         }
148     </script>
149 </html>

CSS代码：

 1 @charset "UTF-8";
 2 /*初始化  reset*/
 3 blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
 4 body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
 5 ol,ul{list-style:none}
 6 a{text-decoration:none}
 7 fieldset,img{border:0;vertical-align:top;}
 8 a,input,button,select,textarea{outline:none;}
 9 a,button{cursor:pointer;}
10 
11 .wrap{
12     width:1200px;
13     margin:50px auto;
14 }
15 .slide {
16     height:500px;
17     position: relative;
18 }
19 .slide li{
20     position: absolute;
21     left:200px;
22     top:0;
23 }
24 .slide li img{
25     width:100%;
26     height: 100%;
27 }
28 .arrow{
29     opacity: 0;
30     position: relative;
31     z-index:100;
32 }
33 .prev,.next{
34     width:76px;
35     height:112px;
36     position: absolute;
37     top:200px;
38     /*margin-top:-56px;*/
39     background: url(../images/prev.png) no-repeat;
40     z-index: 99;
41 }
42 .next{
43     right:0;
44     background-image: url(../images/next.png);
45 }

JavaScript封装函数代码：

 1 // 多个属性运动框架  添加回调函数
 2 function animate(obj,json,fn) {  // 给谁    json
 3     clearInterval(obj.timer);
 4     obj.timer = setInterval(function() {
 5         var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
 6         for(var attr in json){   // attr  属性     json[attr]  值
 7             //开始遍历 json
 8             // 计算步长    用 target 位置 减去当前的位置  除以 10
 9             // console.log(attr);
10             var current = 0;
11             if(attr == "opacity")
12             {
13                 current = parseInt(getStyle(obj,attr)*100);
14             }
15             else
16             {
17                 current = parseInt(getStyle(obj,attr)); // 数值
18             }
19             // console.log(current);
20             // 目标位置就是  属性值
21             var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
22             step = step > 0 ? Math.ceil(step) : Math.floor(step);
23             //判断透明度
24             if(attr == "opacity")  // 判断用户有没有输入 opacity
25             {
26                 if("opacity" in obj.style)  // 判断 我们浏览器是否支持opacity
27                 {
28                     // obj.style.opacity
29                     obj.style.opacity = (current + step) /100;
30                 }
31                 else
32                 {  // obj.style.filter = alpha(opacity = 30)
33                     obj.style.filter = "alpha(opacity = "+(current + step)+")";
34                     console.log(current);
35                 }
36             }
37             else if(attr == "zIndex")
38             {
39                 obj.style.zIndex = json[attr];
40             }
41             else
42             {
43                 obj.style[attr] = current  + step + "px" ;
44             }
45 
46             if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
47             {
48                 flag =  false;
49             }
50         }
51         if(flag)  // 用于判断定时器的条件
52         {
53             clearInterval(obj.timer);
54             //alert("ok了");
55             if(fn)   // 很简单   当定时器停止了。 动画就结束了  如果有回调，就应该执行回调
56             {
57                 fn(); // 函数名 +  （）  调用函数  执行函数
58             }
59         }
60     },5)
61 }
62 function getStyle(obj,attr) {  //  谁的      那个属性
63     if(obj.currentStyle)  // ie 等
64     {
65         return obj.currentStyle[attr];  // 返回传递过来的某个属性
66     }
67     else
68     {
69         return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
70     }
71 }

 

posted @ 2016-10-11 20:51  cfsgogo  阅读(530)  评论(0)  编辑  收藏  举报