87,993
社区成员
发帖
与我相关
我的任务
分享实在想不出来招了...上来问问...js轮播图
http://jsbin.com/gakekogato/edit?js,output
我仿了个起点中文网首页的轮播图 但是 他的没有这个前一张后一张功能,我现在想补全这个功能 但是有2个疑惑 一个是我这个轮播图的点击上一张的时候应该是执行animatePic()里面的else中但是轮播图在动画的时候为什么会出现白块,,,,还有第二个疑惑就是iNow的值并不是0-1-2这样开始的...
我仿了个起点中文网首页的轮播图 但是 他的没有这个前一张后一张功能,我现在想补全这个功能 但是有2个疑惑 一个是我这个轮播图的点击上一张的时候应该是执行animatePic()里面的else中但是轮播图在动画的时候为什么会出现白块,,,,还有第二个疑惑就是iNow的值并不是0-1-2这样开始的...
...全文
请发表友善的回复…
发表回复
djkloop555 2017-04-14
- 打赏
- 举报
next功能都是正常的就是这个prev功能折腾死我了
djkloop555 2017-04-14
- 打赏
- 举报
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>aaaaa</title>
<style>
body,
ul,
ol {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
img {
border: none;
vertical-align: top;
}
a {
display: block;
width: 50px;
height: 50px;
}
#box {
width: 470px;
height: 150px;
position: relative;
margin: 30px auto;
overflow: --hidden;
}
ul {
width: 470px;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
ul li {
width: 470px;
position: absolute;
top: 0;
height: 150px;
background-color: yellow;
}
ul li:nth-of-type(1){
background-color: red;
}
ul li:nth-of-type(2){
background-color: cyan;
}
ul li img {
display: block;
width: 470px;
height: 150px;
}
ol {
z-index: 2;
width: 120px;
position: absolute;
right: 10px;
bottom: 10px;
}
ol li {
width: 20px;
height: 20px;
float: left;
margin: 0 2px;
display: inline;
background: #fff;
color: #f60;
line-height: 20px;
text-align: center;
}
ol .active {
background: #f60;
color: #fff;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function() {
//选择ol li
var $olLi = $("ol li");
//选择ul li
var $ulLi = $("ul li");
//获取到一个li的宽度
var oneLiWidth = $ulLi.outerWidth();
//当前图片位置
var iNow = 0;
var delayTimer = null;
var autoTimer = null;
var $aNext = $("#next");
var $aPrev = $("#prev");
var flag = true;
function posPic() {
if (flag) {
$ulLi.slice(1).each(function() {
$(this).css('left', -oneLiWidth)
})
} else if (flag == false) {
$ulLi.slice(1).each(function() {
$(this).css('left', oneLiWidth)
})
}
}
posPic();
function go() {
if (flag) {
iNow++;
console.log(iNow)
} else if (flag == false) {
iNow--;
var index = $ulLi.eq(iNow).index();
iNow = index;
}
if (iNow > $ulLi.length - 1) {
iNow = 0;
}
animatePic(flag, iNow)
}
$aNext.on('click', function() {
console.log($ulLi.is(":animated"));
//防止多次点击
if ($ulLi.is(":animated")) {
return false;
}
next();
posPic();
auto();
})
$aPrev.on('click', function() {
//防止多次点击
if ($ulLi.is(":animated")) {
return false;
}
prev();
posPic();
console.log(flag);
auto();
})
function next() {
clearTimeout(delayTimer);
clearInterval(autoTimer);
flag = true;
go();
}
function prev() {
clearTimeout(delayTimer);
clearInterval(autoTimer);
flag = false;
go();
}
function animatePic(bol, iNow) {
if (bol) {
$('ol li').eq(iNow).addClass('active').siblings().removeClass('active');
//先把要点击的定位到左边
$ulLi.eq(iNow).css({
"left": oneLiWidth
});
$ulLi.eq(iNow).animate({
"left": 0
}, 1500).siblings().animate({
"left": -oneLiWidth
}, 1500);
} else {
console.log(flag + '7777');
posPic();
$('ol li').eq(iNow).addClass('active').siblings().removeClass('active');
//当前索引值
var _index = $ulLi.index();
console.log(_index)
console.log(iNow)
if (iNow < _index) {
//准备移动选的index图片定位到右边
$ulLi.eq(_index).css("left", oneLiWidth);
console.log('当前iNow=' + iNow + '当前->1 index=' + _index)
//判断当前的iNow值小于索引值从右到左
//让当前的图片移动到左边
$ulLi.eq(iNow).animate({
left: -oneLiWidth
}, 1500);
} else if (iNow > _index) {
//准备移动选的index图片定位到左边
$ulLi.eq(_index).css("left", oneLiWidth);
console.log('当前iNow=' + iNow + '当前->2 index=' + _index)
//判断当前的iNow值大于索引值从左到右
//让当前的图片移动到右边
$ulLi.eq(iNow).animate({
left: -oneLiWidth
}, 1500);
}
//让当前的图片从左边移动到右边
$ulLi.eq(_index).animate({
left: 0
}, 1500);
flag = true;
}
}
function auto() {
autoTimer = setInterval(go, 3000);
}
auto();
//给鼠标移动到当前的li加active
$olLi.on("mouseover", function() {
var _this = this;
clearTimeout(delayTimer);
clearInterval(autoTimer);
console.log(iNow);
delayTimer = setTimeout(function() {
$(_this).addClass('active').siblings().removeClass('active');
//当前索引值
var _index = $(_this).index();
if (iNow < _index) {
//准备移动选的index图片定位到右边
$ulLi.eq(_index).css("left", oneLiWidth);
console.log('当前iNow=' + iNow + '当前->1 index=' + _index)
//判断当前的iNow值小于索引值从右到左
//让当前的图片移动到左边
$ulLi.eq(iNow).animate({
left: -oneLiWidth
}, 1500);
} else if (iNow > _index) {
//准备移动选的index图片定位到左边
$ulLi.eq(_index).css("left", -oneLiWidth);
console.log('当前iNow=' + iNow + '当前->2 index=' + _index)
//判断当前的iNow值大于索引值从左到右
//让当前的图片移动到右边
$ulLi.eq(iNow).animate({
left: oneLiWidth
}, 1500);
}
//让当前的图片从左边移动到右边
$ulLi.eq(_index).animate({
left: 0
}, 1500);
//给iNow赋值
iNow = _index;
}, 400)
});
//鼠标离开的时候继续执行auto
$olLi.on("mouseout", function() {
console.log(iNow);
auto();
})
});
</script>
</head>
<body>
<div id="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<a id='next' href="javascript:;">next</a>
<a id='prev' href="javascript:;">prev</a>
</body>
</html>
前端Dylan 2017-04-14
- 打赏
- 举报
同问，在轮播的时候我想设置第三张为默认第一张滚动的怎么实现
当作看不见 2017-04-14
- 打赏
- 举报
上代码比较好说话一点。不然都不知所云
