单张图片轮换

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>单独图片轮换 - 豪情</title>

    <style type="text/css">

        *{margin:0;padding:0;}

        body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#000;}

        table{border-collapse:collapse;border-spacing:0;}

        li{list-style:none;}

        fieldset,img{border:0;}

        article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}

        a:focus,input,textarea{outline-style:none;}

        textarea{resize:none}

        a{color:#0a8cd2;text-decoration:none;}

        a:hover{color:#f60;text-decoration:underline;}

        .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

        .clearfix{display:inline-block;}

        .clearfix{display:block;}

        .none{display:none}

        .demo{width:180px;height:210px;margin:40px auto;background:#fff;padding:25px;border:2px solid #ccc;border-radius:5px;}

        .scrollBox{display:inline;float:left;height:223px;position:relative;width:180px;overflow:hidden;}

        .prev,.next{background:url(http://images.cnitblog.com/blog/100150/201305/01234427-d9c492e118d040ffb59ec9d80955edbb.png) 0 0 no-repeat;}

        .prev{background-position:0 0;bottom:7px;cursor:pointer;display:inline-block;height:13px;position:absolute;right:20px;width:15px;z-index:99;}

        .next{background-position:-22px 0;bottom:7px;cursor:pointer;display:inline-block;height:13px;position:absolute;right:0;width:15px;z-index:99;}

        .control{display:inline;float:left;margin:0 auto;width:180px;}

        .control div{float:left;}

        #control_scroll{height:223px;overflow:hidden;position:relative;width:180px;}

        .pic{position:absolute;float:left;}

        .pic li{display:inline;float:left;text-align:left;width:180px;}

        .pic li img.lbimg{height:190px;margin:0 auto 12px;overflow:hidden;width:180px;}

    </style>

</head>

<body>

<!--http://sports.qq.com/photo/?pgv_ref=aio2012&ptlang=2052-->

<!--http://news.qq.com/base2011/ued_scroll.js-->

<div class="demo">

    <div class="scrollBox">

        <div id="prev" class="prev"></div>

        <div class="control" id="container">

            <ul class="pic">

                <li><a href="#"><img class="lbimg" alt="张蓝心登杂志秀美腿" src="http://img1.gtimg.com/sports/pics/hv1/235/122/1287/83718520.jpg" /><br />

                    张蓝心登杂志秀美腿</a> </li>

                <li><a href="#"><img class="lbimg" alt="潘晓婷蕾丝装身姿动人" src="http://img1.gtimg.com/sports/pics/hv1/242/122/1287/83718527.jpg" /><br />

                    潘晓婷蕾丝装身姿动人</a> </li>

                <li><a href="#"><img class="lbimg" alt="泛珠赛车宝贝清丽登场" src="http://img1.gtimg.com/sports/pics/hv1/249/122/1287/83718534.jpg" /><br />

                    泛珠赛车宝贝清丽登场</a> </li>

                <li><a href="#"><img class="lbimg" alt="CBA宝贝热舞助阵" src="http://img1.gtimg.com/sports/pics/hv1/24/188/1286/83670114.jpg" /><br />

                    CBA宝贝热舞助阵</a> </li>

                <li><a href="#"><img class="lbimg" alt="徐冬冬写真姿态优雅" src="http://img1.gtimg.com/sports/pics/hv1/237/122/1287/83718522.jpg" /><br />

                    徐冬冬写真姿态优雅</a> </li>

            </ul>

        </div>

        <div id="next" class="next"></div>

    </div>

</div>

<script type="text/javascript">

(function(window){

    function id(node){

        return typeof node == 'string' ? document.getElementById(node) : node;

    }

    function SingleSlide(obj){

        for(var p in obj){

            this[p] = id(obj[p]);

        }

        this.init.apply(this, arguments);

    }

    SingleSlide.prototype = {

        init : function(){

            var that = this,

                timer = null;

            this.oUl = this.container.getElementsByTagName('ul')[0];

            this.aLi = this.oUl.getElementsByTagName('li');

            this.iMaxWidth = this.aLi[0].offsetWidth;

            this.iNow = 0; // 当前标记

            var bigBox = this.container.parentNode;

            this.oUl.innerHTML += this.oUl.innerHTML;

            this.oUl.style.width = this.aLi[0].offsetWidth * this.aLi.length + 'px';

            timer = setInterval(function(){

                that.auto(that, that.oUl);

            }, 2000);

            this.prevBtn.onclick = function(){

                that.prev(that, that.oUl);

            }

            this.nextBtn.onclick = function(){

                 that.auto(that, that.oUl);

            }

            bigBox.onmouseover = function(){

                clearInterval(timer);

            }   

            bigBox.onmouseout = function(){

                timer = setInterval(function(){

                    that.auto(that, that.oUl);

                }, 2000);

            }

        },

        auto : function(obj, ul){

            obj.iNow++;

            if(obj.iNow >= obj.aLi.length){

                obj.iNow = 0;

            }

            obj.move(ul, -obj.iNow * obj.iMaxWidth);

        },

        prev : function(obj, ul){

            obj.iNow--;

            if(obj.iNow <= -1){

                obj.iNow = obj.aLi.length - 1;

            }

            obj.move(ul, -obj.iNow * obj.iMaxWidth);

        },

        move : function(obj, end){

            var that = this,

                iSpeed = 0;

            clearInterval(obj.timer);

            obj.timer = setInterval(function(){

                iSpeed = (end - obj.offsetLeft) / 5;

                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                obj.style.left = obj.offsetLeft + iSpeed + 'px';

            }, 30);

        }

    }

    new SingleSlide({

        container : 'container',

        prevBtn : 'prev',

        nextBtn : 'next'

    });

}(window));

</script>

</body>

</html>

 

你可能感兴趣的:(图片)