您的位置：首页 > Web前端 > JQuery

初学jQuery（京东轮播图）

2017-07-20 21:46 288 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--导入jQuery-->
<script src="jquery/jquery.js"></script>
<!--设置css样式-->
<style>
/*取消全部的默认样式*/
*{
margin: 0;
padding: 0;
border: 0;
}
ul{
/*取消风格*/
list-style: none;
}
/*设置大盒子的样式，根据轮播图片的大小来设置*/
.box{
/*设置宽*/
width: 790px;
/*设置长*/
height: 340px;
/*在显示器居中*/
margin: 0 auto;
/*距离上边界50px*/
margin-top: 50px;
/*加上了一个边框，不喜欢取消即可*/
border: 1px solid black;
/*设置的父级定位*/
position: relative;
/*设置的鼠标样式*/
cursor: pointer;
}
/*设置图片列表的样式*/
.box .img li{
/*子集的定位*/
position: absolute;
left: 0;
top: 0;
}
/*左右两边点击箭头的样式*/
.box .imgLeft,.box .imgRight{
/*设置箭头框的宽*/
width: 25px;
/*设置文本行高*/
line-height: 50px;
/*设置背景的颜色和透明度为.3，*/
background: rgba(0,0,0,.3);
/*设置箭头的颜色*/
color: #fff;
/*鼠标样式*/
cursor: pointer;
}
/*设置左箭头的样式*/
.box .imgLeft{
/*定位*/
position: absolute;
left: 0;
/*字体居中*/
text-align: center;
/*距离顶部的距离根据主盒子来设置*/
top: 150px;
}
/*设置右箭头的样式*/
.box .imgRight{
/*定位*/
position: absolute;
right: 0;
text-align: center;
top: 150px;
}
/*设置鼠标进入时的样式*/
.box .imgLeft:hover,.box .imgRight:hover{
background: rgba(0,0,0,0.7);
}
/*设置rgba盒子的样式*/
.page{

background: rgba(255,255,255,0.3);
position: absolute;
bottom: 20px;
left: 335px;
width: 120px;
height: 28px;
/*设置圆角，根据你给定盒子的高度来设定*/
border-radius: 14px;
}
/*指示位置的颜色*/
.page .select{
background: red;
}
/*设置盒子内部列表的样式*/
.page li{
/*设置为浮动*/
float: left;
height: 20px;
width: 20px;
border-radius: 10px;
background: lightgrey;
margin: 4px 5px;
}

</style>
<script>
//使用的是jQuery1.8.3
$(function(){
//定义一个变量用来记录图片换到的位置
var count = 1;
//设置图片的数量
var imgMaxCount = 4;
var imgMinCount = 1;
//设置图片显示的时间毫秒
var keep = 4000;
//设置定时器，用于多长时间进行变化
var times = setInterval(
timesCount,keep)
//当鼠标进入大盒子的时候的定时器停止
$('.box').on({
//鼠标进入盒子的时候停止计时器
mouseenter:function(){
clearInterval(times);
},
//鼠标移出盒子的时候开始计时
mouseleave:function(){
times = setInterval(
timesCount,keep);
}
})
function timesCount(){
count++;
counts();
}
//设置点击左右箭头时的变化
$('.imgLeft,.imgRight').click(function(){
//                  三目表达式，判断时候点击imgLeft，是计数count减1，否则加1
count = this.className == 'imgLeft'? --count:++count;
counts()
})

//当点击page的时候跳转到点击位置
$('.page ul li').click(function(){
//$(this)捕获点击的位置，addClass('select')添加class
//.siblings()它的兄弟属性.removeClass('select')去点class属性
$(this).addClass('select').siblings().removeClass('select');
//$(this).index()捕获点击的下标位置，下标从0开始计数
count = $(this).index() + 1;
counts();
})

//设置计数函数，用于控制图片轮播的位置
function counts(){
//控制到达的位置，不能超过图片的最大限制和最小限制
//当超过最大量或者最小时候从第一张开始，或最后一张开始
if (count > imgMaxCount){
count = imgMinCount
}else if (count < imgMinCount){
count = imgMaxCount
}
//设置轮播的动画效果，图片变为透明
$('.box>.img>li').stop().animate({
opacity: 0
})
//图片显示
$('.box>.img>li').eq(count - 1).stop().animate({
opacity:1
})
//page根据图片的改变显示的位置也变化
$('.page ul li').eq(count-1).addClass('select').siblings().removeClass('select');
}
})
</script>
</head>
<body>
<!--定义一个轮播图装图片的大盒子-->
<div class = 'box'>
<!--放置需要播放的图片，想增加，增加li即可-->
<ul class = 'img'>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
</ul>
<!--设置轮播图的左右箭头-->
<div class = 'imgLeft'><</div>
<div class = 'imgRight'>></div>
<!--设置轮播图下面的page-->
<div class = 'page'>
<ul>
<!--指示轮播图到达的位置-->
<li class = 'select'></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery
相关文章推荐
新的分享
章节导航