Python之路【第二十二篇】:轮播图片CSS

时间:2024-10-08 20:33:56

轮播代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.1.1.js"></script>
<title>Title</title>
<style>
.outer{
width: 790px;
height: 340px;
margin: 80px auto;
position: relative;
} .img li{
position: absolute;
list-style: none;
top:0;
left: 0; } .num{
position: absolute;
bottom: 0px;
left: 280px;
/*background-color: #dce7f4;*/
list-style: none;
} .num li{
display: inline-block;
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 18px;
margin-left: 14px;
} .btn{
position: absolute;
top: 50%;
width: 30px;
height: 60px;
background-color: lightgrey;
color: white; text-align: center;
line-height: 60px;
font-size: 30px;
opacity: 0.8;
margin-top: -30px;
display: none; } .left{
left: 0;
} .right{
right: 0;
} .outer:hover .btn{
display: block;
} .num .active{
background-color: red; }
</style>
</head>
<body> <div class="outer"> <ul class="img">
<li><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/5.jpg" alt=""></a></li>
<li><a href=""><img src="img/6.jpg" alt=""></a></li>
</ul> <ul class="num ">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul>
<div class="left btn"> < </div>
<div class="right btn"> > </div>
</div>
<script>
// 通过jquery自动创建按钮标签
var img_num=$(".img li").length; for (var j=0;j<(img_num);j++){
$(".num").append("<li></li>") }
$(".num li").eq(0).addClass("active"); //手动轮播 // $(".num li").mouseover(function () {
// var index=$(this).index();
//this不应该加引号
// $("this").addClass("active").siblings().removeClass("active")
//
// }) $(".num li").mouseover(function () { // var index=$(this).index();
i=$(this).index();
$(this).addClass("active").siblings().removeClass("active");
//以下两种方法都可实现
// $(".img li").eq(index).show(1).siblings().hide()
$(".img li").eq(index).stop().fadeIn(200).siblings().stop().fadeOut(200)
}); //自动轮播
var c=setInterval(GO_R,1500);
var i=0; function GO_R() {
if(i==img_num-1){
i=-1
}
i++;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000) } function GO_L() {
if(i==0){
i=img_num
}
i--;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
} $(".outer").hover(function () {
clearInterval(c)
},function () {
c=setInterval(GO_R,1500) }) //button加定播
// $(".right").bind("click",GO_R)
$(".right").click(GO_R);
$(".left").click(GO_L);
</script> </body>
</html>

效果展示:

Python之路【第二十二篇】:轮播图片CSS