0 1 0 1 - 打造“鱼C庆典”轮播窗

不二如是 · 发表于 2017-3-29 16:26:32

购买主题 已有 4 人购买 本主题需向作者支付 5 鱼币 才能浏览

AroundTheFire · 发表于 2018-2-27 19:39:17

that's coooool

继续思索 · 发表于 2019-5-25 11:22:57

本帖最后由继续思索于 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>

复制代码

登录/注册后可看大图

小脑斧 · 发表于 2020-4-29 21:57:23

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 53775 狗仔卡	发表于 2017-3-29 16:26:32 \| 显示全部楼层 \|阅读模式购买主题已有 4 人购买本主题需向作者支付 5 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 34
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

[庖丁解牛] 0 1 0 1 - 打造“鱼C庆典”轮播窗

本帖被以下淘专辑推荐: