zoukankan      html  css  js  c++  java
  • 单独图片轮换

    <!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(https://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>
    <!--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',
           //container : 'control',
            prevBtn : 'prev',
            nextBtn : 'next'
        });
    }(window));
    </script>
    </body>
    </html>
    View Code
     
    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Document</title>
      <style type="text/css">
        body{background:url("images/bg.jpg");}
        *{margin:0px;padding:0px;}
        #box{
            width:735px;height:350px;
            margin:50px auto;position:relative;
            background:#fff;
            }
        .con{
            width:735px;height:350px;overflow:hidden;
            }
        .con ul li{list-style-type:none;}
        .prev{
            width:45px;height:100px;
            position:absolute;left:0px;top:50%;margin-top:-50px;
            background:url("images/button.png");cursor:pointer;
            display:none;opacity:0.5;
            }
        .next{
            width:45px;height:100px;
            position:absolute;right:0px;top:50%;margin-top:-50px;
            background:url("images/button.png");
            background-position:-55px 0px;cursor:pointer;
            display:none;opacity:0.5;
            }
        .nav{
            width:720px;height:30px;
            position:absolute;left:50%;margin-left:-360px;
            bottom:10px;
            }
        .nav ul li{
            width:119px;height:30px;background:rgba(255,255,255,0.6);
            list-style-type:none;float:left;
            margin-right:1px;text-align:center;
            line-height:30px;font-size:12px;color:#333;cursor:pointer;
            }
        .nav ul .bg{background:rgba(0,0,0,0.6);color:#fff;}
      </style>
     </head>
     <body>
      <div id="box">
        <div class="con">
            <ul>
                <li><img src="images/1.jpg" /></li>
                <li><img src="images/2.jpg" /></li>
                <li><img src="images/3.jpg" /></li>
                <li><img src="images/4.jpg" /></li>
                <li><img src="images/5.jpg" /></li>
                <li><img src="images/6.jpg" /></li>
            </ul>
        </div>
        <div class="prev"></div>
        <div class="next"></div>
        <div class="nav">
            <ul>
                <li class="bg">春天赏花去</li>
                <li>疯狂特卖</li>
                <li>海岛错峰游</li>
                <li>三亚超值爆款</li>
                <li>春游要出境</li>
                <li>日韩赏樱</li>
            </ul>
        </div>
      </div>
      <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript">
        var i=0;
        var time=0;
        $("#box").hover(function(){
            $(".prev").fadeIn(300);
        },function(){
            $(".prev").fadeOut(300);
        })
        $("#box").hover(function(){
            $(".next").fadeIn(300);
        },function(){
            $(".next").fadeOut(300);
        })
        $(".nav ul li").hover(function(){
             i = $(this).index();
            $(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
            $(this).addClass("bg").siblings().removeClass("bg");
            clearInterval(time);
        },function(){
            time=setInterval("junmper()",3000);
        })
        $(".prev").click(function(){
            i--;
            if(i<0)
            i=5;
            $(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
            $(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");
        })
        $(".next").click(function(){
            i++;
            if(i>5)
            i=0;
            $(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
            $(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");
        })
        $(".prev").hover(function(){    
            clearInterval(time);
        },function(){
            time=setInterval("junmper()",3000);
        })
        $(".next").hover(function(){    
            clearInterval(time);
        },function(){
            time=setInterval("junmper()",3000);
        })
        function junmper(){
            i++;
            if(i>5)
            i=0;
            $(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
            $(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");
        }
        time=setInterval("junmper()",3000);
      </script>
     </body>
    </html>
    View Code
  • 相关阅读:
    cf D. Vessels
    cf C. Hamburgers
    zoj 3758 Singles' Day
    zoj 3777 Problem Arrangement
    zoj 3778 Talented Chef
    hdu 5087 Revenge of LIS II
    zoj 3785 What day is that day?
    zoj 3787 Access System
    判断给定图是否存在合法拓扑排序
    树-堆结构练习——合并果子之哈夫曼树
  • 原文地址:https://www.cnblogs.com/double405/p/5139936.html
Copyright © 2011-2022 走看看