基于jQuery實現(xiàn)淡入淡出效果輪播圖
更新時間：2020年07月31日 10:41:37 作者：少東的魔法香蕉
這篇文章主要為大家詳細介紹了基于jQuery淡入淡出效果輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
用JavaScript做了平滑切換的焦點輪播圖之后，用jQuery寫了個簡單的淡入淡出的輪播圖，代碼沒有做優(yōu)化，html結構稍微有一些調(diào)整，圖片部分用ul替換了之前用的div。
html結構如下：
<div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="DSC01627.jpg" alt="pic1"></a></li> <li><a href="javascript:;"><img src="DSC01628.jpg" alt="pic2"></a></li> <li><a href="javascript:;"><img src="DSC02637.jpg" alt="pic3"></a></li> </ul> <ul id="position"> <li class="cur"></li> <li class=""></li> <li class=""></li> </ul> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div>
css設置：
*{
margin: 0;
padding: 0;
text-decoration: none;
}
ul{
list-style: none;
}
#container{
position: relative;
width: 400px;
height: 200px;
margin: 20px auto;
}
.pic li {
position: absolute;
top: 0;
left: 0;
display: none;
}
.pic li img {
width: 400px;
height: 200px;
}
#position{
position: absolute;
bottom: 0;
right:0;
margin: 0;
background: #000;
opacity: 0.4;
width: 400px;
text-align: center;
}
#position li{
width: 10px;
height: 10px;
margin:0 2px;
display: inline-block;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #afafaf;
}
#position .cur{
background-color: #ff0000;
}
.arrow {
cursor: pointer;
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 50%;
margin-top: -20px; /*width的一半*/
background-color: RGBA(0,0,0,.3);
color: #fff;
}
.arrow:hover {
background-color: RGBA(0,0,0,.7);
}
#container:hover .arrow {
display: block;
}
#prev {
left: 20px;
}
#next {
right: 20px;
}
JavaScript代碼：
$(function(){
//第一張顯示
$(".pic li").eq(0).show();
//鼠標滑過手動切換，淡入淡出
$("#position li").mouseover(function() {
$(this).addClass('cur').siblings().removeClass("cur");
var index = $(this).index();
i = index;//不加這句有個bug，鼠標移出小圓點后，自動輪播不是小圓點的后一個
// $(".pic li").eq(index).show().siblings().hide();
$(".pic li").eq(index).fadeIn(500).siblings().fadeOut(500);
});
//自動輪播
var i=0;
var timer=setInterval(play,2000);
//向右切換
var play=function(){
i++;
i = i > 2 ? 0 : i ;
$("#position li").eq(i).addClass('cur').siblings().removeClass("cur");
$(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500);
}
//向左切換
var playLeft=function(){
i--;
i = i < 0 ? 2 : i ;
$("#position li").eq(i).addClass('cur').siblings().removeClass("cur");
$(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500);
}
//鼠標移入移出效果
$("#container").hover(function() {
clearInterval(timer);
}, function() {
timer=setInterval(play,2000);
});
//左右點擊切換
$("#prev").click(function(){
playLeft();
})
$("#next").click(function(){
play();
})
})
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
input 輸入框獲得/失去焦點時隱藏/顯示文字(jquery版)
input輸入框在獲得或失去焦點時隱藏或顯示文字，這樣的焦點效果想必很多朋友在填寫form表格的時候都曾見識過吧，本文使用jquery實現(xiàn)以下，感興趣的朋友可以參考下哈2013-04-04
實現(xiàn)錨點鏈接之間的平滑滾動的方法有很多，在接下來的文章中為大家介紹下，jquery是如何實現(xiàn)的，感興趣的朋友不要錯過2013-12-12
本篇文章主要介紹了jQuery DOM節(jié)點的遍歷方法小結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了基于jQuery ligerUI實現(xiàn)分頁樣式,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了利用jq讓你的div居中的好方法，有需要的朋友可以參考一下2013-11-11
jQuery插件fullPage.js實現(xiàn)全屏滾動效果
這篇文章主要為大家詳細介紹了jQuery全屏滾動插件fullPage.js的使用方法，可制作全屏滾動網(wǎng)頁,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JQuery入門——用bind方法綁定事件處理函數(shù)應用介紹
bind()功能是為每個選擇元素的事件綁定處理函數(shù),感興趣的你可以了解下它的語法bind(type, [data], fn),參數(shù)data是作為event.data屬性值傳遞對象的額外數(shù)據(jù)對象,好好學習希望本可以幫助到你2013-02-02
Jquery加載時從后臺讀取數(shù)據(jù)綁定到dropdownList實例
從后臺讀取數(shù)據(jù)綁定到dropdownList，option選項value動態(tài)賦值，具體實現(xiàn)如下，感興趣的朋友可以參考下哈2013-06-06
這篇文章主要介紹了jQuery實現(xiàn)浮動層隨瀏覽器滾動條滾動的方法,涉及jQuery操作頁面元素滾動的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細介紹了jQuery樹形控件zTree使用方法，zTree樹插件的基本使用方法，感興趣的小伙伴們可以參考一下2016-08-08