码迷,mamicode.com
首页 > Web开发 > 详细

JQuery教程:实现轮播图效果

时间:2019-05-30 17:58:27      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:click   20px   current   not   append   char   int   center   url   

 

 

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

首先,页面代码:

<!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;

 

}

 

#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;

 

border-radius: 10px;

left: 50px;

top: 240px;

}

 

#circleSpan span{

display: block;

width: 10px;

height: 10px;

border-radius: 5px;

 

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中的图片数组改成自己的图片路径即可。

 

JQuery教程:实现轮播图效果

标签:click   20px   current   not   append   char   int   center   url   

原文地址:https://www.cnblogs.com/qfchen/p/10950661.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!