- <!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='p_w_picpaths/01.JPG'>9折话费</a></li>
- <li><a href='#' imgsrc='p_w_picpaths/02.JPG'>年终风暴</a></li>
- <li><a href='#' imgsrc='p_w_picpaths/03.JPG'>item3</a></li>
- <li><a href='#' imgsrc='p_w_picpaths/04.JPG'>item4</a></li>
- <li><a href='#' imgsrc='p_w_picpaths/01.JPG'>item5</a></li>
- <li><a href='#' imgsrc='p_w_picpaths/02.JPG'>item6</a></li>
- <li><a href='#' imgsrc='p_w_picpaths/03.JPG'>item7</a></li>
- <li><a href='#' imgsrc='p_w_picpaths/04.JPG'>item8</a></li>
- </ul>
- </div>
- <script type="text/javascript">
- $(function(){
- $('#demo1').Switchable();
- });
- </script>
- </body>
- </html>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。