Jquery封装幻灯片效果

发布时间：2020-06-05 22:58:21 作者：涂根华
来源：网络阅读：1412

前几天在我同事博客里面看到一篇幻灯片所以觉得用Jqeury写幻灯片也并不是很难就是和我在博客里面的tab自动切换的原理是一模一样的只是形式不同而已！所以今天也写了一个常见的幻灯片效果用Jquery写的很简单也是用我上次tab自动切换的js 所以原理没有什么可说的不懂的可以看看上次写的TAB自动切换代码：下面的一张截图：

Jquery封装幻灯片效果

就是类似这种幻灯片：

下面是HTML结构和CSS样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style> 
.Marquee{ width:490px; margin:50px auto 0; overflow:hidden;}  
body,div,ul,li{ margin:0; padding:0;}  
ul,li{ list-style:none;}  
img{ display:block; border:none;}  
.content-main{ width:490px; height:170px; overflow:hidden;}  
.content{ width:490px; height:170px; overflow:hidden;}  
.hide{ display:none;}  
.menu{ width:490px; height:22px; overflow:hidden; background:#966;}  
.menu li{ width:160px; height:22px; overflow:hidden; float:left; line-height:22px; text-align:center;}  
.menu li.last-col{ width:170px; height:22px; overflow:hidden;}  
.current{ background: #F00;}  
.content a{ width:490px; height:170px; overflow:hidden; display:block;}  
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>   
<script src="autoTab.js"></script> 
</head> 
 
<body> 
    <div id="Marquee" class="Marquee">   
        <div class="content-main"> 
            <div class="content"><a href="#" target="_blank"><img  src="p_w_picpaths/1.jpg"/></a></div> 
            <div class="content hide"><a href="#" target="_blank"><img  src="p_w_picpaths/2.jpg"/></a></div> 
            <div class="content hide"><a href="#" target="_blank"><img  src="p_w_picpaths/3.jpg"/></a></div> 
        </div> 
        <ul class="menu"> 
            <li class="current">tab1</li> 
            <li>tab2</li> 
            <li class="last-col">tab3</li> 
        </ul> 
    </div>   
    <script type="text/javascript"> 
        new tabMarquee("#Marquee",3);  
    </script> 
</body> 
</html>

JS代码如下:

// JavaScript Document  
 
function tabMarquee(obj,count){  
    _this = this;  
    _this.obj = obj;  
    _this.count = count;  
    _this.time = 3000;  //停留的时间  
    _this.n = 0;  
    var t;  
    this.slider = function(){  
        $(_this.obj + " .menu li").bind("mouseover",function(event){  
            $(event.target).addClass("current").siblings().removeClass("current");  
            var index = $(_this.obj + " .menu li").index(this);  
            $(_this.obj + " .content-main .content").eq(index).show().siblings().hide();  
            _this.n = index;      
        })  
    }  
      
    this.addHover = function(){  
        $(_this.obj).hover(function(){  
            clearInterval(t);     
        },function(){  
            t = setInterval(_this.autoPlay,_this.time);   
        })    
    }  
    this.autoPlay = function(){  
        _this.n = _this.n >=(_this.count-1) ? 0 : ++_this.n;  
        $(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");      
    }  
    this.factory = function(){  
        this.slider();  
        this.addHover();  
        t = setInterval(this.autoPlay,_this.time);    
    }  
    this.factory();  
}

下面传个附件看不懂可以下载下来先看看效果然后稍微理解下就ok了！其实说真的js重要但是HTML结构和CSS样式同样重要有时结构写好的话 css写好的话 js就很简单！！

附件：http://down.51cto.com/data/2359366

Jquery封装幻灯片效果

相关阅读