JQuery实现图片轮播效果

前端之家收集整理的这篇文章主要介绍了JQuery实现图片轮播效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,大大简化了js的代码

制作原理:

这里大概说一下整个流程:

1,将除了第一张以外的图片全部隐藏,

2,获取第一张图片的alt信息显示在信息栏,并添加点击事件

3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片

4,设置setInterval,定时执行切换函数

代码说明:

filter(":visible") :获取所有可见的元素

unbind():从匹配的元素中删除绑定的事件

siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

程序源码

HTML部分:

CSS部分:

javascript代码:

= count) return; $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'),"_blank")}) $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000); document.getElementById("banner").style.background=""; $(this).toggleClass("on"); $(this).siblings().removeAttr("class"); }); t = setInterval("showAuto()",4000); $("#banner").hover(function(){clearInterval(t)},function(){t = setInterval("showAuto()",4000);}); })

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

原文链接:https://www.f2er.com/jquery/39446.html

猜你在找的jQuery相关文章