jquery 幻灯片效果

Posted 2020-10-14 Anselst

　　对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秒更换，如果鼠标放在上面会取消计时函数，移走后重新计时。