本帖最后由 继续思索 于 2019-5-25 11:24 编辑
交一下作业，在请问一下各位鱼油，在轮播的时候，下边几个点，怎么不受控制的呢？<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>鱼C - 7周年庆典</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:#000;
margin:66px;
font-family: "Abadi MT Condensed Extra Bold";
color: rgba(255,255,255,.88);
text-align: center;
}
h1{
font-size: 55px;
align-content: center;
}
#show{
width:950px;
height:600px;
overflow:hidden;
margin:0 auto;
position:relative;
}
#show ul,#show ul li,#show-nav{
list-style:none;
position:absolute;
}
#show-nav{
width:100%;
bottom:22px;
text-align:center;
}
#show-nav span{
display:inline-block;
user-select:none;
border-radius:50%;
width:13px;
height:13px;
font-size:0;
background:rgba(255,255,255,.4);
transition:all .6s;
margin:0 7px;
cursor:hand;
}
#show-nav span.active{
background:#fff;
}
</style>
</head>
<body>
<h1>鱼C - 7周年庆典</h1>
<div id="show">
<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
</ul>
<div id="show-nav"></div>
</div>
<script type="text/javascript" src="../jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var duration = 3000;
var speed = 4000;
var width = $('#show').width();
var curIndex = 0;
var totalIndex = $('#show > ul > li').length;
var timer;
$('#show > ul > li').each(function(index) {
$(this).css("left", index*width+"px");
$('#show-nav').append("<span>"+(index+1)+"</span>");
});
$('#show-nav > span').each(function(index) {
$(this).attr("index", index);
$(this).click(function(){
curIndex = $(this).attr("index")-1;
clearTimeout(timer);
move();
});
$('#show-nav > span').eq(0).addClass("active");
var firstChild = $('#show > ul > li').eq(0).clone();
$('#show > ul').append(firstChild);
firstChild.css("left", totalIndex*width+"px");
function move(){
curIndex++;
if(curIndex>totalIndex){
curIndex = 1;
$('#show > ul').css("left", "0px");
}
for(var i=0; i < totalIndex; i++){
$('#show-nav > span').eq(i).removeClass("active");
}
if(curIndex === totalIndex){
$('#show-nav > span').eq(0).addClass("active");
}else{
$('#show-nav > span').eq(curIndex).addClass("active");
}
$('#show > ul').animate({left:width*curIndex*-1+"px"},speed);
timer = setTimeout(move,duration+speed);
}
timer = setTimeout(move,duration);
});
});
</script>
</script>
</body>
</html>
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2017-3-29 16:26:32
置顶卡
千斤顶
显身卡
发表于 2018-2-27 19:39:17
