轮播图效果(js插件)

来源：互联网发布：erp系统属于数据库编辑：程序博客网时间：2024/06/09 14:16

轻量级插件：slideBox
插件下载地址
插件源代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>game1</title>    <link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css" />    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>    <script src="js/myslide.js" type="text/javascript"></script>    <style type="text/css">    </style></head><body>    <div id="demo1" class="slideBox">        <!-- ul必须命名为items，否则要更改js源码-->          <ul class="items">            <li><a href="go/to/your/url.html" title="这里是测试标题一"><img src="img/1.jpg"></a></li>            <li><a href="go/to/your/url.html" title="这里是测试标题二"><img src="img/2.jpg"></a></li>            <li><a href="go/to/your/url.html" title="这里是测试标题三"><img src="img/3.jpg"></a></li>            <li><a href="go/to/your/url.html" title="这里是测试标题四"><img src="img/4.jpg"></a></li>            <li><a href="go/to/your/url.html" title="这里是测试标题五"><img src="img/5.jpg"></a></li>          </ul>    </div></body><script type="text/javascript">    jQuery(function($){    //默认轮播方式    $('#demo1').slideBox();    });</script></html>

注意：
$.data()函数的运用
与
.stop().animate()中stop的作用

(function($) {    $.fn.slideBox = function(options) {        //默认参数        var defaults = {            direction : 'left',//left,top            duration : 0.6,//unit:seconds            easing : 'swing',//swing,linear            delay : 3,//unit:seconds            startIndex : 0,            hideClickBar : true,            clickBarRadius : 5,//unit:px            hideBottomBar : false        };        var settings = $.extend(defaults, options || {});        //计算相关数据        var wrapper = $(this), ul = wrapper.children('ul.items'), lis = ul.find('li'), firstPic = lis.first().find('img');        var li_num = lis.size(), li_height = 0, li_width = 0;        //初始化        var init = function(){            if(!wrapper.size()) return false;            wrapper.data('over', 0);            li_height = lis.first().height();            li_width = lis.first().width();            wrapper.css({width: li_width+'px', height:li_height+'px'});            lis.css({width: li_width+'px', height:li_height+'px'});//ADD.JENA.201207051027            ul.append(ul.find('li:first').clone());            li_num += 1;            if (settings.direction == 'left') {                ul.css('width', li_num * li_width + 'px');            } else {                ul.css('height', li_num * li_height + 'px');            }                       ul.find('li:eq('+settings.startIndex+')').addClass('active');            if(!settings.hideBottomBar){//ADD.JENA.201208090859                var tips = $('<div class="tips"></div>').css('opacity', 0.6).appendTo(wrapper);                var title = $('<div class="title"></div>').html(function(){                    var active = ul.find('li.active').find('a'), text = active.attr('title'), href = active.attr('href');                    return $('<a>').attr('href', href).text(text);                }).appendTo(tips);                var nums = $('<div class="nums"></div>').hide().appendTo(tips);                lis.each(function(i, n) {                    var a = $(n).find('a'), text = a.attr('title'), href = a.attr('href'), css = '';                    i == settings.startIndex && (css = 'active');                    $('<a>').attr('href', href).text(text).addClass(css).css('borderRadius', settings.clickBarRadius+'px').mouseover(function(){                        wrapper.data('over', 1);                        $(this).addClass('active').siblings().removeClass('active');                        ul.find('li:eq('+$(this).index()+')').addClass('active').siblings().removeClass('active');                        start();                    }).appendTo(nums);                });                if(settings.hideClickBar){//ADD.JENA.201206300847                    tips.hover(function(){                        nums.animate({top: '0px'}, 'fast');                    }, function(){                        nums.animate({top: tips.height()+'px'}, 'fast');                    });                    nums.show().delay(2000).animate({top: tips.height()+'px'}, 'fast');                }else{                    nums.show();                }            }            lis.size()>1 && start();        };        //开始轮播        var start = function() {            var active = ul.find('li.active'), active_a = active.find('a');            var index = active.index();            if(settings.direction == 'left'){                offset = index * li_width * -1;                param = {'left':offset + 'px' };            }else{                offset = index * li_height * -1;                param = {'top':offset + 'px' };            }            wrapper.find('.nums').find('a:eq('+index+')').addClass('active').siblings().removeClass('active');            wrapper.find('.title').find('a').attr('href', active_a.attr('href')).text(active_a.attr('title'));            // stop可以避免动画的累积效果            ul.stop().animate(param, settings.duration*1000, settings.easing, function() {//calback                active.removeClass('active');                if(active.next().size()==0){                    ul.css({top:0, left:0}).find('li:eq(1)').addClass('active');                    wrapper.find('.nums').find('a:first').addClass('active').siblings().removeClass('active');                }else{                    active.next().addClass('active');                }                wrapper.data('over')==0 && wrapper.data('timeid', window.setTimeout(start, settings.delay*1000));            });        };        //停止轮播        var stop = function() {            window.clearTimeout(wrapper.data('timeid'));        };        //鼠标经过事件        wrapper.hover(function(){            wrapper.data('over', 1);            stop();        }, function(){            wrapper.data('over', 0);            start();        });         //首张图片加载完毕后执行初始化        var imgLoader = new Image();        imgLoader.onload = function(){            imgLoader.onload = null;            init();        };        imgLoader.src = firstPic.attr('src');    };})(jQuery);

@charset "utf-8";html, body { font-family:"微软雅黑"}div.slideBox{ position:relative; width:670px; height:300px; overflow:hidden;}div.slideBox ul.items{ position:absolute; float:left; background:none; list-style:none; padding:0px; margin:0px;}div.slideBox ul.items li{ float:left; background:none; list-style:none; padding:0px; margin:0px;}div.slideBox ul.items li a{ float:left; line-height:normal !important; padding:0px !important; border:none/*For IE.ADD.JENA.201206300844*/;}div.slideBox ul.items li a img{ margin:0px !important; padding:0px !important; display:block; border:none/*For IE.ADD.JENA.201206300844*/;}div.slideBox div.tips{ position:absolute; bottom:0px; width:100%; height:50px; background-color:#000; overflow:hidden;}div.slideBox div.tips div.title{ position:absolute; left:0px; top:0px; height:100%;}div.slideBox div.tips div.title a{ color:#FFF; font-size:18px; line-height:50px; margin-left:10px; text-decoration:none;}div.slideBox div.tips div.title a:hover{ text-decoration:underline !important;}div.slideBox div.tips div.nums{ position:absolute; right:0px; top:0px; height:100%;}div.slideBox div.tips div.nums a{ display:inline-block; >float:left/*For IE.ADD.JENA.201206300844*/; width:20px; height:20px; background-color:#FFF; text-indent:-99999px; margin:15px 10px 0px 0px;}div.slideBox div.tips div.nums a.active{ background-color:#093;}

阅读全文

0 0