jquery 幻灯片效果

Posted Anselst

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery 幻灯片效果相关的知识,希望对你有一定的参考价值。

  对jquery没有深入研究过,只是怎么简单怎么来,符合自己的需求即可。以下是代码。


  使用的是Thinkphp框架,图片等是循环出来的,下面是模板中的代码:

<div id="rotation">
  <volist name="banner" id="vo">
     <div mid="{$i}">
        <a href=""><img alt="" src="__PUBLIC__/images/post{$i}.jpg"></a>
         <span>{$vo.title}</span>
      </div>
  </volist>
  <ul id="banner-button">   <volist name="banner" id="vo">   <li mid="{$i}">·</li> </volist> </ul>
</div>

  在html中是这样:

<div id="rotation">
    <div mid="1">
        <a href=""><img alt="" src="/images/post1.jpg"></a>
        <span>标题</span>
    </div>
    <div mid="2">
        <a href=""><img alt="" src="/images/post2.jpg"></a>
        <span>标题</span>
    </div>
    <div mid="3">
        <a href=""><img alt="" src="/images/post3.jpg"></a>
        <span>标题</span>
    </div>
    <div mid="4">
        <a href=""><img alt="" src="/images/post4.jpg"></a>
        <span>标题</span>
    </div>
    <ul id="banner-button">
        <li mid="1">·</li>  // 这些是点击按钮切换到对应数字的图片
        <li mid="2">·</li>
        <li mid="3">·</li>
        <li mid="4">·</li>
    </ul>
</div>

  CSS代码:

#rotation {
    width: 669px;
    padding: 10px 10px 0 10px;
    border: 1px solid #ccc;
    margin-bottom: 3em;
    box-shadow: 5px 5px 5px #ccc;
    background: #fff;
    position: relative;
}
#rotation a {
    height: 309px;
    overflow: hidden;
    display: inline-block;
}
#rotation img {
    width: 100%;
    height: 100%;
}
#rotation span {
    padding: 10px 0;
    padding-left: 15px;
    font-size: 18px;
    margin: 0;
    color: #666;
    cursor: default;
    display: inline-block;
}
span#tip2, span#tip3 {
    display: none;
}
#img2, #img3 {
    display: none;
}
#rotation ul {
    display: inline-block;
    cursor: default;
    position: absolute;
    bottom: 0;
    right: 10px;
}
#rotation ul li {
    display: inline;
    color: #666;
    font-size: 3em;
    line-height: 38px;
    cursor: pointer;
}
#rotation ul li.active {
    color: #bbb;
}

  jquery代码:

var t = button_id = 0, count;
$(document).ready(function(){

    $(\'#rotation div:not(:first)\').hide();  // 隐藏除了第一个的其他图片
    $(\'#rotation ul li:first\').addClass(\'active\');  // 给按钮加上样式
    count = $(\'#rotation div\').length;  // 计算总数
    $(\'#banner-button li\').click(function(){
        button_id = $(this).attr(\'mid\')-1;  // 点击的是第几个按钮
        if ($(\'#rotation div:visible\').attr(\'mid\') != button_id+1){ // 排除正在展示的图片按钮被点击
            $(\'#rotation div\').filter(":visible").hide().parent().children().eq(button_id).fadeIn(1000);  // 隐藏可见的div并显示对应的div
            $(this).toggleClass("active");  // 给按钮增加样式
            $(this).siblings().removeAttr("class");  // 移除之前的样式
        }
    });

t
= setInterval("show_bann()", 4000); // 自动执行

    $(\'#rotation\').hover(function(){
      clearInterval(t);  
    },function(){
      t = setInterval("show_bann()", 4000);
    });

});

function show_bann()
{
    button_id = button_id >=(count -1) ?0 : ++button_id;
    $("#banner-button li").eq(button_id).trigger(\'click\');
}

  下面是完成后的样子,图片和字每4秒更换,如果鼠标放在上面会取消计时函数,移走后重新计时。

  

以上是关于jquery 幻灯片效果的主要内容,如果未能解决你的问题,请参考以下文章

几个实用的 jQuery 插件

jquery时间轴幻灯展示源代码

老牌的响应式 jQuery 幻灯片效果

html jQuery效果 - 幻灯片开始

ASP.NET Grid 中的 Jquery 幻灯片效果

基于jQuery幻灯片插件Slippry