$(function(){
//将图片转变成背景
$(".flash").append("<div class='fbg'><ul class='small'></ul></div>");
$(".ul_flash li").each(function(){
$(".small").append("<li><img src='"+$(this).find("img").attr("small")+"'/></li>");
$(this).css({"backgroundImage":"url("+$(this).find("img").attr("src")+")"}).find("img").remove();
})
//定位数字
$(".small").css("left",(document.documentElement.clientWidth - $(".small").innerWidth(true)) / 2).find("li:eq(0)").addClass("on");
$(window).resize(function(){$(".small").css("left",(document.documentElement.clientWidth - $(".small").innerWidth(true)) / 2).find("li:eq(0)").addClass("on");})
window.onload = function()
{
var play_num =0;
//设置轮播间隔时间
var auto_time = 4000;
//获取图片数量
var auto_num = $(".ul_flash li").length;
//获取图片高度
var zIndex = 1;
//轮播动画
function play(play_num)
{
$(".ul_flash li").eq(play_num).css("zIndex",zIndex).animate({opacity:1},1000,function(){
$(".ul_flash li:not(:eq("+play_num+"))").css("opacity",0);
});
$(".small li").removeClass("on").eq(play_num).addClass("on");
zIndex ++;
}
play(play_num);
play_num++;
if (play_num == auto_num)
{
play_num = 0;
}
auto_play = setInterval (function(){
play(play_num)
play_num++;
if (play_num == auto_num)
{
play_num = 0;
}
},auto_time)
//鼠标事件
$(".small li").click(function(){
$(".ul_flash").stop();
auto_stop();
play($(this).index());
if($(this).index()==auto_num-1)
{
play_num=0;
}
else
{
play_num = $(this).index()+1;
}
auto_replay();
});
//停止播放
function auto_stop()
{
clearInterval(auto_play);
}
//重新播放
function auto_replay()
{
auto_play = setInterval (function(){
play(play_num)
play_num++;
if (play_num == auto_num)
{
play_num = 0;
}
},auto_time)
}
}
})
jquery z-index 滚动
原文作者:GongChao
原文地址: https://segmentfault.com/a/1190000000441672
本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
原文地址: https://segmentfault.com/a/1190000000441672
本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。