通栏焦点图插件

来源：互联网发布：手机淘宝不能改评价吗编辑：程序博客网时间：2024/06/11 09:09

首先，什么是插件？插件是一种遵循一定规范的应用程序接口编写出来的程序，为了方便程序猿们的使用，现如今，插件的世界可谓五彩冰封啊，作为小白的我也试着写了一个焦点图插件，若有出入，还请各位大神指点一二。

html如下

<div class="maoFocus" id="maoFocus">    <ul class="picture">        <li><a href=""><img src="static/image/1.jpg" alt="图一" title="美食一"></a></li>        <li><a href=""><img src="static/image/2.jpg" alt="图二" title="美食二"></a></li>        <li><a href=""><img src="static/image/3.jpg" alt="图三" title="美食三"></a></li>        <li><a href=""><img src="static/image/4.jpg" alt="图四" title="美食四"></a></li>        <li><a href=""><img src="static/image/5.jpg" alt="图五" title="美食五"></a></li>    </ul>    </div>

css

<style type="text/css">        *{margin:0;padding: 0;}        li{list-style: none;}        .maoFocus{height: 480px;margin:110px auto;width: 100%;}        .picture{height:360px;width: 100%;overflow:hidden;}        .picture li{            position: relative;width:100%;height: 100%;            background-size: cover;background-position:center;        }        .picture li a{display: block;}        .picture li a img{min-height: 360px;overflow: hidden;}        .picture li p{            height: 40px;position: absolute;padding: 20px 140px;            top: 0;font-size: 20px;        }        .picture li strong{            display: block;position: absolute;height: 50px;line-height: 50px;            background-color: rgba(0,0,0,.3);width: 100%;top: 310px;            color: #fff;text-align: center;        }        .num{margin:80px auto 0;display: table;}        .num li{            width:40px;height:40px;text-indent: -9999px;background-color: #ccc;            border-radius: 50px;cursor: pointer;float: left;         }        .num li.on{background-color: red;}        .num li:not(:last-child){margin-right: 15px;}        .direction .arrows_left,.direction .arrows_right{position: relative;top: -220px;cursor: pointer;}        .direction .arrows_left{            float:left;width: 100px;height:100px;            background:url(static/image/left.png) right center no-repeat;        }        .direction .arrows_right{            float:right;width: 100px;height:100px;            background:url(static/image/right.png) right -25px center no-repeat;        }    </style>

js

(function($) {    $.fn.myPlugin = function(m) {        m = $.extend({            event: 'mouseover', // 触发事件            show: 'fadeIn', // 显示方式            time: '2000', //图片轮换间隔时间            current: 'on' // 选中数组按钮        },m);        var $obj = $(this);        // 追加左右箭头        $obj.append('<div class="direction"><div class="arrows_left"></div><div class="arrows_right"></div></div>');        // 追加数字按钮        $obj.append('<ol class="num"></ol>');        var $num_on = $obj.children('.num'),            $arrow_right = $obj.find(".arrows_right"),            $arrow_left = $obj.find(".arrows_left"),            $pic_li = $(".picture li"),            $pic_li_a = $pic_li.find('a'),            t, // 定时器            $pic_li_length = $(".picture li").size();        // 图片轮播        roll();         // 浏览器尺寸变化        $(window).resize(function(){           resizePic();        });           //遍历图片上的文字        $pic_li.each(function() {            var index = $(this).index();            var focus = $(this).find("img"),                src = focus.attr("src"), // 获取背景图片路径                alt = focus.attr("alt"), // 获取图片的alt                title = focus.attr("title"); // 获取图片的title            $(this).css("background-image","url(" + src + ")"); //动态添加背景图片            $(this).append('<p>'+ alt +'</p><strong>'+ title +'</strong>');  //给每个图片添加不同的标题            var color = ["red","blue","yellow","green","pink"];  //设置一个数组随机改变图片标题颜色（根据自己需求，可不写）            $(this).find('p').css({ // 随机改变图片标题颜色                color: color[Math.floor(Math.random()*$pic_li_length)],                left:"0"            });            //尺寸发生变化            resizePic();        });        // 根据图片数量动态添加数字按钮        for(i =1;i<=$pic_li_length;i++){            $num_on.append('<li>'+i+'</li>');        };        var rr = $obj.find('.num');        var rrLi = rr.children('li');        //点击数字触发        rrLi.each(function() {            var index = $(this).index();            if(index == 0){                $(this).addClass(m.current).siblings('li').removeClass(m.current);            }            $(this).on(m.event,function() {                numOn(index);                speed(index);            });        });        // 浏览器尺寸发生变化        function resizePic () {            var  Width = $pic_li_a.children('img').width(); // 获取图片的实际宽度            if ($(window).width() < Width) { //$(window).width():设置浏览器宽度                $pic_li_a.children('img').css("display","block");            } else {                $pic_li_a.children('img').css("display","none");            };        }        //点击向右箭头        $arrow_right.click(function () {            changePic('R');        });        //点击向左箭头        $arrow_left.click(function () {            changePic();        });        //点击箭头触发事件        function changePic(arrow) {            var n = $num_on.children('li.'+ m.current).index();             var i;            if(arrow == 'R') {                i = n + 1;                if (i == $pic_li_length) {                    i = 0;                }            } else {                i = n - 1;             }            numOn(i);            speed(i);        };        //图片显示方式         function speed(n) {            if(m.show == "fadeIn") {                $pic_li.eq(n).fadeIn("fast").siblings('li').fadeOut("fast");            }        };        //相对应的数字按钮        function numOn (n) {            rrLi.eq(n).addClass(m.current).siblings('li').removeClass(m.current);        };        //图片轮播        function roll () {            t = setInterval(function() {changePic('R')},m.time);        };        //鼠标放在图片上时停止轮播        $obj.hover(function() {            // 清除定时器            clearInterval(t);        });        //鼠标离开时图片继续轮播        $obj.mouseleave(function() {            roll();        });    };})(jQuery);

最后，在页面调用如下：

<script src="static/js/jquery-1.8.3.min.js"></script>    <script src="static/js/jquery.focus.js"></script>    <script type="text/javascript">        $(function() {            $("#maoFocus").myPlugin();        });    </script>

重点说明

function resizePic () {   var  Width = $pic_li_a.children('img').width(); // 获取图片的实际宽度    if ($(window).width() < Width) { //$(window).width():设置浏览器宽度        $pic_li_a.children('img').css("display","block");    } else {        $pic_li_a.children('img').css("display","none");    };}

这段代码，判断浏览器宽度是否小于图片宽度，如果浏览器宽度小于图片宽度，显示img，反之，显示背景图片，这样做的原因就是不管浏览器宽度如何变化，保证了图片的始终如一。如若不明白，毛毛在这里随时为您解答#^_^#

每天进步一点点(^o^)/

0 0