美文网首页
自写无缝图片轮播,求给意见

自写无缝图片轮播,求给意见

作者: Josephlong | 来源:发表于2017-06-23 16:31 被阅读0次

var tim=setInterval(show,2000);

function show()

{

$('a').map(function(k,v)

{

if(!$(this).is(':animated'))

{

var a=$(this).position().left;

// console.log(a);

a-=700;

$(this).animate({'left':+a+'px'},300);

}

if(a<=-1400)

{

$(this).animate({'left':'2800px'},0);

}

})

}

function Show()

{

$('a').map(function(k,v)

{

if(!$(this).is(':animated'))

{

var a=$(this).position().left;

console.log(a);

a+=700;

$(this).animate({'left':+a+'px'},300);

}

if(a>=3500)

{

$(this).animate({'left':'-700px'},0);

}

})

}

$('#lunbo').mouseenter(function()

{

// clearInterval(tim);

// if(!$('a').is(':animated')){

clearInterval(tim);

console.log('aaaaaaaa');

// }

})

$('#lunbo').mouseleave(function()

{

// if(!$('a').is(':animated')){

console.log('aa2222222a');

// clearInterval(tim);

tim=setInterval(show,2000);

// }

})

$('#zuo').click(function()

{

show();

})

$('#you').click(function()

{

Show();

})

相关文章

  • 自写无缝图片轮播,求给意见

    var tim=setInterval(show,2000); function show() { $('a')....

  • task31 进阶:把轮播改成无缝轮播吧

    1. 无缝的轮播怎么做 什么是无缝轮播? 从第一张到倒数第二张图片还好,但是从最后一张图片到第一张图片就有问题了,...

  • 轮播

    无缝轮播 css需要让图片或者文本水平排列,overflow:hidden隐藏其他图片 整体图片向左/右偏移,就会...

  • css3实现无缝轮播图片

    实现思路: 需求: 实现三张图片无缝轮播 1: 定义一个父级div , 这个div的宽度为轮播图片元素的宽度 本文...

  • 普通轮播和无缝轮播

    普通轮播 原理:将图片当作一个横向的整体,根据translateX的变化,实现左右移动。 重构前 重构后 无缝轮播...

  • 无缝轮播和图片抖动

    图片抖动

  • vue 图片轮播-无缝渐变

    效果展示 html css js vue中用到了transition标签:关于transition

  • 无缝轮播

    无缝细解过程 html css js 无缝轮播js切换动画 css代码 JS代码 循环无缝轮播 CSS js1.首...

  • 最简单的无缝轮播

    昨天学习了轮播的原理,今天再来看看无缝轮播的技术。 昨天学习的轮播机制类似于走马灯,所有图片排成一排,轮流在你眼前...

  • 轮播图集合

    无缝轮播图(图片连在一起,超过的父容器,浮动) 核心:1.无缝的关键就是克隆第一张图片,添加到ul集合的后面 ...

网友评论

      本文标题:自写无缝图片轮播,求给意见

      本文链接:https://www.haomeiwen.com/subject/oavccxtx.html