Day10-作业
2018-08-26 本文已影响0人
晓晓的忍儿
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>
