jQuery實(shí)現(xiàn)的淡入淡出圖片輪播效果示例
更新時(shí)間：2018年08月29日 12:07:53 作者：zxz32384
這篇文章主要介紹了jQuery實(shí)現(xiàn)的淡入淡出圖片輪播效果,涉及jQuery基于定時(shí)器的頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)的淡入淡出圖片輪播效果。分享給大家供大家參考，具體如下：
1.HTML 框架搭建（css代碼里寬高的大小與圖片的大小一致）
css部分：
<style>
* {
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;
}
</style>
HTML部分：
<body>
<div class="out ">
<ul class="img ">
<li>
<a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="image/1.jpg " alt=" ">
</a>
</li>
<li>
<a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="image/2.jpg " alt=" ">
</a>
</li>
<li>
<a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="image/3.jpg " alt=" ">
</a>
</li>
<li>
<a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="image/4.jpg " alt=" ">
</a>
</li>
<li>
<a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="image/5.jpg " alt=" ">
</a>
</li>
</ul>
<ul class="num ">
</ul>
<div class="left btn ">
<</div>
<div class="right btn ">></div>
</div>
</body>
juery代碼實(shí)現(xiàn)圖片的自動(dòng)輪播和 手動(dòng)輪播效果
<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript">
$(function() {
//代碼初始化
var size=$(".img li").size();
for (var i = 1; i <= size; i++) {
var li="<li>"+i+"</li>";
$(".num").append(li);
};
//手動(dòng)控制輪播效果
$(".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);
})
//自動(dòng)
var i = 0;
var t = setInterval(move, 1500);
//核心向左的函數(shù)
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);
}
//核心向右的函數(shù)
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);
}
//定時(shí)器的開始與結(jié)束
$(".out").hover(function() {
clearInterval(t);
}, function() {
t = setInterval(move, 1500)
})
//左邊按鈕的點(diǎn)擊事件
$(".out .left").click(function() {
moveLeft();
})
//右邊按鈕的點(diǎn)擊事件
$(".out .right").click(function() {
move();
})
})
</script>
這里使用本站演示圖片，構(gòu)建完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>m.fzitv.net jQuery淡入淡出輪播圖</title>
<style>
* {
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;
}
</style>
</head>
<body>
<div class="out ">
<ul class="img ">
<li>
<a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Guardians-of-the-Galaxy-Poster-High-Res.jpg" alt=" ">
</a>
</li>
<li>
<a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg" alt=" ">
</a>
</li>
<li>
<a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg" alt=" ">
</a>
</li>
<li>
<a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg" alt=" ">
</a>
</li>
<li>
<a href="# " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg" alt=" ">
</a>
</li>
</ul>
<ul class="num ">
</ul>
<div class="left btn ">
<</div>
<div class="right btn ">></div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//代碼初始化
var size=$(".img li").size();
for (var i = 1; i <= size; i++) {
var li="<li>"+i+"</li>";
$(".num").append(li);
};
//手動(dòng)控制輪播效果
$(".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);
})
//自動(dòng)
var i = 0;
var t = setInterval(move, 1500);
//核心向左的函數(shù)
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);
}
//核心向右的函數(shù)
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);
}
//定時(shí)器的開始與結(jié)束
$(".out").hover(function() {
clearInterval(t);
}, function() {
t = setInterval(move, 1500)
})
//左邊按鈕的點(diǎn)擊事件
$(".out .left").click(function() {
moveLeft();
})
//右邊按鈕的點(diǎn)擊事件
$(".out .right").click(function() {
move();
})
})
</script>
</body>
</html>
使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試，可獲得如下運(yùn)行效果：
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery圖片操作技巧大全》、《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery表格插件ParamQuery簡(jiǎn)單使用方法示例
這篇文章主要介紹了jQuery表格插件ParamQuery簡(jiǎn)單使用方法示例,大家參考使用吧2013-12-12
這篇文章主要介紹了使用jQuery獲取元素父節(jié)點(diǎn)的方法,通俗易懂,需要的朋友可以參考下。2016-06-06
基于jQuery的Spin Button自定義文本框數(shù)值自增或自減
這個(gè)jquery 插件可以讓你的文本框增加一個(gè)自增或自減的小按鈕，方便輸入數(shù)值的控制。2010-07-07
jQuery實(shí)現(xiàn)廣告顯示和隱藏動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)廣告顯示和隱藏動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)左右無縫輪播圖的具體代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了利用jQuery輕松實(shí)現(xiàn)單選功能的相關(guān)資料,需要的朋友可以參考下2023-11-11
基于jquery實(shí)現(xiàn)一張圖片點(diǎn)擊鼠標(biāo)放大再點(diǎn)縮小
一張圖片點(diǎn)擊鼠標(biāo)放大，再點(diǎn)縮小基于jquery1.8.3實(shí)現(xiàn)，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-09-09
淺析jquery ajax異步調(diào)用方法中不能給全局變量賦值的原因及解決方法
本篇文章主要是對(duì)jquery ajax異步調(diào)用方法中不能給全局變量賦值的原因及解決方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
jQuery Easyui datagrid行內(nèi)實(shí)現(xiàn)【添加】、【編輯】、【上移】、【下移】
本篇文章主要介紹jQuery Easyui datagrid行內(nèi)實(shí)現(xiàn)【添加】、【編輯】、【上移】、【下移】 。datagrid現(xiàn)在具有行編輯能力了，可以添加和編輯數(shù)據(jù)，同時(shí)對(duì)行內(nèi)數(shù)據(jù)上移下移。2016-12-12
jQuery實(shí)現(xiàn)選項(xiàng)聯(lián)動(dòng)輪播效果【附實(shí)例】
下面小編就為大家?guī)硪黄猨Query實(shí)現(xiàn)選項(xiàng)聯(lián)動(dòng)輪播效果【附實(shí)例】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-04-04