轮播图效果

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

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)
}