慕仔4209126
2018-09-09 17:58:09浏览 8758
效果图：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery switchable图片轮播</title> <link rel='stylesheet' href='css/reset.css'> <style type="text/css"> .ui-switchable{ margin:0px auto; width:690px; height:260px; border: 1px solid; overflow: hidden; } .ui-switchable ul{ position: relative; width:130px; top:-260px; left:560px; } .ui-switchable ul li a{ display: block; width:130px; height:33px; background:#fff; color:#666; text-align: center; letter-spacing: 1px; line-height: 33px; } .ui-switchable ul li a.cur{ background: #AA0000; color:#fff; text-decoration: underline; } .ui-switchable-content-wrapper{ width:560px; height:260px; position: relative; } .ui-switchable .ui-switchable-content{ width:0px; height:0px; position: relative; } </style> <script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script> <script type="text/javascript"> (function($){ $.fn.Switchable = function(config){ var self,li,a,content,fn,cur,firstImg,curIndex = 0,len = 0; var _cfg = {effect:'fade'}; var _config = $.extend({},_cfg,config); self = this; li = $('ul li',self); a = $('a',li); len = li.length; firstImg = a.eq(0); content = $("<div class='ui-switchable-content-wrapper'><img class='ui-switchable-content'></img></div>"); //展示第一张图片 content.prependTo($(self)).find('img').attr('src',firstImg.attr('imgsrc')); show(curIndex); fn = setInterval(show,4000); a.bind('click',function(){ curIndex = a.index($(this)); show(); }); a.bind({ 'mouseenter':function(){ clearInterval(fn); },'mouseleave':function(){ fn = setInterval(show,4000); } }); function show(){ cur = $('ul li a',self).eq(curIndex); var src = cur.attr('imgsrc'); cur.addClass('cur').parent().siblings().find('a').removeClass('cur'); content.find('img').attr('src',src).css({width:'0px',height:'0px',left:'280px',top:'130px'}).animate({width:'560px',height:'260px',left:'0px',top:'0px'},300,function(){ }); curIndex == len-1? curIndex=0:curIndex++; }; }; })(jQuery); </script> </head> <body> <div id='demo1' class='ui-switchable'> <ul> <li><a href='#' imgsrc='images/01.JPG'>9折话费</a></li> <li><a href='#' imgsrc='images/02.JPG'>年终风暴</a></li> <li><a href='#' imgsrc='images/03.JPG'>item3</a></li> <li><a href='#' imgsrc='images/04.JPG'>item4</a></li> <li><a href='#' imgsrc='images/01.JPG'>item5</a></li> <li><a href='#' imgsrc='images/02.JPG'>item6</a></li> <li><a href='#' imgsrc='images/03.JPG'>item7</a></li> <li><a href='#' imgsrc='images/04.JPG'>item8</a></li> </ul> </div> <script type="text/javascript"> $(function(){ $('#demo1').Switchable(); }); </script> </body> </html>