jQuery实现的图片分组切换焦点图插件


Posted in Javascript onJanuary 06, 2015

这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实用。

jQuery实现的图片分组切换焦点图插件

实现的代码。

html代码:

 <div class="device">

        <h2>

            <a href="javascript:;" class="pre">上一组</a><a href="javascript:;" class="next">下一组</a></h2>

        <div class="scroll">

            <ul>

                <li><a href="#">

                    <img src="images/1.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/2.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/3.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/4.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/5.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/1.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/2.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/3.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/4.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/5.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/1.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/2.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/3.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/4.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/5.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/1.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/2.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/3.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/4.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

                <li><a href="#">

                    <img src="images/5.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>

            </ul>

        </div>

    </div>

js代码:

  $(function () {

            var $number = Math.ceil($('.scroll ul li').length / 4); //获取滚动几屏个数

            var margin = 10; //设置图片间距

            var $w = $('.scroll li').width() + margin; // 一屏图片的宽度

            var $width = $w * $number * 2; //设置ul宽度

            var pre = $('.device .pre');

            var next = $('.device .next');

            if ($number == 1) { pre.hide(); next.hide(); }

            $('.scroll ul').width($width);

            var num = 0;

            function autoscroll() {

                num++;

                if ($number == 1) { return false }

                if (num == $number) {

                    num = 0;

                }

                var distance = -2 * $w * num;

                $('.scroll ul').stop().animate({ left: distance });

            }

            var scrollChange = setInterval(autoscroll, 8000);

            //鼠标悬停,暂停滚动

            $(".scroll ul,.pre,.next").mouseover(function () {

                $('.scroll ul').stop()

                clearInterval(scrollChange);

            });

            // 鼠标移走,滚动继续

            $('.scroll ul,.pre,.next').mouseout(function () {

                scrollChange = setInterval(autoscroll, 8000);

            });

            //下一组

            next.click(function () {

                num++;

                if (num >= $number) { num = 0 }

                var leftdis = -2 * $w * num;

                $('.scroll ul').stop().animate({ left: leftdis });

            });

            //上一组

            pre.click(function () {

                num--;

                if (num < 0) { num = $number - 1 }

                var rightdis = -2 * $w * num;

                $('.scroll ul').stop().animate({ left: rightdis });

            });

        });
Javascript 相关文章推荐
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
JavaScript中import用法总结
Jan 20 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 #Javascript
jQuery中filter()方法用法实例
Jan 06 #Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 #Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 #Javascript
jQuery中hasClass()方法用法实例
Jan 06 #Javascript
jQuery中last()方法用法实例
Jan 06 #Javascript
jQuery中first()方法用法实例
Jan 06 #Javascript
You might like
PHP脚本的10个技巧(2)
2006/10/09 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
javascript window.opener的用法分析
2010/04/07 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
is_file和file_exists效率比较
2021/03/14 PHP
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
技校毕业生个人学习的自我评价
2014/02/21 职场文书
对孩子的寄语
2014/04/09 职场文书
党的群众路线学习材料
2014/05/16 职场文书
文明生主要事迹
2014/05/25 职场文书
公务员诚信承诺书
2014/05/26 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL