jquery图片轮播

发布时间：2020-06-04 18:27:45 来源：网络阅读：720 作者：huxiaoqi567 栏目：web开发
效果图：

jquery图片轮播

<!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>
向AI问一下细节
jquery图片轮播

效果图：

猜你喜欢

最新资讯

相关推荐

相关标签
