绑定完请刷新页面
取消
刷新

分享好友

×
取消 复制
JQuery教程:实现轮播图效果
2019-05-30 17:00:59

轮播图说起来非常简单,就是几张图片一直不停的轮流播放,但是要想写好代码,也要考虑下性能问题,下面我们来简单的实现一下。

首先,页面代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<link rel="stylesheet" type="text/css" href="css/ad.css"/>

<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>

<script src="js/ad.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="box">

<div id="imgDiv">

<img id="leftImg"/>

<img id="centerImg"/>

<img id="rightImg"/>

</div>

<span id="leftBtn"></span>

<span id="rightBtn"></span>

<span id="circleSpan"></span>

</div>

</body>

</html>


接下来,写样式内容ad.css,将页面内容完善。


body{

margin: 0px;

background-color: #ccc;

}


#box{

width: 520px;

height: 280px;

margin: 60px auto;

position: relative;

}


#imgDiv{

width: 520px;

height: 280px;

overflow: hidden;

position: relative;

border-radius: 10px;

}


#imgDiv img{

position: absolute;

}


#leftImg{

left:-520px;

}


#centerImg{

left:0px;

}


#rightImg{

left: 520px;

}


#leftBtn{

display: none;

width: 71px;

height: 71px;

position: absolute;

left: -35px;

top: 105px;

background-image: url(../img/but.png);

background-position-x: 71px;

}


#leftBtn:hover{

background-position-x: 0px;

}


#rightBtn{

display: none;

width: 71px;

height: 71px;

position: absolute;

left: 485px;

top: 105px;

background-image: url(../img/but.png);

background-position: 71px 71px;

}

#rightBtn:hover{

background-position-x: 0px;

}


#circleSpan{

display: block;

position: absolute;

height: 30px;

background-color: rgba(0,0,0,0.5);

border-radius: 10px;

left: 50px;

top: 240px;

}


#circleSpan span{

display: block;

width: 10px;

height: 10px;

border-radius: 5px;

background-color: white;

margin: 10px 5px 10px 5px;

float: left;

}


这些都是页面基础代码,接下来我们主要来看一下JS代码ad.js。


$(function(){

// 设定循环操作

var time = setInterval(move, 2000);


// 定义图片数组

var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];


// 得到3张图片框

var leftImg = $("#leftImg");

var centerImg = $("#centerImg");

var rightImg = $("#rightImg");


// 设置当前显示的图片

var currentIndex = 0;


// 设置初始图片

leftImg.attr("src", imgArr[imgArr.length - 1]);

centerImg.attr("src", imgArr[0]);

rightImg.attr("src", imgArr[1]);


// 设置圆点的数量和位置

for (var i = 0; i < imgArr.length; i++) {

$("#circleSpan").append("<span></span>");

}

$("#circleSpan").css("left", (520 - 20 * imgArr.length)/2 + "px");

$("#circleSpan span:first").css("background-color", "orange");


// 鼠标悬停和离开事件

$("#box").hover(function(){

$("#leftBtn,#rightBtn").show();

// 停止循环

clearInterval(time);

}, function(){

$("#leftBtn,#rightBtn").hide();

// 继续循环

time = setInterval(move, 4000);

});


// 给左右按钮添加点击事件

$("#leftBtn").click(function(){

// 每次滚动显示下一张的图片

if(currentIndex == 0){

currentIndex = imgArr.length - 1;

}else{

currentIndex--;

}

// 执行滚动的动画

leftImg.stop(false, true).animate({"left":"0px"}, 100);

centerImg.stop(false, true).animate({"left":"520px"}, 100);

rightImg.stop(false, true).animate({"left": "1040px"}, 102, function(){

mvoeComplete();

});

});

$("#rightBtn").click(function(){

// 每次滚动显示下一张的图片

currentIndex++;

// 执行滚动的动画

leftImg.stop(false, true).animate({"left":"-1040px"}, 100);

centerImg.stop(false, true).animate({"left":"-520px"}, 100);

rightImg.stop(false, true).animate({"left": "0px"}, 102, function(){

// 动画结束时执行

mvoeComplete();

});

});


function move(){

// 每次滚动显示下一张的图片

currentIndex++;

// 执行滚动的动画

leftImg.stop(false, true).animate({"left":"-1040px"}, 500);

centerImg.stop(false, true).animate({"left":"-520px"}, 500);

rightImg.stop(false, true).animate({"left": "0px"}, 502, function(){

// 动画结束时执行

mvoeComplete();

});

}


function mvoeComplete(){

// 当滚动结束后位置改变回来

leftImg.css({"left":"-520px"});

centerImg.css({"left":"0px"});

rightImg.css({"left":"520px"});

// 当滚动结束后改变图片显示

leftImg.attr("src", imgArr[(currentIndex - 1) % imgArr.length]);

centerImg.attr("src", imgArr[currentIndex % imgArr.length]);

rightImg.attr("src", imgArr[(currentIndex + 1) % imgArr.length]);


// 改变圆点的颜色

$("#circleSpan span:eq(" + (currentIndex % imgArr.length) + ")").css("background-color", "orange");

// 将其他的圆点颜色还原成白色

$("#circleSpan span:not(:eq(" + (currentIndex % imgArr.length) + "))").css("background-color", "white");

}

});


至此,就完成了一个简单的轮播图效果,将js中的图片数组改成自己的图片路径即可。

分享好友

分享这个小栈给你的朋友们,一起进步吧。

Spring Boot
创建时间:2020-06-22 17:22:00
SpringBoot是由Pivotal团队在2013年开始研发、2014年4月发布个版本的全新开源的轻量级框架。它基于Spring4.0设计,不仅继承了Spring框架原有的特性,而且还通过简化配置来进一步简化了Spring应用的整个搭建和开发过程。另外SpringBoot通过集成大量的框架使得依赖包的版本冲突,以及引用的不稳定性等问题得到了很好的解决。
展开
订阅须知

• 所有用户可根据关注领域订阅专区或所有专区

• 付费订阅:虚拟交易,一经交易不退款;若特殊情况,可3日内客服咨询

• 专区发布评论属默认订阅所评论专区(除付费小栈外)

栈主、嘉宾

查看更多
  • duanhao
    栈主

小栈成员

查看更多
  • ?
  • zander
  • 凉茶cooltea
戳我,来吐槽~