html5淡出淡入的翻页效果,jQuery实现的淡入淡出图片轮播效果示例

本文实例讲述了jQuery实现的淡入淡出图片轮播效果。分享给大家供大家参考，具体如下：

1.HTML 框架搭建(css代码里宽高的大小与图片的大小一致)

css部分：

* {

padding: 0;

margin:0;

}

ul {

list-style: none;

}

.out {

width: 640px;

height: 270px;

margin:50px auto;

position: relative;

}

.out img{

width: 640px;

height: 270px;

}

.out .img li {

position: absolute;

left:0;

top:0;

display: none;

}

.out .num {

position: absolute;

bottom: 20px;

left: 0;

font-size:0px;

text-align:center;

width: 100%;

}

.out .num li {

width: 20px;

height: 20px;

line-height:20px;

border-radius:50%;

background:#666;

color: #fff;

text-align:center;

display: inline-block;

font-size:16px;

margin:0 3px;

cursor: pointer;

}

.out .num li.active {

background:#a00;

}

.out .btn {

position:absolute;

top: 50%;

margin-top:-30px;

width: 30px;

height: 60px;

line-height:60px;

background:rgba(0, 0, 0, 0.5);

font-size:40px;

color: #fff;

text-align:center;

display: none;

}

.out .left {

left: 0;

}

.out .right {

right: 0;

}

.out:hover .btn {

display: block;

cursor: pointer;

}

HTML部分：

• 

• 

• 

• 

• 

<

>

juery代码实现图片的自动轮播和 手动轮播效果

$(function() {

//代码初始化

var size=$(".img li").size();

for (var i = 1; i <= size; i++) {

var li="

"+i+"";

$(".num").append(li);

};

//手动控制轮播效果

$(".img li").eq(0).show();

$(".num li").eq(0).addClass("active");

$(".num li").mouseover(function() {

$(this).addClass("active").siblings().removeClass("active");

var index = $(this).index();

i=index;

$(".img li").eq(index).fadeIn(300).siblings().fadeOut(300);

})

//自动

var i = 0;

var t = setInterval(move, 1500);

//核心向左的函数

function moveLeft() {

i--;

if (i == -1) {

i = size-1;

}

$(".num li").eq(i).addClass("active").siblings().removeClass("active");

$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);

}

//核心向右的函数

function move() {

i++;

if (i == size) {

i = 0;

}

$(".num li").eq(i).addClass("active").siblings().removeClass("active");

$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);

}

//定时器的开始与结束

$(".out").hover(function() {

clearInterval(t);

}, function() {

t = setInterval(move, 1500)

})

//左边按钮的点击事件

$(".out .left").click(function() {

moveLeft();

})

//右边按钮的点击事件

$(".out .right").click(function() {

move();

})

})

这里使用本站演示图片，构建完整代码如下：

www.jb51.net jQuery淡入淡出轮播图

* {

padding: 0;

margin:0;

}

ul {

list-style: none;

}

.out {

width: 640px;

height: 270px;

margin:50px auto;

position: relative;

}

.out .img li {

position: absolute;

left:0;

top:0;

display: none;

}

.out .num {

position: absolute;

bottom: 20px;

left: 0;

font-size:0px;

text-align:center;

width: 100%;

}

.out .num li {

width: 20px;

height: 20px;

line-height:20px;

border-radius:50%;

background:#666;

color: #fff;

text-align:center;

display: inline-block;

font-size:16px;

margin:0 3px;

cursor: pointer;

}

.out .num li.active {

background:#a00;

}

.out .btn {

position:absolute;

top: 50%;

margin-top:-30px;

width: 30px;

height: 60px;

line-height:60px;

background:rgba(0, 0, 0, 0.5);

font-size:40px;

color: #fff;

text-align:center;

display: none;

}

.out .left {

left: 0;

}

.out .right {

right: 0;

}

.out:hover .btn {

display: block;

cursor: pointer;

}

• 

• 

• 

• 

• 

<

>

$(function() {

//代码初始化

var size=$(".img li").size();

for (var i = 1; i <= size; i++) {

var li="

"+i+"";

$(".num").append(li);

};

//手动控制轮播效果

$(".img li").eq(0).show();

$(".num li").eq(0).addClass("active");

$(".num li").mouseover(function() {

$(this).addClass("active").siblings().removeClass("active");

var index = $(this).index();

i=index;

$(".img li").eq(index).fadeIn(300).siblings().fadeOut(300);

})

//自动

var i = 0;

var t = setInterval(move, 1500);

//核心向左的函数

function moveLeft() {

i--;

if (i == -1) {

i = size-1;

}

$(".num li").eq(i).addClass("active").siblings().removeClass("active");

$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);

}

//核心向右的函数

function move() {

i++;

if (i == size) {

i = 0;

}

$(".num li").eq(i).addClass("active").siblings().removeClass("active");

$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);

}

//定时器的开始与结束

$(".out").hover(function() {

clearInterval(t);

}, function() {

t = setInterval(move, 1500)

})

//左边按钮的点击事件

$(".out .left").click(function() {

moveLeft();

})

//右边按钮的点击事件

$(".out .right").click(function() {

move();

})

})

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试，可获得如下运行效果：

希望本文所述对大家jQuery程序设计有所帮助。