<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>轮播</title>

<!-- 轮播广告 css start-->

<style>

.flexslider{position:relative;width:100%;height:400px;overflow:hidden;zoom:1}

.flexslider .slides li{width:100%;height:100%}

.flexslider:hover .flex-next:hover,.flexslider:hover .flex-prev:hover{opacity:1;filter:alpha(opacity=50)}

.flex-control-nav{width:100%;position:absolute;bottom:10px;text-align:center}

.flex-control-nav li{margin:0 2px;display:inline-block;zoom:1}

.flex-control-paging li a{background:url(http://chzeze.cc/images/dot.png) no-repeat 0 -16px;display:block;height:16px;overflow:hidden;text-indent:-99em;width:16px;cursor:pointer}

.flex-control-paging li a.flex-active,.flex-control-paging li.active a{background-position:0 0}

.flexslider .slides a img{width:100%;height:400px;display:block}

</style>

<!-- 轮播广告 css end-->

</head>

<body style="margin: 0px;">

<!-- 轮播广告 -->

<div id="banner_tabs" class="flexslider">

  <ul class="slides">

    <li> <a title="" target="_blank" href="#"> <img width="1920" height="482" alt="" style="background: url(http://www.chzeze.cc/Page/index/images/banner.png) no-repeat center;" src="http://chzeze.cc/images/alpha.png"> </a> </li>

    <li> <a title="" href="#"> <img width="1920" height="482" alt="" style="background: url(http://www.chzeze.cc/Page/index/images/banner4.png) no-repeat center;" src="http://chzeze.cc/images/alpha.png"> </a> </li>

    <li> <a title="" href="#"> <img width="1920" height="482" alt="" style="background: url(http://www.chzeze.cc/Page/index/images/banner2.png) no-repeat center;" src="http://chzeze.cc/images/alpha.png"> </a> </li>

  </ul>

  <ol id="bannerCtrl" class="flex-control-nav flex-control-paging" style="padding-left: 0px;">

    <li><a>1</a></li>

    <li><a>2</a></li>

    <li><a>2</a></li>

  </ol>

</div>

<script src="http://chzeze.cc/Page/jquery.js"></script>

<script>

 <!--背景轮播 js 开始-->

$(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,

                'display':'block'

            }).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));

$(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()

    });

})

 <!--背景轮播 js结束-->

</script>

</div>

</body>

</html>

　　

web图片轮播实现的更多相关文章

  1. H5如何做手机app(移动Web App)?图片轮播？ionic、MUI

    移动Web App 跨平台开发 用户不需要去卖场来下载安装App 任何时候都可以发布App只需要一个开发项目 可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Rub ...

  2. Unslider Web前端框架之图片轮播

    前端框架,前端组件,前端库,都是一个意思,能看源码. 最近做H5小游戏,用到了图片轮播的组件,而且要求支持移动端触屏滑动.一开始用的是nivo slider,但是对大小不一样的图不支持box 的参数设 ...

  3. 图片轮播图插件的使用 unslider！！！

    1.百度图片轮播图unslider,第一个就会出现jquery unslider轮播图,点击进去,下载网站提供的文件,解压,内部有我们需要使用的各种js,图片等. 2.在自己的eclipse或者int ...

  4. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  5. 图片轮播插件-carouFredSel

    carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效. 主页地址:http://caroufredsel.dev7stud ...

  6. 使用纯css3实现图片轮播

    <!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...

  7. SharePoint 门户网站的图片轮播-页面定制

    这个想法是自己突然的一个想法,想想我们经常用SharePoint做门户网站,不知道你们多数项目都是怎么完成的,我们客户要求的效果都还是很严格的,所有展现起来,还是很漂亮的,但是很多时候的效果,还是难以 ...

  8. 推荐一款超级漂亮的HTML5 CSS3的图片轮播器

    最近在学习HTML5和CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer. 本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图 ...

  9. MUI框架-06-静态页制作（图片轮播）

    MUI框架-06-静态页制作(图片轮播) 轮播也是静态,是相对页面交互来说 上一篇介绍了如何设计一个简单的界面,还没有接触过,请先查看: MUI框架-01-介绍-创建项目-简单页面 轮播组件 之前也介 ...

随机推荐

  1. Java Web学习笔记-Servle生命周期

    Servlet会在服务器启动或第一次请求该Servlet的时候开始生命周期,在服务器停止的时候结束生命周期. 无论请求多少次Servlet,最多只有一个Servlet实例.多个客户端并发请求Servl ...

  2. How to (seriously) read a scientific paper

    How to (seriously) read a scientific paper Adam Ruben’s tongue-in-cheek column about the common diff ...

  3. JSONModel 嵌套字典数组 JSONModel nest NSDictionary NSArray

    JSONModel 嵌套字典数组  JSONModel nest NSDictionary NSArray

  4. Python之路【第八篇】python实现线程池

    线程池概念 什么是线程池?诸如web服务器.数据库服务器.文件服务器和邮件服务器等许多服务器应用都面向处理来自某些远程来源的大量短小的任务.构建服务器应用程序的一个过于简单的模型是:每当一个请求到达就 ...

  5. sublime设置

    修改字体: "font_face": "Monaco", "font_size": 14.0

  6. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  7. linux命令--nslookup

    nslookup和dig都是非常有用的网络命令,简单而言,就是查dns信息用的. 本地的dns配置文件在哪里? 文件是:/etc/resolv.conf 打开这个文件:vi /etc/resolv.c ...

  8. 前端入门级之如何从零开始前端（估计要被人鄙视成LOW货了）入门篇

    <!------------------------------------------------------基本说明开始----------------------------------- ...

  9. Google翻译请求(难点是tk参数)

    业务需求需要将一些文字翻译一下··· 但是直接调用接口收费啊啊啊啊(貌似是前几百万字免费,然后就开始收费了)···· 就想研究一下Google翻译接口... 想模拟Google向服务器发送一个Http ...

  10. iOS之下拉放大，上推缩小，一个方法搞定

    先来看看效果吧. 讲讲大概的实现思路:1､创建头部的视图和tableview,需要注意的是tableview要设置contentInset,contentInsent 的顶部要和头部视图的背景图的高度 ...