基于jQuery实现淡入淡出效果轮播图

用JavaScript做了平滑切换的焦点轮播图之后，用jQuery写了个简单的淡入淡出的轮播图，代码没有做优化，html结构稍微有一些调整，图片部分用ul替换了之前用的div。

html结构如下：

rush:xhtml;">

css设置：

rush: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,.3);
color: #fff;
}
.arrow:hover {
background-color: RGBA(0,.7);
}

container:hover .arrow {

display: block;
}

prev {

left: 20px;
}

next {

right: 20px;
}

JavaScript代码：

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

精彩专题分享： 图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。