<!doctype html>
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
text-align:center;
}
#banner{
width:230px;
height:54px;
margin:50px auto;
position:fixed;/*相对定位,相对于.btn按钮*/
top:100px;
float:right;
right: 2px;
text-align:left;
}
.pic image {
display:block;/*默认有图片不显示*/
position:absolute;/*绝对定位.对应的是.pic这个div*/
top:0px;
left:0px;
}
.pic a{
display:none;
}
.pic{ /*专门显现图片区*/
position:relative;/*相对定位.对应.pic img*/
border:1px solid red;
}
.btn{
width:150px;
height:18px;
position:absolute;/*绝对定位相对于banner div*/
bottom:5px;
right:290px;
}
.btn ul li{
background-color:#000000;/*黑色*/
color:#ffffff;
list-style-type:none;
width:18px;
height:18px;
float:left;
border-radius:9px;/*变成圆的*/
text-align:center;
line-height:18px;
cursor:pointer;/*鼠标移动变手指状态*/
margin-left:5px;
}
.btn ul li.one{
background-color:#ff9966;
}
</style>
<script src="jquery-3.0.0.min.js"></script>
<script>
$(function(){
$("#all li").mouseover(function(){//鼠标进入离开事件
$(this).css("background-color","#ff00ff").siblings().css("background-color","white");
$(this).css({"background-color":"red","font-size":"9px"}).siblings().hide();
});
$(window).scroll(function(){//鼠标滚动事件
var _top=$(window).scrollTop();//获得鼠标滚动的距离
});
//手动播放图片
$(".btn ul li").hover(function(){
$(this).addClass("one").siblings().removeClass("one");
index=$(this).index();
i=index;
$(".pic a").eq(index).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
});
//自动播放图片
var i=0;
var t=setInterval(autoplay,5000);
function autoplay(){
i++;
if(i>3)i=0;
$(".btn ul li").eq(i).addClass("one").siblings().removeClass("one");
$(".pic a").eq(i).stop().fadeIn(1000).show().siblings().stop().fadeIn(1000).hide();
}
$("#banner").hover(function(){
clearInterval(t);
},function(){
t=setInterval(autoplay,1000);
});
});
</script>
</head>
<body>
<!--<ul id="all">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
<li>第六个</li>
<li>第七个</li>
</ul>-->
<!--<div style="width:600px;height:900px;background-color:#ffcc66">ttt</div>-->
<div id="banner">
<div class="pic">
<a href="#" style="display:block"><img src="http://192.168.10.37/ruone/wp-content/uploads/sites/2/2018/07/beijing.jpg"/></a>
<a href="#"><img src="http://192.168.10.37/ruone/wp-content/uploads/sites/2/2018/07/22222.jpg" height="200"/></a>
<a href="#"><img src="http://192.168.10.37/ruone/wp-content/uploads/sites/2/2018/07/22222.jpg" height="200"/></a>
</div>
<div>
</div>
</body>
</html>
查看30道真题和解析
投递牛客等公司