实例介绍
【实例简介】
不论大型企业网站还是个人博客网站，现今基本都会有主页轮播的这个效果。在这里我就来简单介绍一种基于jQuery实现简单图片轮播的方法。
实现思想主要是通过判断设定index值的大小变化来判断图片左移还是右移；通过控制图片的left值，加个定时器来达到一个轮播的效果。
【实例截图】
【核心代码】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播demo---更多资源www.chenhui.shop</title>
</head>
<!--在线引入jquery-3.2.1.min.js，当然你也可以下载到本地，然后本地引入，这里为了更好的演示，
方便大家直接下载到本地了应用，采用了在线引入jquery-3.2.1.min.js库-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--CSS样式，为了显示方便，直接在HTML代码中，没有另外写css文件-->
<style type="text/css">
.banner {
margin: 0 auto;
border: 4px dashed black;
width: 50%;
height: 300px;
position: relative;
overflow: hidden
}
.banner a {
z-index: 100;
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 100%;
top: 0
}
.banner .first {
left: 0
}
.banner a img {
width: 100%;
height: 100%
}
.choose {
z-index: 1000;
position: absolute;
left: 50%;
top: 90%;
width: 100px;
height: 10px
}
.choose span {
margin-right: 15px;
float: left;
display: block;
background: blue;
width: 10px;
height: 10px;
border-radius: 10px
}
.choose span:hover {
background: red
}
.choose .red {
background: red
}
.banner .pre, .next {
cursor: pointer;
text-align: center;
border-radius: 20px;
display: block;
background: #cccccc;
opacity: 0.4;
text-decoration: none;
z-index: 200;
display: block;
width: 40px;
height: 40px;
font-size: 40px;
color: red;
position: absolute;
top: 80px
}
.banner .pre {
top:42%;
left: 0px
}
.banner .next {
top:42%;
right: 0px
}
</style>
<body>
<!--轮播模块-->
<div class="banner">
<!-- 这里为上一页下一页点击按钮 -->
<span class="pre"> < </span>
<span class="next"> > </span>
<!-- 此处为轮播主体，图片。-->
<a href="###" class="first"><img src="images/1.jpg"/></a>
<a href="###" ><img src="images/2.jpg"/></a>
<a href="###" ><img src="images/3.jpg"/></a>
<!-- 此处为轮播部分下方小点选择-->
<div class="choose">
<span class="red"></span>
<span></span>
<span></span>
</div>
</div>
<!--Js轮播实现代码 -->
<script>
/*定义两个变量，保存当前页码和上一页页码*/
var $index=0;
var $exdex=0;
/*小点的鼠标移入事件，触发图片左移还是右移*/
$(".choose span").mouseover(function(){
//获取当前移入的index值
$index=$(this).index();
//首先让点的颜色变化，表示选中
$(".choose span").eq($index).addClass("red").siblings().
removeClass("red");
//判断如果index变小，证明图片要往左移动。变大则为右移
if($index>$exdex){
next();
}else if($index<$exdex){
pre();
}
//移动完毕将当前index值替换了前页index
return $exdex=$index;
});
//下一页的点击事件。在右移基础上加了最大index判断
$(".next").click(function(){
$index ;
if($index>2){
$index=0
}
$(".choose span").eq($index).addClass("red").siblings().
removeClass("red");
next();
return $exdex=$index;
});
//上一页的点击事件
$(".pre").click(function(){
$index--;
if($index<0){
$index=2
};
$(".choose span").eq($index).addClass("red").siblings().
removeClass("red");
pre();
return $exdex=$index;
});
//加个定时器3000ms也就是3秒轮播，正常轮播
var atime=setInterval(function(){
$(".next").click();
},3000);
//这里为右移和左移的事件函数。
//右移基本原理就是先让exdex定位的left左移百分百，而选中的当前页从屏幕右边移入,left变为0
function next(){
$(".banner a").eq($index).stop(true,true).
css("left","100%").animate({"left":"0"});
$(".banner a").eq($exdex).stop(true,true).
css("left","0").animate({"left":"-100%"});
}
function pre(){
$(".banner a").eq($index).stop(true,true).
css("left","-100%").animate({"left":"0"});
$(".banner a").eq($exdex).stop(true,true).
css("left","0").animate({"left":"100%"});
}
</script>
</body>
</html>
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论