轮播图效果

来源：互联网发布：mac cad 看图软件编辑：程序博客网时间：2024/05/19 22:26

这是一个五秒切换，淡入淡出的轮播图

HTML代码

<div class="bannerInner">       <div class="opacity" style="background: url(http://imgpb.hmjshop.com/banner_11_pc.png) no-repeat center;"></div>       <div style="background: url(http://imgpb.hmjshop.com/banner-new(4).png) no-repeat center;"></div></div>

CSS代码

.banner .bannerInner {    width: 100%;    height: 700px;}.banner .bannerInner div {    width: 100%;    height: 700px;    position: absolute;    opacity: 0;    filter: alpha(opacity=0);}.banner .bannerInner div.opacity{    opacity: 100;    filter: alpha(opacity=1);}

js代码

// 轮播图开始function banner(){var left = $('.banner .btnLeft');//获取左点击 var right = $('.banner .btnRight');//获取右点击 var aSmall = $('.banner .focusList li'); var aLi = $('.banner .bannerInner div'); var iNow = 0;   // 左点击left.click(function () { iNow--; // 判断回流 if (iNow < 0) {iNow = 1;} aLi.eq(iNow).siblings().stop().animate({ opacity: 0}, 800); aLi.eq(iNow).stop().animate({ opacity: 1 }, 800); aSmall.eq(iNow).addClass('bg').siblings().removeClass('bg'); window.clearInterval(timer); timer = setTimeout(run2,5000);});// 右点击切换right.click(function () {iNow++;if (iNow > aLi.length - 1) {iNow = 0;}aLi.eq(iNow).siblings().stop().animate({opacity: 0}, 800);aLi.eq(iNow).stop().animate({opacity: 1}, 800);aSmall.eq(iNow).addClass('bg').siblings().removeClass('bg'); window.clearInterval(timer); timer = setTimeout(run2,5000);});//手动切换aSmall.click(function () {var n = $(this).index();//        var iNow = $(this).index();//        alert(iNow);iNow = n;aLi.eq(iNow).siblings().stop().animate({opacity: 0}, 800);aLi.eq(iNow).stop().animate({opacity: 1}, 800);aSmall.eq(iNow).addClass('bg').siblings().removeClass('bg'); window.clearInterval(timer); timer = setTimeout(run2,5000);});// 封装函数体function move1() {aLi.eq(iNow).siblings().stop().animate({opacity: 0}, 800);aLi.eq(iNow).stop().animate({opacity: 1}, 800);aSmall.eq(iNow).addClass('bg').siblings().removeClass('bg');timer = setTimeout(run2,5000);}// 定个定时器的初始值function run2() {iNow++;if (iNow > aLi.length - 1) {iNow = 0;}move1();}// 定时器// timer = setInterval(run2, 5000);var timer = setTimeout(run2,5000)}

阅读全文

0 0