<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} ul,li{list-style-type: none;} .slide{ position: relative; overflow: hidden; border: 1px solid #ddd; margin: 0 auto; } .slide li{ line-height: 400px; text-align: center; font-size: 50px; font-weight: bold; } /*翻页*/ .prev,.next{ font-size: 50px; position: absolute; width: 50px; height: 80px; line-height: 80px; top: 50%; margin-top: -50px; text-align: center; cursor: pointer; display: none; } .slide:hover .prev,.slide:hover .next{ background: rgba(100,100,100,.3); display: block; } .next{right: 0;} /*pagetion*/ .pagetion{ width: 100%; height: 20px; position: absolute; bottom: 10px; right: 0; } ul.page{ padding-left: 50px; } ul.page li{ float: left; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.3); margin-right: 5px; border: 1px solid #ddd; cursor: pointer; } ul.page li.curr{background: #F90650;} </style> </head> <body> <div class="slide"> <ul class="imgBox"> <li><img src="http://hcjp.github.io/work/demo/wfgd/1.jpg"></li> <li><img src="http://hcjp.github.io/work/demo/wfgd/2.jpg"></li> <li><img src="http://hcjp.github.io/work/demo/wfgd/3.jpg"></li> </ul> </div> </body> <script type="text/javascript"src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript" src="index.js"></script> <script type="text/javascript"> $(function(){ $('.slide').slide({ 'type': 1, 'lr' : true, 'pt' : true }); }); </script> </html>
$(function(){ $.fn.slide = function(options) { var defaults = { 'width' : 800, 'height': 400, 'curr' : 0, 'type' : 0, 'lr' : false, 'pt' : false }; var _this = this; var _ul = _this.find('ul.imgBox'); var _lg = _ul.find('li').length;//实际个数 var timer = null; var settings = $.extend({},defaults, options); return this.each(function(){ init(act); }); /*构造*/ function init(callBack){ _ul.html(_ul.html()+_ul.html()); setStyle(); if(settings.lr){ addLr(); } if(settings.pt){ addPt(); } callBack(); } /*添加翻页*/ function addLr(){ _this.append('<span class="prev"><</span><span class="next">></span>'); _this.find('.prev').on('click',prev); _this.find('.next').on('click',next); } /*添加页码*/ function addPt(callBack){ var _html = ''; for(var i = 0;i < _lg;i++){ _html += '<li></li>'; } _this.append('<div class="pagetion"><ul class="page">' + _html + '</ul></div>'); $('.pagetion li').each(function(index){ if(index == settings.curr){ $(this).addClass('curr'); } $(this).on('click',function(){ clearTimeout(timer); settings.curr = index; change(settings.type); act(); }); }); } /*滚动*/ function act(){ timer = setInterval(function(){ settings.curr++; if(settings.curr == _lg + 1){ settings.curr = 1; _ul.css({'left':'0px'}); } change(settings.type); },3000); } /*下一张*/ function next(){ clearTimeout(timer); settings.curr++; if(settings.curr == _lg + 1){ settings.curr = 1; _ul.css({'left':'0px'}); } change(settings.type); act(); } /*上一张*/ function prev(){ clearTimeout(timer); settings.curr--; if(settings.curr == -1){ settings.curr = _lg - 1; _ul.css({'left':'-' + settings.width * _lg + 'px'}); } change(settings.type,'prev'); act(); } /*设置样式*/ function setStyle(){ var _li = _ul.find('li'); _this.css({ 'width': settings.width + 'px', 'height' : settings.height + 'px' }); _ul.css({'width' : settings.width * _li.length + 'px','position':'absolute'}); _ul.find('li').each(function(){ $(this).css({ 'width': settings.width + 'px', 'height' : settings.height + 'px', 'float' : 'left' }); }); } function change(_type,lr){ var _p = settings.curr; if(!_type){ _ul.css({'left':'-' + settings.width * settings.curr + 'px'}); }else{ _ul.stop(true,false).animate({'left':'-' + settings.width * settings.curr + 'px'}); } if(_p == _lg){ _p = 0; } $('.pagetion li').eq(_p).addClass('curr').siblings().removeClass('curr'); } } });
更多http://hcjp.github.io/work/demo/