Jquery封装幻灯片效果

来源:未知 责任编辑:智问网络 发表时间:2013-10-07 01:00 点击:

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

 

就是类似这种幻灯片:
下面是HTML结构和CSS样式 www.2cto.com
 
<!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="images/1.jpg"/></a></div>
            <div class="content hide"><a href="#" target="_blank"><img  src="images/2.jpg"/></a></div>
            <div class="content hide"><a href="#" target="_blank"><img  src="images/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://www.2cto.com/uploadfile/2011/1128/20111128051443911.rar
 

本文出自 “涂根华前端博客” 博客

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • Gb2312转utf-8编码的方法(vbs+js)
    • 如何使用Ajax技术开发Web应用程序(1)
    • js跳转路径问题
    • JavaScript模仿桌面窗口
    • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
    • 用js检测两个线段是否相交
    • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
    • 我是如何去了解jquery的(六),案例之幻灯片轮换
    • 2011年度最佳 jQuery 插件
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1