Home Article Practice 敲代码

敲代码

2022-08-01 09:36  views:1497  source:顽皮小伊    

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@-webkit-keyframes bian{
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
*{
margin: 0px;
padding: 0px;
}
#main{
position: relative;
width: 715px;
height: 530px;
border: 1px solid #CBCBCA;
overflow: hidden;
margin: 0 auto;
}
#tu{
width: 9999px;
height: 530px;
position: absolute;
}
#tu img{
width: 715px;
height: 530px;
float: left;
}
#an{
position: absolute;
width: 100%;
bottom: 15px;
text-align: center;
}
li{
width: 20px;
height: 20px;
border-radius: 50%;
background: #ccc;
list-style: none;
display: inline-block;
}
.active{
background: red;
position: relative;
}
.active span{
width: 2px;
height: 10px;
background: white;
position: absolute;
left: 9px;
transform-origin: bottom;
animation: bian 2.5s linear backwards 1;
}
#xia{
width: 100%;
top: 50%;
margin-top: -30px;
position: absolute;
display: none;
}
#xia a{
width: 30px;
height: 60px;
text-decoration: none;
background: rgba(0,0,0,0.5);
font-size: 30px;
line-height: 60px;
text-align: center;
color: white;
float: left;
}
#xia #you{
float: right;
}
</style>
</head>
<body>
<div id="main">
<div id="tu">
<img src="img/mg1.jpg" alt="" />
<img src="img/mg2.jpg" alt="" />
<img src="img/mg3.jpg" alt="" />
<img src="img/mg4.jpg" alt="" />
<img src="img/mg5.jpg" alt="" />
<img src="img/mg6.png" alt="" />
</div>
<ul id="an">
<li class="btn active"><span></span></li>
<li class="btn"><span></span></li>
<li class="btn"><span></span></li>
<li class="btn"><span></span></li>
<li class="btn"><span></span></li>
<li class="btn"><span></span></li>
</ul>
<ul id="xia">
<a href="#" id="zuo">&lt;</a>
<a href="#" id="you">&gt;</a>
</ul>
</div>
<script type="text/javascript">
var main = document.getElementById('main');
var tu = document.getElementById('tu');
var btns = document.getElementsByClassName('btn');
var zuo = document.getElementById('zuo');
var you = document.getElementById('you');
var imgs = document.getElementsByTagName('img');
//按钮自动
var current = 0;
function selectedBtn(current){
document.getElementsByClassName('active')[0].className = 'btn';
btns[current].className = 'btn active';
}
//图片自动
var timer;
function selectedTu(index){
clearInterval(timer);
var currentLeft = tu.offsetLeft;
var img = imgs[index];
var targetLeft = -index*img.offsetWidth;
var start = 0;
var step = 30;
var change = targetLeft - currentLeft;
change = change/step;
timer = setInterval(function(){
start++;
var l = change + tu.offsetLeft;
if(start>=step){
l = targetLeft;
clearInterval(timer);
}
tu.style.left = l + 'px';
},30)
}
//自动播放
var ss = true;
setInterval(function(){
if(ss){
current++;
if(current>=btns.length){
current = 0;
}
selectedTu(current);
selectedBtn(current);
}
},3000);
//鼠标移动事件
for(var i = 0;i<btns.length;i++){
btns[i].index = i;
btns[i].onmouseover = function(){
current = this.index;
if(current>=btns.length){
current = 0;
}
selectedTu(current);
selectedBtn(current);
ss = false;
setTimeout(function(){
ss = true;
},3000)
}
}
//上下也点击事件
zuo.onclick = function(){
if(current<=0){
current = btns.length-1;
}
current--;
selectedTu(current);
selectedBtn(current);
ss = false;
}
you.onclick = function(){
current++;
if(current>=btns.length){
current = 0;
}
ss = false;
selectedTu(current);
selectedBtn(current);
}
//鼠标移进大框
main.onmouseover = function(){
document.getElementById('xia').style.display = 'block';
}
main.onmouseout = function(){
document.getElementById('xia').style.display = 'none';
}
</script>
</body>
</html>



Disclaimer: The above articles are added by users themselves and are only for typing and communication purposes. They do not represent the views of this website, and this website does not assume any legal responsibility. This statement is hereby made! If there is any infringement of your rights, please contact us promptly to delete it.

字符:    改为:
去打字就可以设置个性皮肤啦!(O ^ ~ ^ O)