文档章节

jQuery可悬停控制图片轮播

lotozhou
 lotozhou
发布于 2015/12/03 15:12
字数 534
阅读 312
收藏 2

图片轮播相信很多人你也见过,各大网站上基本上都有,那么究竟是怎么实现的呢?不废话,直接上代码:

<div id="banner_tabs" class="flexslider">
<ul class="slides">
<li>
<a title="" target="_blank" href="#">
<img width="1920" height="482" alt="" style="background: url(images/banner1.jpg) no-repeat center;" src="images/alpha.png">
</a>
</li>
<li>
<a title="" href="#">
<img width="1920" height="482" alt="" style="background: url(images/banner2.jpg) no-repeat center;" src="images/alpha.png">
</a>
</li>
<li>
<a title="" href="#">
<img width="1920" height="482" alt="" style="background: url(images/banner3.jpg) no-repeat center;" src="images/alpha.png">
</a>
</li>
</ul>
<ul class="flex-direction-nav">
<li><a class="flex-prev" href="javascript:;">Previous</a></li>
<li><a class="flex-next" href="javascript:;">Next</a></li>
</ul>
<ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>2</a></li>
</ol>
</div>

首先咱得先把图片放进去,css样式我这里就不写了,主要说的js控制图片自动轮播,也可以通过左右两边的按钮实现图片的轮换

不废话,上代码:

<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>
<script type="text/javascript">
$(function() {
var bannerSlider = new Slider($('#banner_tabs'), {
time: 5000,
delay: 400,
event: 'hover',
auto: true,
mode: 'fade',
controller: $('#bannerCtrl'),
activeControllerCls: 'active'
});
$('#banner_tabs .flex-prev').click(function() {
bannerSlider.prev()
});
$('#banner_tabs .flex-next').click(function() {
bannerSlider.next()
});
})
</script>

slider部分代码:

 $(function ($, window, document, undefined) {
    
    Slider = function (container, options) {
        "use strict"; 
        if (!container) return;
        var options = options || {},
            currentIndex = 0,
            cls = options.activeControllerCls,
            delay = options.delay,
            isAuto = options.auto,
            controller = options.controller,
            event = options.event,
            interval,
            slidesWrapper = container.children().first(),
            slides = slidesWrapper.children(),
            length = slides.length,
            childWidth = container.width(),
            totalWidth = childWidth * slides.length;
        function init() {
            var controlItem = controller.children();
            mode();
            event == 'hover' ? controlItem.mouseover(function () {
                stop();
                var index = $(this).index();
                play(index, options.mode);
            }).mouseout(function () {
                isAuto && autoPlay();
            }) : controlItem.click(function () {
                stop();
                var index = $(this).index();
                play(index, options.mode);
                isAuto && autoPlay();
            });
            isAuto && autoPlay();
        }
        function mode() {
            var wrapper = container.children().first();
            options.mode == 'slide' ? wrapper.width(totalWidth) : wrapper.children().css({
                'position': 'absolute',
                'left': 0,
                'top': 0
            })
                .first().siblings().hide();
        }
        function autoPlay() {
            interval = setInterval(function () {
                triggerPlay(currentIndex);
            }, options.time);
        }
        function triggerPlay(cIndex) {
            var index;
            (cIndex == length - 1) ? index = 0 : index = cIndex + 1;
            play(index, options.mode);
        }
        function play(index, mode) {
            slidesWrapper.stop(true, true);
            slides.stop(true, true);
            mode == 'slide' ? (function () {
                if (index > currentIndex) {
                    slidesWrapper.animate({
                        left: '-=' + Math.abs(index - currentIndex) * childWidth + 'px'
                    }, delay);
                } else if (index < currentIndex) {
                    slidesWrapper.animate({
                        left: '+=' + Math.abs(index - currentIndex) * childWidth + 'px'
                    }, delay);
                } else {
                    return;
                }
            })() : (function () {
                if (slidesWrapper.children(':visible').index() == index) return;
                slidesWrapper.children().fadeOut(delay).eq(index).fadeIn(delay);
            })();
            try {
                controller.children('.' + cls).removeClass(cls);
                controller.children().eq(index).addClass(cls);
            } catch (e) { }
            currentIndex = index;
            options.exchangeEnd && typeof options.exchangeEnd == 'function' && options.exchangeEnd.call(this, currentIndex);
        }
        function stop() {
            clearInterval(interval);
        }
        function prev() {
            stop();
            currentIndex == 0 ? triggerPlay(length - 2) : triggerPlay(currentIndex - 2);
            isAuto && autoPlay();
        }
        function next() {
            stop();
            currentIndex == length - 1 ? triggerPlay(-1) : triggerPlay(currentIndex);
            isAuto && autoPlay();
        }
        init();
        return {
            prev: function () {
                prev();
            },
            next: function () {
                next();
            }
        }
    };
}(jQuery, window, document));

通过上米哦按的代码即可实现。

© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 8
博文 51
码字总数 51524
作品 0
苏州
程序员
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
0
0
jqeury轮播图插件 简单教程(适合新手)

下面的实例说明都只是我这几天下载后分析,而且我也是个新手,所以难免会有不少错误,这些都只是我个人的分享,希望有人能指出其中的错误,这样大家可以一起学习一起进步。 (实例的完整代码...

glowry
2014/02/23
0
4
第06章节-Python3.5-插件轮播 5

第06章节-Python3.5-插件轮播(轮播图插件,不重复造轮子) 打开浏览器搜索bxslider或打开(https://bxslider.com/) 或打开bxslider中文翻译网(http://www.jq22.com/jquery-info7010) 或打开(ht...

阿啦卜
07/20
0
0
制作简单jQuery插件实现图片轮播

这个图片轮播效果js是大名鼎鼎的林木木写得,原文在这里>>。要实现的效果也很明确:自动获取对象列表中第一个元素的宽度,然后列表整体向左平移,再把第一个元素绑定到列表最后去;可以再加个...

mickelfeng
2012/10/25
0
3
Jquery Slides1.1.8版本注释

图片轮播图的应用很广泛,jquery Slides是一个很好的插件,它兼容所有的浏览器,使用起来很方便。缺点就是需要依赖于jquery。根据个人的使用情况,对调用Slides的参数进行中文注释,希望对一...

anx
2012/08/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

React 服务器渲染原理解析与实践

网盘下载地址 React 服务器渲染原理解析与实践 本套课程,讲解了React中SSR技术的整个搭建思路及流程,完整的从原理上讲清楚了SSR的概念,重点在于讲解编写SSR框架遇到的各种知识点,以及细节...

qq__2304636824
18分钟前
0
0
sourcetree 离线免注册登录安装教程

Sourcetree是一个优秀的git可视化管理工具,深受开发者喜爱Sourcetree官网,但是在安装时需要谷歌账户登录,需要翻qiang才可以,此一点一直被人们所诟病。今天本教程就为大家提供离线免登陆安...

QQZZFT
47分钟前
1
0
使用 PostgreSQL 解决一个实际的统计分析问题

使用 PostgreSQL 解决一个实际的统计分析问题作者:老农民(刘启华)Email: 46715422@qq.com 之前有个朋友扔给我一个奇葩需求,他们公司之前做了一批问卷调查,全部都是统一格式的excel...

新疆老农民
50分钟前
5
0
TypeScript基础入门之高级类型的映射类型

转发 TypeScript基础入门之高级类型的映射类型 高级类型 映射类型 一个常见的任务是将一个已知的类型每个属性都变为可选的: interface PersonPartial {    name?: string;    age?...

durban
今天
1
0
Dubbo源码分析(6):Dubbo内核实现之基于SPI思想Dubbo内核实现

SPI接口定义 定义了@SPI注解 package com.alibaba.dubbo.common.extension; import java.lang.annotation.Documented;import java.lang.annotation.ElementType;import java.lang.an......

郑加威
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部