单张图片轮换

单独图片轮换，点击左右按钮，实现翻页效果。

<!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(//images0.cnblogs.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>


<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>

posted @ 2013-05-01 23:42 豪情阅读(2207) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

单张图片轮换

公告