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 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
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获取ip及网址的简单方法(必看)
2017/04/01 PHP
Js动态创建div
2008/09/25 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
Python中动态创建类实例的方法
2017/03/24 Python
Python编程实现正则删除命令功能
2017/08/30 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
python搜索包的路径的实现方法
2019/07/19 Python
python实现LRU热点缓存及原理
2019/10/29 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
Python使用configparser库读取配置文件
2020/02/22 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
Final类有什么特点
2012/04/25 面试题
员工拾金不昧表扬信
2014/01/09 职场文书
小学三年级学生评语
2014/04/22 职场文书
学校工会工作总结2015
2015/05/19 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书