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

用JavaScript做了平滑切换的焦点轮播图之后，用jQuery写了个简单的淡入淡出的轮播图，代码没有做优化，html结构稍微有一些调整，图片部分用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图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。