轮播图

来源：互联网发布：怎么用excel做数据分析编辑：程序博客网时间：2024/05/05 06:11

在做项目的过程中，经常会用到轮播图，轮播图的实现主要通过“平移量”来实现。简单总结一下：

HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="shufflingFigure.css"/>
</head>
<body>
<div class="wheelwrap">
<ul class="wheelul">
<li class="first">1</li>
<li class="second">2</li>
<li class="third">3</li>
</ul>
<ul class="nav">
<li></li>
<li></li>
<li></li>
</ul>
<div class="last"><</div>
<div class="next">></div>
</div>
</body>
<script src="shufflingFigure.js" type="text/javascript" charset="utf-8"></script>
</html>

CSS代码：

*{margin: 0;padding: 0;}
.wheelwrap{height: 300px;margin:200px auto 0;overflow: hidden;position: relative;width: 800px;}
.wheelul{height:300px;position: absolute;left: 0;list-style:none;top:0;width: 3200px;}
.wheelul li{color:#fff;float: left;font-size:50px;font-weight:bold;height:300px;line-height: 300px;text-align: center;width:800px;}
.wheelul .first{background-color:deepskyblue;}
.wheelul .second{background-color:pink;}
.wheelul .third{background-color:green;}
.nav {bottom:0;left:0;list-style:none;position: absolute;width: 100%;}
.nav li{background-color:#ccc;border-radius:5px;cursor:pointer;float:left;height: 10px;width:33.3%;}
.wheelon{background-color: #ff6c00;}
.last,.next{
background: rgba(0, 0, 0, 0.2);
border-radius:5px;
bottom: 40%;
color:#fff;
cursor:pointer;
display: none;
font-size: 20px;
height:30px;
line-height:30px;
position: absolute;
text-align: center;
width:30px;
}
.last{left: 5%;}
.next{right: 5%;}

JS代码：

$(function($) {
//*********************轮播图*********************
var clone = $(".wheelul li").first().clone();
$(".wheelul").append(clone);
var clientWidth = $('.wheelwrap').width();
var wheelLength = $('.wheelul li').size();
var wheelIndex = 0;
$('.nav li').eq(wheelIndex).css('background-color', '#ff6c00');
$('.next').on('click', function() {
moveRight();
});
$('.last').on('click', function() {
moveLeft();
});
//************定时器滚动***************
var moveTimer = setInterval(function() {
moveRight();
}, 3000);
$('.wheelwrap').hover(function() {
$(".next").show();
$(".last").show();
clearInterval(moveTimer);
}, function() {
$(".next").hide();
$(".last").hide();
moveTimer = setInterval(function() {
moveRight();
}, 3000);
});
//************图片向右滚动**************
function moveRight() {
wheelIndex++;
if(wheelIndex == wheelLength) {
$('.wheelul').css({
left: 0
});
wheelIndex = 1;
}
$('.wheelul').stop().animate({
left: -wheelIndex * clientWidth
}, 500);
//原图标显示
if(wheelIndex == wheelLength - 1) {
$('.nav li').eq(0).css('background-color', '#ff6c00').siblings().css('background-color', '#ccc');
} else {
$('.nav li').eq(wheelIndex).css('background-color', '#ff6c00').siblings().css('background-color', '#ccc');
}
}
//************图片向左滚动***************
function moveLeft() {
wheelIndex--;
if(wheelIndex == -1) {
$('.wheelul').css({
left: -(wheelLength - 1) * clientWidth
});
wheelIndex = wheelLength - 2;
}
$('.wheelul').stop().animate({
left: -wheelIndex * clientWidth
}, 500);
//原图标显示
$('.nav li').eq(wheelIndex).css('background-color', '#ff6c00');
$(".nav li").eq(wheelIndex).siblings().css('background-color', '#ccc');
}
//**************下面导航栏点击事件***************
for(var i = 0; i < wheelLength; i++) {
$('.nav li').eq(i).click(function() {
wheelIndex = $(this).index();
for(var j = 0; j < wheelLength; j++) {
if(j == wheelIndex) {
$('.wheelul').stop().animate({
left: -wheelIndex * clientWidth
}, 500);
$('.nav li').eq(wheelIndex).css('background-color', '#ff6c00');
$(".nav li").eq(wheelIndex).siblings().css('background-color', '#ccc');
}
}
});
}
});

效果图：

功能描述：

（1）正常情况下，自动轮播。

（2）当鼠标hover上去时，左右键显示，自动轮播停止；当鼠标离开时，左右键消失，自动轮播恢复。

（3）点击左右键，轮播图向对应方向轮播。

（4）点击下方的导航栏，轮播图显示选择页面。

0 0