Day10-作业

1.移动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择</title>
        <script src="jquery/jquery-1.11.3.min.js">
            
        </script>
    </head>
    <body>
        <select multiple="1" size="7" id='sel1' name="selel" style="margin-right: 32px;width: 200px;">
            <option value="" >北京</option>
            <option value="">天津</option>
            <option value="">吉林</option>
            <option value="">大连</option>
            <option value="">河北</option>
        </select>
        <select multiple="1" size="7" id="sel2" name="seler" style="width: 200px;" >
            <option value="">成都</option>
            <option value="">昆明</option>
            <option value="">贵州</option>
            <option value="">广东</option>
            <option value="">广西</option>
        </select>
        <br />
        <button id='but_1' style="display: inline-block;margin-left: 50px;">向右边移动</button>
        <button id='but_2' style="display: inline-block;margin-left: 150px;">向左边移动</button>
    </body>
</html>
<script>
    $('#but_1').click(function(){
        for (var i=0;i<($('select:first option')).length;i++){
            if($('select:first option').eq(i).prop('selected')){
                $('#sel2').append($('select:first option').eq(i))
                i-=1
            }
        }
    })
    $('#but_2').click(function(){
        for (var i=0;i<($('#sel2 option')).length;i++){
            if($('#sel2 option').eq(i).prop('selected')){
                $('#sel1').append($('#sel2 option').eq(i))
                i-=1
            }
        }
    })
</script>

2.选项卡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            自动选项卡
        </title>
        <script src="jquery/jquery-1.11.3.min.js">
            
        </script>
        <style>
        .box {
            width: 1000px;
            border: 1px solid gray;
            margin: 0 auto;
        }
        button {
            width: 170px;
            height: 100px;
            font-size: 20px;
            background-color: pink;
            margin-left: 55px;
            display: inline-block;
        }
        .box > div {
            width: 970px;
            height: 600px;
            font-size: 50px;
            background-color: yellow;
            margin-left: 15px;
            margin-top: 50px;
            display: none;
        }
        .box > .active {
            font-size: 30px;
            background-color: blue;
        }
        .box > .show {
            display: block;
        }
        </style>
    </head>
    <body>
        <div class="box">
            <button class="active">少司令</button>
            <button>星魂</button>
            <button>天明</button>
            <button>项羽</button>
            <div class='show'><img style="width: 970px;height: 600px;" src="img/q2.jpg"/></div>
            <div><img style="width: 970px;height: 600px;" src="img/q3.jpg"/></div>
            <div><img style="width: 970px;height: 600px;" src="img/q4.jpg"/></div>
            <div><img style="width: 970px;height: 600px;" src="img/q5.jpg"/></div>
        </div>
            
    </body>
</html>
<script type="text/javascript">
    $(function(){
        var obox=$('.box')
        var obuttons=$('.box button')
        var odivs=$('.box div')
        var number=0
        for(var i=0;i<obuttons.length;i++){
            var ob_timer=null
            obuttons.eq(i).mouseover(function(){
                var i_index=$('button').index($(this))
                flag=false
                ob_timer=setInterval(function(){
                    if(flag){
                        flag=false
                        obuttons.eq(i_index).addClass('active').siblings().removeClass('active')
                        odivs.eq(i_index).addClass('show').siblings().removeClass('show')
                    }
                    flag=true   
                },500)
                number=i_index-1
            })
            obuttons.eq(i).mouseout(function(){
                clearInterval(ob_timer)
            })
        }
        function method1(){
            number++
            number%=4
            obuttons.eq(number).addClass('active').siblings().removeClass('active')
            odivs.eq(number).addClass('show').siblings().removeClass('show')    
        }
        var timer=setInterval(method1,1000)
        $('.box').mousemove(function(){
            clearInterval(timer)
        })
        $('.box').mouseout(function(){
            timer=setInterval(method1,1000)
        })
    })
</script>

3.汽车

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0;margin:0;list-style:none;}
.clearfix:after{display:block;content:'';clear:both;}
.box{width:360px;height:212px;margin:0 auto;position:relative;overflow: hidden;}
.ul_list{position:absolute;bottom:20px;left:50%;margin-left:-65px;}
.ul_list li{float:left;width:20px;height:20px;background:#fff;border-radius:50%;margin-left:5px;border:2px solid red;}
.pic{width:1800px;}
.pic>img{float:left;display:none ;}
.pic>.show{display: block;}
.ul_list .active{width:20px;height:20px;background:red;border-radius:50%;margin-left:5px;border:2px solid #fff;}
</style>

<script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
    <div class="box">
        <div class="pic clearfix" id='pic'>
            <img src="img/1.jpg" class="show"/>
            <img src="img/2.jpg" />
            <img src="img/3.jpg" />
            <img src="img/4.jpg" />
            <img src="img/5.jpg" />
        </div>
        <ul class="ul_list" id='ul_btn'>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>
<script>
    
    $(function(){
        var olis=$('.box li')
        var oimgs=$('.box img')
        for(var i=0;i<olis.length;i++){
            olis.eq(i).mouseover(function(){
                $(this).addClass('active').siblings().removeClass('active')
                oimgs.eq($('.box li').index($(this))).addClass('show').siblings().removeClass('show')
            })
        }
    })
</script>

4.爱奇艺

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    *{ padding:0; margin:0; list-style:none;}
    .piclist{ height:410px; width:100%; position:relative;}
    .piclist li{height:410px; opacity:0; width:100%; position:absolute; top:0; left:0;}
    .li1{ background:url(img/bg.jpg) center; }
    .li2{ background:url(img/bg1.jpg) center; }
    .li3{ background:url(img/bg2.jpg) center; }
    .li4{ background:url(img/bg3.jpg) center; }
    .li5{ background:url(img/bg4.jpg) center; }
    .li6{ background:url(img/bg5.jpg) center; }
    .li7{ background:url(img/bg6.jpg) center; }
    .li8{ background:url(img/bg7.jpg) center; }
    .li9{ background:url(img/bg8.jpg) center; }
    .li10{ background:url(img/bg9.jpg) center; }
    .btnlist{ width:200px; height:300px; padding:14px 18px 40px; background:url(img/site-focuslist_bg.png); position:absolute; top:0; right:30px;}
    .btnlist li{ height:33px; line-height:33px; }
    .btnlist a{ color:#FFF; font-size:12px; text-decoration:none; display:block; padding-left:10px;}
    .active{ background:#396;}
    .piclist .show{ opacity:1;}
</style>
<script src="jquery/jquery-1.11.3.min.js"></script>
</head>

<body>
    <ul class="piclist" id="pic">
        <li class="li1 show"></li>
        <li class="li2"></li>
        <li class="li3"></li>
        <li class="li4"></li>
        <li class="li5"></li>
        <li class="li6"></li>
        <li class="li7"></li>
        <li class="li8"></li>
        <li class="li9"></li>
        <li class="li10"></li>
    </ul>
    <ol class="btnlist" id="btn">
        <li class="active"><a href="#">超模：MISS亲授维密性感秘籍</a></li>
        <li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
        <li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
        <li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
        <li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
        <li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
        <li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
        <li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
        <li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
        <li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
    </ol>
</body>
</html>

<script type="text/javascript">
    
    $(function(){
        var number=0
        var olis=$('.btnlist li')
        var oimgs=$('.piclist li')
        var timer=null
        for(var i=0;i<olis.length;i++){
            olis.eq(i).mouseover(function(){
                var i_index=$('.btnlist li').index($(this))
                olis.eq(i_index).addClass('active').siblings().removeClass('active')
                var flag=false
                timer=setInterval(function(){
                    oimgs.eq(i_index).stop().animate({opacity: 1},500).siblings().stop().animate({opacity: 0},500)
                },700)
//              $(this).addClass('active').siblings().removeClass('active')
//              oimgs.eq($('.btnlist li').index($(this))).stop().animate({opacity: 1},500).siblings().stop().animate({opacity: 0},500)
            })
            olis.eq(i).mouseout(function(){
                clearInterval(timer)
            })
        }
    })
</script>