Jquery淡入淡出轮播图
因为代码不多所以我就写一个html文件里了
html代码
<div class="banner"> <ul> <li><a href="javascript:;"><img src="./1 (1).png" /></a></li> <li><a href="javascript:;"><img src="./1 (2).png" /></a></li> <li><a href="javascript:;"><img src="./1 (3).png" /></a></li> <li><a href="javascript:;"><img src="./1 (4).png" /></a></li> <li><a href="javascript:;"><img src="./1 (5).png" /></a></li> </ul> <div class="arrow"> <span class="arrow-l"><</span> <span class="arrow-r">></span> </div> <ol> <li class="dot"></li> <li></li> <li></li> <li></li> <li></li> </ol> </div>
css代码
<style> * { margin: 0; padding: 0; box-sizing: border-box; } body{ background-color:#fff; } li{ list-style:none; } .banner{ width:1920px; height:450px; margin:100px auto; position:relative; .banner ul li{ display:none; position:absolute; } .banner ul li:first-child{ display:block; } .banner ul li a{ display:block; } .banner ul li a img{ width:1920px; height:auto; .arrow span { width:20px; height:30px; background:rgba(0,0,0,0.05); color:#fff; position:absolute; top:50%; transform:translate(0,-50%); line-height:30px; text-align:center; font-size:20px; cursor:pointer; } .arrow-l{ left:20px; } .arrow-r{ right:20px; } .banner ol{ position:absolute; bottom:20px; right:60px; } .banner ol li { float: left; width: 12px; height: 12px; border-radius: 50%; background: rgba(0,0,0,0.4); margin-left:12px; cursor:pointer; border:2px solid rgba(255,255,255,0.3); } .banner ol li.dot{ border:2px solid rgba(0,0,0,0.4); background:#fff; } </style>
javascript代码
<script>
//切换图片函数
function bannerImg(count,Img,dot) {
//让索引为count的li元素显示出来,siblings其他li元素隐藏
$(Img).eq(count).stop("slow").fadeIn().siblings("li").stop().fadeOut("slow");
//切换当前索引的小圆点样式
$(dot).eq(count).addClass("dot").siblings("li").removeClass("dot");
}
$(function () {
var count = 0;
var banImg = $(".banner ul li");
var bandot = $(".banner ol li");
//下一张
$(".arrow-r").click(function () {
count++;
if (count == banImg.length) {
count = 0;
}
bannerImg(count, banImg, bandot);
});
//上一张
$(".arrow-l").click(function () {
count--;
if (count < 0) {
count = banImg.length - 1;
}
bannerImg(count, banImg, bandot);
});
//小圆点控制轮播
$(bandot).click(function () {
count = $(this).index();
bannerImg(count, banImg, bandot);
})
//定时器轮播
var adTimer;
adTimer = setInterval(function () {
count++;
if (count == banImg.length) {
count = 0;
}
bannerImg(count, banImg, bandot);
}, 3000);
//鼠标移入停止轮播
$(".banner").mouseover(function () {
clearInterval(adTimer);
});
//鼠标移出开始轮播
$(".banner").mouseout(function () {
adTimer = setInterval(function () {
count++;
if (count == banImg.length) {
count = 0;
}
bannerImg(count, banImg, bandot);
}, 3000);
});
})
</script>
完整的代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body{ background-color:#fff; } li{ list-style:none; } .banner{ width:1920px; height:450px; margin:100px auto; position:relative; } .banner ul li{ display:none; position:absolute; } .banner ul li:first-child{ display:block; } .banner ul li a{ display:block; } .banner ul li a img{ width:1920px; height:auto; } .arrow span { width:20px; height:30px; background:rgba(0,0,0,0.05); color:#fff; position:absolute; top:50%; transform:translate(0,-50%); line-height:30px; text-align:center; font-size:20px; cursor:pointer; } .arrow-l{ left:20px; } .arrow-r{ right:20px; } .banner ol{ position:absolute; bottom:20px; right:60px; } .banner ol li { float: left; width: 12px; height: 12px; border-radius: 50%; background: rgba(0,0,0,0.4); margin-left:12px; cursor:pointer; border:2px solid rgba(255,255,255,0.3); } .banner ol li.dot{ border:2px solid rgba(0,0,0,0.4); background:#fff; } </style> </head> <body> <div class="banner"> <ul> <li><a href="javascript:;"><img src="./1 (1).png" /></a></li> <li><a href="javascript:;"><img src="./1 (2).png" /></a></li> <li><a href="javascript:;"><img src="./1 (3).png" /></a></li> <li><a href="javascript:;"><img src="./1 (4).png" /></a></li> <li><a href="javascript:;"><img src="./1 (5).png" /></a></li> </ul> <div class="arrow"> <span class="arrow-l"><</span> <span class="arrow-r">></span> </div> <ol> <li class="dot"></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> <!-- 引入JQ框架 --> <script src="./jquery-1.9.1.js"></script> <script> //切换图片函数 function bannerImg(count,Img,dot) { //让索引为count的li元素显示出来,siblings其他li元素隐藏 $(Img).eq(count).stop("slow").fadeIn().siblings("li").stop().fadeOut("slow"); //切换当前索引的小圆点样式 $(dot).eq(count).addClass("dot").siblings("li").removeClass("dot"); } $(function () { var count = 0; var banImg = $(".banner ul li"); var bandot = $(".banner ol li"); //下一张 $(".arrow-r").click(function () { count++; if (count == banImg.length) { count = 0; } bannerImg(count, banImg, bandot); }); //上一张 $(".arrow-l").click(function () { count--; if (count < 0) { count = banImg.length - 1; } bannerImg(count, banImg, bandot); }); //小圆点控制轮播 $(bandot).click(function () { count = $(this).index(); bannerImg(count, banImg, bandot); }) //定时器轮播 var adTimer; adTimer = setInterval(function () { count++; if (count == banImg.length) { count = 0; } bannerImg(count, banImg, bandot); }, 3000); //鼠标移入停止轮播 $(".banner").mouseover(function () { clearInterval(adTimer); }); //鼠标移出开始轮播 $(".banner").mouseout(function () { adTimer = setInterval(function () { count++; if (count == banImg.length) { count = 0; } bannerImg(count, banImg, bandot); }, 3000); }); }) </script> </body> </html>