码迷,mamicode.com
首页 > Web开发 > 详细

图片轮播,纯js+css

时间:2015-06-09 23:17:59      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
        body,div,ul,li,ol,dl,img{padding:0; margin:0; list-style:none;}
        .all{width:400px; height:307px; margin:50px auto;border:5px solid #ccc;position:relative;}
        .all div{ width:400px; height:307px;overflow:hidden; position:relative;}
        .all ul{height:307px; position:absolute; width:2000px;}
        .all ul li{width:400px; height:307px; overflow:hidden; float:left;}
        .all dl{position:absolute; top:40%; height:52px; z-index:20; width:440px; left:-20px; cursor:pointer;}
        .all dl dt{width:50px; height:52px; float:left; background:url(images/arr.png) no-repeat;}
        .all dl dd{width:50px; height:52px; float:right; background:url(images/arr.png) no-repeat right;}
        .all ol{width:100px; height:13px; bottom:-25px; left:45%; position:absolute;}
        .all ol li{height:13px; width:14px; background:url(images/00.png) no-repeat; float:left; margin-right:10px; cursor:pointer; overflow:hidden;}
        .all ol li.current{background-position:0 -26px;}
        #img_ul li img{width:400px;height:307px;}
    </style>
    <!--<script type="text/javascript" src="jquery-1.8.3.min.js"></script>-->
    <script type="text/javascript">

        /**
         *
         * //eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!‘‘.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return‘\\w+‘};c=1};while(c--){if(k[c]){p=p.replace(new RegExp(‘\\b‘+e(c)+‘\\b‘,‘g‘),k[c])}}return p}(‘$(6(){m a=0,b=0;$("o").7(6(){a++,a>4&&(a=1,$("5").d({2:0})),$("5").c().9({2:f*-a},e),b++,b>3&&(b=0),$("l k").g(b).i("j").h().8()}),$("n").7(6(){a--,0>a&&(a=3,$("5").d({2:-p})),$("5").c().9({2:f*-a},e),b--,0>b&&(b=3),$("l k").g(b).i("j").h().8()})});‘,26,26,‘||left|||ul|function|click|removeClass|animate|||stop|css|500|400|eq|siblings|addClass|current|li|ol|var|dt|dd|1600‘.split(‘|‘),0,{}))
         */

        window.onload = function(){
            var ulObj = document.getElementById(img_ul);
            var li_length = document.getElementById(img_ul).getElementsByTagName(li);
            var left_btn = document.getElementById(prev);
            var right_btn = document.getElementById(next);
            var botton_btn = document.getElementById(btton_btn);
            var icoBtn = botton_btn.getElementsByTagName(li);
            var baseWidth = li_length[0].offsetWidth;
            var toclick = true;
            var nowPos = 1;
            var timer = null;
//            console.log(li_length)
            sttimer();

            left_btn.onclick = function(){
                if(toclick){
                    clearInterval(timer);
                    move(nowPos-1);
                    sttimer();
                }
            };
            right_btn.onclick = function(){
                if(toclick){
                    clearInterval(timer);
                    move(nowPos+1);
                    sttimer();
                }
            }
            for(var i = 0; i < icoBtn.length;i++){
                icoBtn[i].onclick = function(i){
                    if(toclick){
                        clearInterval(timer);
                        move(nowPos+1);
                        sttimer();
                    }
                }
            }

            /**
             * 移动到当前位置索引
             * @param cIndex
             */
           function move(cIndex){
                toclick = false;
                var tt = null;
                var temp_o = 1;
                var count = 0;
                clearInterval(tt);
                tt = setInterval(function(){
                    if(count == 8){
                        clearInterval(tt);
                        temp_o = 0;
                        ulObj.style.opacity = 0;

                        if(li_length.length < cIndex){
                            //  跳入第一页
                            ulObj.style.left = -0px;
                            nowPos = 1;
                        }else if(cIndex <1){
                            //  跳入最后一页
                            ulObj.style.left = -+baseWidth*(li_length.length-1)+px;
                            nowPos = li_length.length;
                        }else {
                            //  下一页
                            ulObj.style.left = - + baseWidth * (cIndex - 1) + px;
                            nowPos = cIndex;
                        }
                        showcurrent(nowPos);

                        tt = setInterval(function(){
                            if(temp_o >= 1){
                                clearInterval(tt);
                                toclick = true;
                            }else{
                                ulObj.style.opacity = temp_o+0.1;
                                temp_o = temp_o+0.1;
                            }
                        },80);
                    }else{
                        ulObj.style.opacity = temp_o-0.1;
                        temp_o = temp_o-0.1;
                        count++;
                    }
                },80);
           }

           function showcurrent(cc){
               for(var i = 1; i <= icoBtn.length;i++){
                   icoBtn[i-1].className = ‘‘;
                   if(cc == i){
                       icoBtn[i-1].className = current;
                   }
               }
           }

           function sttimer(){
               timer = setInterval(function(){
                   move(nowPos+1);
               },5000);
           }

        }
    </script>
</head>
<body>
<div id="id" class="all">
    <div>
        <ul id="img_ul">
            <li class="current"><img src="images/01.jpg"/></li>
            <li><img src="images/02.jpg"/></li>
            <li><img src="images/03.jpg"/></li>
            <li><img src="images/04.jpg"/></li>
            <!--<li><img src="images/01.jpg"/></li>-->
        </ul>
    </div>
    <dl>
        <dt id="prev"><a href="#"></a></dt>
        <dd id="next"><a href="#"></a></dd>
    </dl>
    <ol id="btton_btn">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>

</div>
</body>
</html>

 

图片轮播,纯js+css

标签:

原文地址:http://www.cnblogs.com/yudishow/p/4564593.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!