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

转载于:https://www.cnblogs.com/Anselst-Blog/p/7822605.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！