轮播图切换大致分为以下几个步骤
1.点击向左向右的图标，平滑切换到上(下)页
2.进行无限切换，第一页的上一页为最后一页，最后一页的下一页为第一页
3.每隔三秒图片进行一次自动切换
4.圆点随着图片的更新而跟新
5.鼠标进入图片区域时，自动切换停止，移开的时候又自动进行
6.点击圆点进行图片的切换
7.解决因为切换过快产生的bug,即判断图片是否正在移动
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>焦点轮播图</title>
<style type="text/css">
/*去除内边距,没有链接下划线*/
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/*让<body>有20px的内边距*/
body {
padding: 20px;
}
/*最外围的div*/
#container {
width: 533px;
height: 776px;
overflow: hidden;
position: relative; /*相对定位*/
margin: 0 auto;
}
/*包含所有图片的<div>*/
#list {
width: 3871px; /*7张图片的宽*/
height: 776px;
position: absolute; /*绝对定位*/
z-index: 1; /*???*/
}
/*所有的图片<img>*/
#list img {
float: left; /*浮在左侧*/
}
/*包含所有圆点按钮的<div>*/
#buttons {
position: absolute;
height: 10px;
width: 100px;
z-index: 2;
bottom: 20px;
left: 250px;
}
/*所有的圆点<span>*/
#buttons span {
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}
/*第一个<span>*/
#buttons .on {
background: orangered;
}
/*切换图标<a>*/
.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: 368px;
background-color: RGBA(0, 0, 0, 0.3);
color: #fff;
}
/*鼠标移到切换图标上时*/
.arrow:hover {
background-color: RGBA(0, 0, 0, 0.7);
}
/*鼠标移到整个div区域时*/
#container:hover .arrow {
display: block; /*显示*/
}
/*上一个切换图标的左外边距*/
#prev {
left: 20px;
}
/*下一个切换图标的右外边距*/
#next {
right: 20px;
}
</style>
<script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js" ></script>
<script type="text/javascript">
/*轮播图切换大致分为以下几个步骤
1.点击向左向右的图标，平滑切换到上(下)页
2.进行无限切换，第一页的上一页为最后一页，最后一页的下一页为第一页
3.每隔三秒图片进行一次自动切换
4.圆点随着图片的更新而跟新
5.鼠标进入图片区域时，自动切换停止，移开的时候又自动进行
6.点击圆点进行图片的切换
7.解决因为切换过快产生的bug,即判断图片是否正在移动
*
* */
$(function(){
//点击左右切换按钮进行切换,平滑的切换
var $container = $("#container");
var $list = $("#list");
var $prev = $("#prev");
var $next = $("#next");
var $points = $("#buttons>span");//显示的图片个数
var imgCount = $points.length;
var TotleDistance = 533;
var TotleTime = 500;
var itemTime = 50;
var index=0;//当前圆点下标
var moving=false;//图片是否处于移动中
//点击上一页
$prev.click(function(){
Switchover(false);
});
//点击下一页
$next.click(function(){
Switchover(true);
});
//每隔三秒自动滑到下一页
var theID;
function autoChange(){
theID = setInterval(function(){
Switchover(true);
},3000);
}
autoChange();
//当鼠标进入图片区域时，自动停止切换，鼠标离开后又开始自动切换
$container.hover(function(){
clearInterval(theID);
},function(){
autoChange();
});
ClickCircle();
//next取true或者false,true为下一张，false为上一张
var IntervalID;
function Switchover(next){
// alert($list.offset().left);
//解决切换上下页速度过快出现的bug
if(moving){//如果正在移动，则直接返回
return ;
}
moving = true;//进入函数说明动画正在移动
var currentLeft = $list.position().left;
var leftDis;
if(typeof next == "boolean"){
leftDis = next? -533:533;//要移动的距离
}else{
leftDis = -533*(next-index);
}
var itemDistance = leftDis/(TotleTime/itemTime);
var targetLeft = currentLeft+leftDis;
//平缓移动，启动定时器
IntervalID = setInterval(function(){
currentLeft +=itemDistance;//移动到该位置
if(((itemDistance<0)&&(currentLeft<targetLeft)) || ((itemDistance>0)&&(currentLeft>targetLeft))){
currentLeft=targetLeft;
}
if(currentLeft == targetLeft){
clearInterval(IntervalID);
//第一页的上一页为最后一页，最后一页的下一页是第一页
if(currentLeft==0){
currentLeft = -imgCount*533;
}
if(currentLeft==-(imgCount+1)*533){
currentLeft = -533;
}
moving = false;//说明已经移动到指定位置，此时停止移动
}
$list.css("left",currentLeft);
},itemTime);
updateCircle(next);
}//end of switchover
//切换页面时，圆点同步更新
function updateCircle(next){
// alert($points[index]);
$points[index].className=" ";
var targetPoint;
if(typeof next == "boolean"){
if(next){
targetPoint = index +1;
if(targetPoint == imgCount){
targetPoint = 0;
}
}else{
targetPoint = index-1;
if(targetPoint==-1){
targetPoint = imgCount-1;
}
}
}else{
targetPoint=next;
}
index = targetPoint;
$points[index].className="on";
}//end of updateCircle
//点击圆点图标切换对应页
function ClickCircle(){
clearInterval(IntervalID);
for (var i=0;i<imgCount;i++) {
$points[i].index=i;//记录圆点下标
$points[i].onclick = function(){
Switchover(this.index);
}
}
}
});
</script>
</head>
<body>
<div id="container">
<div id="list" style="left: -533px;">
<img src="../img/5.jpg" alt="1"/>
<img src="../img/1.jpg" alt="1"/>
<img src="../img/2.jpg" alt="2"/>
<img src="../img/3.jpg" alt="3"/>
<img src="../img/4.jpg" alt="4"/>
<img src="../img/5.jpg" alt="5"/>
<img src="../img/1.jpg" alt="5"/>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
