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

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