javascript - 【求助】求一个轮播焦点图的jQuery代码
ringa_lee
ringa_lee 2017-04-10 16:23:41
0
7
435

RT求一个轮播焦点图的jQuery代码

网上找了很多都无法满足要求。。无奈只能来求助了。。
需要实现以下功能:

1、轮播方式为左右滚动,不要渐隐切换,且可以无限滚动,不会回弹。
2、轮播图有索引控件,就是对应图片的小圆点。
3、有左右切换按钮,而且如果多次点击按钮,只滚动一张图(就是淘宝首页那种)
4、用JQuery实现。。原生JS一大堆伤不起。。


我自己写过几种。。都有问题。。
第一种:每次滚动第一个DOM移动到最后面。。问题是:index一直在变化,索引小圆点对应不了。。
第二种:滚动到最后一张图时,第一张图加上position:relative;放到最后,然后滚过去后又复原,外面的ul也同时复原,问题是:左右按钮多次点击就会错位。。滚动效果我用animate()前面加上stop()都没用。。不知道什么回事


其他方法基本差不多 都是这2个思路 具体操作不同。。也实现不了上面需要的功能。。。下了网上的来看。。也没有一个能实现,下插件看。。封装好的几百行。。眼睛瞎了。。上百度知道问。。有人给我一个引擎生成的。。一堆错误。。

求哪位大神能帮忙写个学习。。。越简洁越好。。跪谢。。。

ringa_lee
ringa_lee

ringa_lee

reply all (7)
巴扎黑

http://static.fengchuan100.com/new20150827/js/jquery-slides.js

$(function() {

$('#J_slides').slides({ 'auto' : 3000, 'item' : '.item', 'btnPrev' : '#J_btnPrev', 'btnNext' : '#J_btnNext', 'pagination' : '#J_pagination', 'paginationItem' : 'a', 'speed' : 300, 'vertical' : false, // 垂直滑动 'mouseOver' : true, // 鼠标悬停 'mouseWheel' : false // 鼠标滑轮 });

});

这是我自己写的一个滑动轮播插件,看是否满足你的需求。
需要我在发文件给你,在我本地。

放入网盘了,http://pan.baidu.com/s/1i3uFG7F

    阿神

    全部自己写很有勇气,也值得赞赏,但是确实费劲。我一直用这个插件,Bootstrap轮播图插件
    ,自己参与的几个网站都用上去了,IE8以上、firefox、Chrome都暂时还没有发现错误,希望帮到你。

      小葫芦

      慕课网-焦点轮播图特效
      有源码可以直接下载使用,包括原始js和jquery的,做出的效果和你的需求一模一样。
      偶学习的第一份轮播大法即始于此教程,感觉挺好的,哈哈~

        Peter_Zhu

        参考下这个问题吧
        http://segmentfault.com/q/1010000004003597/a-1020000004005269

          Peter_Zhu

          www.SuperSlide2.com

          满足你所有的需要,我用过非常赞,以后就用这个了。

            黄舟

            首先,你只要将需求归总为一点:可以通过各种方式定位到某个item,slider.scrollTo(index)

            那么无论是索引还是点击左右其实都是调用一个方法 -- 定位到某个item。

            slider保存一个currentIndex, 默认为0。

            点击左右就是加减1和边界的计算。点击索引就是直接跳转到某个index。

            那么你只要专心的去完成scrollTo这个方法。

            增加一个属性animationing,在动画滚动结束之前,让scrollTo方法直接return false就好了。

              黄舟

              我安利个我常用的插件吧,基本上我觉得都能实现了,
              有一些变动可以自己修改,容易上手,简单明了。
              链接:http://www.superslide2.com/demo.html

                Latest Downloads
                More>
                Web Effects
                Website Source Code
                Website Materials
                Front End Template
                About us Disclaimer Sitemap
                php.cn:Public welfare online PHP training,Help PHP learners grow quickly!