做同城网站还有机会吗,网络环境搭建,网店商品页面制作加工,做网站页面的需要哪些技巧图片轮播效果如何实现呢本文主要介绍了JQuery实现图片轮播效果的制作原理以及实现代码#xff0c;文章末尾附上源码下载#xff0c;具有很好的参考价值。下面跟着小编一起来看下吧#xff0c;希望能帮助到大家。用JQuery操作DOM确实很方便#xff0c;并且JQuery提供了非常人…图片轮播效果如何实现呢本文主要介绍了JQuery实现图片轮播效果的制作原理以及实现代码文章末尾附上源码下载具有很好的参考价值。下面跟着小编一起来看下吧希望能帮助到大家。用JQuery操作DOM确实很方便并且JQuery提供了非常人性化的API应付我们的各种需求大大简化了js的代码。制作原理这里大概说一下整个流程1将除了第一张以外的图片全部隐藏2获取第一张图片的alt信息显示在信息栏并添加点击事件3为4个按钮添加点击侦听点击相应的按钮用fadeOutfadeIn方法显示图片4设置setInterval定时执行切换函数代码说明filter(:visible) :获取所有可见的元素unbind()从匹配的元素中删除绑定的事件siblings取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合程序源码HTML部分1234 CSS部分#banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden;}#banner_list img {border:0px;}#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity30);opacity:0.3;z-index:1000;cursor:pointer; width:478px;}#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity80);opacity:0.8; border:1px solid #fff;z-index:1002;margin:0; padding:0; bottom:3px; right:5px;}#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}#banner ul li.on { background:#900}#banner_list a{position:absolute;}javascript代码:var t n 0, count;$(document).ready(function(){count$(#banner_list a).length;$(#banner_list a:not(:first-child)).hide();$(#banner_info).html($(#banner_list a:first-child).find(img).attr(alt));$(#banner_info).click(function(){window.open($(#banner_list a:first-child).attr(href), _blank)});$(#banner li).click(function() {var i $(this).text() -1;//获取Li元素内的值即1234n i;if (i 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);}相关推荐
