jquery实现轮播插件
这几天用jquery写了两个轮播的插件，功能很简单。第一次尝试写插件，有很多不足的地方，代码如下：
注：图片链接请替换掉，配置信息必须加上图片width和height。
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="css/bootstrap.min.css"> <title>轮播动画</title> <style type="text/css"> .marquee-wrap { overflow: hidden; margin: 0 auto; position: relative; top: 0; left: 0; } .indicator { list-style: none; position: absolute; right: 60px; bottom: 4px; z-index: 102; } .indicator li { float: left; width: 20px; height: 20px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background-color: #ffffff; text-align: center; margin: 2px; } .indicator li a { color: #333; text-decoration: none; } .indicator li.active { background-color: rgb(255, 157, 51); } .indicator li.active a { color: #ffffff; } .operator { width: 100%; padding: 0 16px; position: absolute; top: 40%; left: 0; z-index: 101; } .operator a { font-size: 26px; text-decoration: none; color: #ffffff; font-weight: 200; } .operator a:hover { opacity: 0.9; } .marquee { list-style: none; margin: 0; padding: 0; overflow: hidden; position: relative; top: 0; z-index: 99; } ul.marquee:after, ol.indicator:after, .operate:after { display: block; content: "."; visibility: hidden; height: 0; clear: both; *zoom: 1; } .marquee li { float: right; } .my-marquee-wrap { overflow: hidden; margin: 20px auto; } .my-marquee { position: relative; top: 0; left: 0; margin: 0; padding: 0; } .my-marquee li { display: block; position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="marquee-wrap" id="marquee"> <ol class="indicator"> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> </ol> <ul class="marquee"> <li> <a href="#" target="_blank"> <img src="images/banner2.jpg"> </a> </li> <li> <a href="#" target="_blank"> <img src="images/banner5.jpg"> </a> </li> <li> <a href="#" target="_blank"> <img src="images/banner9.jpg"> </a> </li> <li> <a href="#" target="_blank"> <img src="images/banner10.jpg"> </a> </li> <li> <a href="#" target="_blank"> <img src="images/banner11.jpg"> </a> </li> <li> <a href="#" target="_blank"> <img src="images/banner12.jpg"> </a> </li> </ul> <div class="operator"> <a href="#" class="next pull-right"><span class="glyphicon glyphicon-chevron-right"></span></a> <a href="#" class="prev pull-left"><span class="glyphicon glyphicon-chevron-left"></span></a> </div> </div> <div class="my-marquee-wrap" id="my-marquee"> <ul class="my-marquee"> <li> <a href="#" target="_blank"> <img src="images/banner2.jpg"> </a> </li> <li> <a href="#" target="_blank"> <img src="images/banner5.jpg"> </a> </li> <li> <a href="#" target="_blank"> <img src="images/banner9.jpg"> </a> </li> <li> <a href="#" target="_blank"> <img src="images/banner10.jpg"> </a> </li> <li> <a href="#" target="_blank"> <img src="images/banner11.jpg"> </a> </li> <li> <a href="#" target="_blank"> <img src="images/banner12.jpg"> </a> </li> </ul> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> (function ($) { $.fn.slide = function (options) { this.defaults={ slideDuration:2000, animateDuration:4000 }; var settings= $.extend({},this.defaults,options); return this.each(function () { var $marquee = $(this).children('.marquee'); var $indicator = $(this).children('.indicator'); var $operator = $(this).children('.operator'); if(typeof settings.width!='undefined' && typeof settings.height!='undefined'){ $(this).css({ width:settings.width, height:settings.height }); $marquee.css({ width:parseInt(settings.width)*3, height:settings.height, right:settings.width }); } var index= 0,interval=""; init(); function init(){ interval=window.setInterval(slide,settings.animateDuration); } function slide() { $marquee.find('li').eq(0).animate({ opacity: 0, width: 0 }, settings.slideDuration, function () { index = index + 1 > 5 ? 0 : index + 1; $indicator.find('li').eq(index).addClass('active').siblings().removeClass('active'); $marquee.find('li').eq(0).css({opacity: 1, width: settings.width}).appendTo($marquee); }); } $indicator.find('a').on('click', function (event) { event.preventDefault(); clearInterval(interval); var current = index; index = $(this).text() - 1; var temp = Math.abs(current - index); if (current == index) { return false; } else { //修改循环队列 for (var i = 0; i < temp; i++) { if (current < index) { $marquee.find('li').eq(0).css({opacity: 1, width: settings.width}).appendTo($marquee); } else { $marquee.find('li').last().css({opacity: 1, width: settings.width}).prependTo($marquee); } } } $indicator.find('li').eq(index).addClass('active').siblings().removeClass('active'); interval = window.setInterval(slide, settings.animateDuration); }); $operator.find('.next').on('click', function (event) { event.preventDefault(); clearInterval(interval); $marquee.find('li').eq(0).animate({ opacity: 0, width: 0 }, 600, function () { index = index + 1 > 5 ? 0 : index + 1; $indicator.find('li').eq(index).addClass('active').siblings().removeClass('active'); $marquee.find('li').eq(0).css({opacity: 1, width: settings.width}).appendTo($marquee); }); interval = window.setInterval(slide, settings.animateDuration); }); $operator.find('.prev').on('click', function (event) { event.preventDefault(); clearInterval(interval); $marquee.find('li').last().css({opacity: 0, width: "0"}).prependTo($marquee); $marquee.find('li').eq(0).animate({ opacity: 1, width: settings.width }, 600, function () { index = index - 1 < 0 ? 5 : index - 1; $indicator.find('li').eq(index).addClass('active').siblings().removeClass('active'); }); interval = window.setInterval(slide, settings.animateDuration); }); }); }; })(jQuery); (function($){ $.fn.marquee=function(options){ this.defaults={ slideDuration:1500, animateDuration:1000 }; var settings= $.extend({},this.defaults,options); return this.each(function () { var $marquee=$(this).children('.my-marquee'); var interval=""; if(typeof settings.width!='undefined' && typeof settings.height!='undefined'){ $(this).css({ width:settings.width, height:settings.height }); } init(); function init(){ interval = window.setInterval(slide, settings.animateDuration); } function slide(){ $marquee.find('li').last().fadeOut(settings.slideDuration,function(){ $(this).show().prependTo($marquee); }) } }); }; })(jQuery); $(function () { $('#marquee').slide({ width:'1200px', height:'330px' }); $('#my-marquee').marquee({ width:'1200px', height:'330px' }); }); </script> </body> </html>
