快捷導(dǎo)航

基于jQuery實現(xiàn)淡入淡出效果輪播圖

更新時間：2020年07月31日 10:41:37 作者：少東的魔法香蕉

這篇文章主要為大家詳細(xì)介紹了基于jQuery淡入淡出效果輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

用JavaScript做了平滑切換的焦點輪播圖之后，用jQuery寫了個簡單的淡入淡出的輪播圖，代碼沒有做優(yōu)化，html結(jié)構(gòu)稍微有一些調(diào)整，圖片部分用ul替換了之前用的div。

html結(jié)構(gòu)如下：

<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">&lt;</a>
 <a href="javascript:;" id="next" class="arrow">&gt;</a>

 </div>

css設(shè)置：

*{ 
 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();
 //鼠標(biāo)滑過手動切換，淡入淡出
 $("#position li").mouseover(function() {
 $(this).addClass('cur').siblings().removeClass("cur");
 var index = $(this).index();
 i = index;//不加這句有個bug，鼠標(biāo)移出小圓點后，自動輪播不是小圓點的后一個
 // $(".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);
 }
 //鼠標(biāo)移入移出效果
 $("#container").hover(function() {
 clearInterval(timer);
 }, function() {
 timer=setInterval(play,2000);
 });
 //左右點擊切換
 $("#prev").click(function(){
 playLeft();
 })
 $("#next").click(function(){
 play();
 })
 })

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: