动手写一个HTML5的无限循环滚动焦点图

更多博客：http://blog.ilibing.com/

现在每个门户网站基本上一打开都是一个大大的焦点图，各种炫酷的滚动的效果。网上也有各式各样的插件，简单好用。但是如果我们能够写一个好用的焦点图滚动插件那岂不是更有成就感？其实也是很简单的，废话不多说动手吧。

给个Demo地址：http://www.ilibing.com/demo/slider.html

首先讲一下无限滚动焦点图的原理：

先用文字表达一下大概

假设有三张滚动焦点图，则位置为 3 1 2，第二个为可视滑块。

点击下一张按钮：则位置为：123，再点击下一张按钮则位置为231。点击下一张按钮的时候，第一张图片要放到最右，其他的图片则是往左挪动一个位置。

点击上一张按钮：则位置为：231，再点击下一张按钮则位置为123。点击上一张按钮的时候，最后一张图片要放到最左，其他的图片则是往右挪动一个位置。

先加载Jquery和清除网页的默认样式：

<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<style>* {max-width: 100%;height: auto;margin: 0;padding: 0;font-size: 100%;vertical-align: baseline;}html {max-width: 100%;height: auto;font-family: "Microsoft Yahei"}body {line-height: 1;background: #f5f5f5;-webkit-text-size-adjust: auto;font-size: 14px;color: #333;}ol, ul {list-style: none;}
</style>

然后就可以正式开写了：

写一个焦点图块，ul包含了3个焦点图li：

<ul class="slider"><li style="background: #006cff">1</li><li style="background: #798777">2</li><li style="background: #127841">3</li>
</ul>

设置焦点图的样式：

.slider {width: 400px;height: 200px;overflow: hidden;position: relative;margin: 10px auto;
}.slider li {position: absolute;height: 200px;width: 400px;text-align: center;line-height: 200px;
}

然后为其添加两个按钮控制上一张和下一张图片的切换：

<div class="button"><input id="pre" type="button" value="上一张"/><input id="next" type="button" value="下一张"/>
</div>

接下来的js才是大招：

<script>$(function () {var arr = new Array();//用数组来保存每个图块的位置var width = $('li').width();//获取焦点图li的大小var margin = 0;var i = 0;//记录滑动的位置，下一张i+1，上一张i-1，当前位置为:i%lengthvar length = $("ul").children("li").length;//获取焦点图的个数//遍历所有的图片滑块，为其设置位置，并且把所以位置保存到arr数组里。$('li').each(function (index) {//这一行是判断如果当前滑块为最后一个的话，则将它的margin-left设为-200px，//假设有五个图片滑块，则顺序是5，1，2，3，4。var marginLeft = index + 1 == length ? -width : index * (width + margin);arr.push(marginLeft);//保存每个焦点图滑块的位置$(this).css('margin-left', marginLeft + 'px');//设置每个焦点图的位置})//点击下一张按钮$('#next').click(function () {//判断滑动动画是否执行完毕if (!$('li').is(":animated")) {i++;$('li').each(function (index) {//遍历所有滑块li//为每个滑块指定位置var marginLeft = index - i % length < 0 ? arr[index + length - i % length] : arr[index - i % length];//设置每个滑块的位置if (marginLeft == width * (length - 2)) {//width * (length - 2)为最后一个滑块的位置//如果当前滑动要滑动到最右边，也就是最后一个，则不执行动画。$('li').eq(index).css({'margin-left': marginLeft + 'px'});} else {$('li').eq(index).animate({'margin-left': marginLeft + 'px'});}})}})//点击上一张按钮$('#pre').click(function () {//判断滑动动画是否执行完毕if (!$('li').is(":animated")) {i = --i < 0 ? length - 1 : i;$('li').each(function (index) {var marginLeft = index - i % length < 0 ? arr[index + length - i % length] : arr[index - i % length];if (marginLeft == -width) {//-width为最第一个滑块的位置//如果当前滑动要滑动到最左边边，也就是第一个，则不执行动画。$('li').eq(index).css({'margin-left': marginLeft + 'px'});} else {$('li').eq(index).animate({'margin-left': marginLeft + 'px'});}})}})})
</script>

完整源码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta content="telephone=no" name="format-detection"/>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
<style>
    * {max-width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        font-size: 100%;
        vertical-align: baseline;
    }html {max-width: 100%;
        height: auto;
        font-family: "Microsoft Yahei"
    }body {line-height: 1;
        background: #f5f5f5;
        -webkit-text-size-adjust: auto;
        font-size: 14px;
        color: #333;
    }ol, ul {list-style: none;
    }.slider {width: 400px;
        height: 200px;
        overflow: hidden;
        position: relative;
        margin: 10px auto;
    }.slider li {position: absolute;
        height: 200px;
        width: 400px;
        text-align: center;
        line-height: 200px;
    }.button {width: 200px;
        margin: 10px auto;
    }
</style>
<body>
<ul class="slider">
    <li style="background: #006cff">1</li>
    <li style="background: #798777">2</li>
    <li style="background: #127841">3</li>
</ul>
<div class="button">
    <input id="pre" type="button" value="上一张"/>
    <input id="next" type="button" value="下一张"/>
    <input id="showAll" οnclick="showAll()" type="button" value="显示所有滑块"/>
</div>
<script>
    function showAll(){if($('#showAll').val() == '显示所有滑块') {$('.slider').css('overflow', 'visible');
            $('#showAll').val('显示焦点滑块');
        } else {$('.slider').css('overflow', 'hidden');
            $('#showAll').val('显示所有滑块');
        }}$(function () {var arr = new Array();//用数组来保存每个图块的位置
        var width = $('li').width();//获取焦点图li的大小
        var margin = 0;
        var i = 0;//记录滑动的位置，下一张i+1，上一张i-1，当前位置为:i%length
        var length = $("ul").children("li").length;//获取焦点图的个数
        //遍历所有的图片滑块，为其设置位置，并且把所以位置保存到arr数组里。
        $('li').each(function (index) {//下面这一行是判断如果当前滑块为最后一个的话，则将它的margin-left设为-200px，
            //假设有五个图片滑块，则顺序是5，1，2，3，4。
            var marginLeft = index + 1 == length ? -width : index * (width + margin);
            arr.push(marginLeft);//保存每个焦点图滑块的位置
            $(this).css('margin-left', marginLeft + 'px');//设置每个焦点图的位置
        })//点击下一张按钮
        $('#next').click(function () {//判断滑动动画是否执行完毕
            if (!$('li').is(":animated")) {i++;
                $('li').each(function (index) {//遍历所有滑块li
                    //为每个滑块指定位置
                    var marginLeft = index - i % length < 0 ?arr[index + length - i % length] : arr[index - i % length];
                    //设置每个滑块的位置
                    if (marginLeft == width * (length - 2)) {//width * (length - 2)为最后一个滑块的位置
                        //如果当前滑动要滑动到最右边，也就是最后一个，则不执行动画。
//                        setTimeout(function() {
                        $('li').eq(index).css({'margin-left': marginLeft + 'px'});
//                        }, 600)
                    } else {$('li').eq(index).animate({'margin-left': marginLeft + 'px'},600);
                    }
//                    console.debug('i=' + i + ',index = ' + marginLeft);
                })}})//点击上一张按钮
        $('#pre').click(function () {//判断滑动动画是否执行完毕
            if (!$('li').is(":animated")) {i = --i < 0 ? length - 1 : i;
                $('li').each(function (index) {var marginLeft = index - i % length < 0 ?arr[index + length - i % length] : arr[index - i % length];
                    if (marginLeft == -width) {//-width为最第一个滑块的位置
                        //如果当前滑动要滑动到最左边边，也就是第一个，则不执行动画。
//                        setTimeout(function() {
                            $('li').eq(index).css({'margin-left': marginLeft + 'px'});
//                        }, 600)
                    } else {$('li').eq(index).animate({'margin-left': marginLeft + 'px'});
                    }
//                    console.debug('i=' + i + ',index = ' + marginLeft);
                })}})})
</script>
</body>
</html>

动手写一个HTML5的无限循环滚动焦点图相关推荐

自己动手写一个 strace
这次主要分享一下一个动手的东西,就是自己动手写一个 strace 工具. 用过 strace 的同学都知道,strace 是用来跟踪进程调用的系统调用,还可以统计进程对系统调用的统计等.stra ...
ios之实现自动无限循环滚动视图(1)
ios之实现自动无限循环滚动视图(1) 前言效果展示功能分析全部代码前言 ios实现无限循环滚动主要有两种办法,都利用了UIScrollView,第一种是创建一个很大的UIScrollVie ...
Unity的ScrollView无限循环滚动
前言此篇文章当作知识学习即可,需要使用循环复用的小伙伴可以尝试博主近期开发的ScrollCircleMaker v1.0,此插件功能比较完整,使用方便,如果遇到问题可以联系我进行修改. 当Scrol ...
java 手编线程池_死磕 java线程系列之自己动手写一个线程池
欢迎关注我的公众号"彤哥读源码",查看更多源码系列文章, 与彤哥一起畅游源码的海洋. (手机横屏看源码更方便) 问题 (1)自己动手写一个线程池需要考虑哪些因素? (2)自己动手写 ...
【Android】ViewPager实现无限循环滚动
最近做的一个项目,客户要求在ViewPager实现的主页面中滑动到最后一页后继续滑动能返回到第一页,也就是实现无限循环滚动,效果如下: 看了下ViewPager没有滑到尽头的回调方法,因此想到的解决方 ...
JQuery图片无限循环滚动源码
平常项目中经常用到图片循环滚动,所以就写些必要的CSS定位,JS基本算法,最后就封装成JQuery图片无限循环滚动插件类,其实本质上是li块无限循环滚动,li块里面不管是图片还是其它内容,都OK的. ...
学习较底层编程：动手写一个C语言编译器
动手编写一个编译器,学习一下较为底层的编程方式,是一种学习计算机到底是如何工作的非常有效方法. 编译器通常被看作是十分复杂的工程.事实上,编写一个产品级的编译器也确实是一个庞大的任务.但是写一个小巧可 ...
java 同步锁_死磕 java同步系列之自己动手写一个锁Lock
问题 (1)自己动手写一个锁需要哪些知识? (2)自己动手写一个锁到底有多简单? (3)自己能不能写出来一个完美的锁? 简介本篇文章的目标一是自己动手写一个锁,这个锁的功能很简单,能进行正常的加锁. ...
自己动手写一个简单的bootloader
自己动手写一个简单的bootloader 15年10月31日19:44:27 (一) start.S 写这一段代码前,先要清楚bootloader开始的时候都做什么了.无非就是硬件的初始化,我们想要写 ...

动手写一个HTML5的无限循环滚动焦点图

动手写一个HTML5的无限循环滚动焦点图相关推荐

最新文章

热门文章