jquery实现多模块切换轮播
说两句废话:对于一个小白痴来说,get这些知识真的是有点费劲,我还没学jquery,看了这对应的公开课后,自己敲了一天才整理好,希望总结后更上一层楼。
创新互联建站主营彭阳网站建设的网络公司,主营网站建设方案,app软件开发公司,彭阳h5微信小程序搭建,彭阳网站营销推广欢迎彭阳等地区企业咨询
资料下载地址:
链接:https://pan.baidu.com/s/1HvfJrGowK4gjQGE17nFHOw 密码:rw8a
为了以防万一,下边有所有 的资料,可自行选择下载。
最后要完成的效果图:
效果图说明:
- 左边的框框会一个一个的往后走,第一个(南京)有一个默认的深红色的背景。
- 可以随意的点击框框
- 右边的图片和左边的框框是对应的,框框动,相应的图片也会展示出来
- 点击右边的左箭头和右箭头图片进行相应的切换,左边的框框也跟着动
注:写jquery首先引入包
宏观分析:
- 先搞定左边的自动轮播,用到计时器 setInterval(函数名,时间)(get新知识)
- 随机点击左边的图片,右侧显示左侧点击的模块
- 点击右边的按钮,左侧显示右侧点击的模块
详细分析:
右侧的图片是怎样动的?为什么每次显示一张图片,其他的哪去了?
其实用的隐藏功能!css里边有个overflow:hidden
图片是这样动的:
宽度没画好,简单说一下:
右边显示图片的框框是不动的,动的是来回轮播的图片。
- 我们给第一张图片设置默认索引为 0 ,运动时间为3秒(3000毫秒,程序里用的是毫秒),即3秒后索引 +1 ,这样就显示下一张图片了。
显示下一张图片还需要做一些处理:
运动的小框框要加载索引的样式,其他的同级的都去掉索引样式。
animate(get新技能),可以让图片动起来,我们设置的是向左移动,可以自行设置向右移动,移动多少才合适呢?当然是图片的宽度,也就是当前索引*图片的宽度(我们的图片是固定宽度的)
另外:因为索引是++的,加到索引最大值后呢?我们可以做个判断,当超出索引长度的时候,索引在从 0 开始
function showCur() {
//移动到当前的块上,加上list_cutL索引,同级的去掉list_cutLi索引
$(".list-left ul li").eq(curItem).addClass("list_cutLi").siblings("li").removeClass("list_cutLi");
//一张图片宽268,*索引就是移动的宽度
var leftVal = 268 * curItem;
//$(".right-box-main").css('left', -leftVal);
//0.5秒内向左移动图片
$(".right-box-main").animate({ left: -leftVal }, 500);
};
var curItem = 0;/*索引*/
var len = $(".list-left ul li").length; //索引的长度 12
function autoPlay() {
curItem++;
if (curItem > len-1) {
curItem = 0;
};
/**
eq获取索引,从第一个开始
siblings获取同辈元素
*/
showCur();
};
setInterval(autoPlay, 3000);
2.那么剩下 的就简单多了
解决点击左边的框框,右边 的图片也会跳到点击的图片
获取点击的当前图片的索引值,然后调用showCur方法即可
index(),get新技能,获取当前索引值和参数
$(".list-left ul li").click(function () {
curItem = $(this).index();
showCur();
});
3.解决最后一个问题
点击右边的按钮,左边加载相应的模块
点击左按钮:索引要 -1,加判断条件;
点击右按钮:索引要 +1,加判断条件。
$(".list-right .left-btn").click(function () {
curItem--;
if (curItem < 0) {
curItem = len - 1;
}
showCur();
});
//右按钮
$(".list-right .right-btn").click(function () {
curItem++;
if (curItem > len - 1) {
curItem = 0;
}
showCur();
});
大功告成,下边是最重要的部分,源码和图片
index.html
jquery多模块切换轮播
多区块点击切换
- 南京
- 上海
- 武汉
- 西安
- 长春
- 大连
- 成都
- 杭州
- 沈阳
- 合肥
- 长沙
- 郑州
-
南京基地
介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...
-
上海基地
介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...
-
武汉基地
介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...
-
西安基地
介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...
-
长春基地
介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...
-
大连基地
介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...
-
成都基地
介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...
-
杭州基地
介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...
-
沈阳基地
介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...
-
合肥基地
介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...
-
长沙基地
介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...
-
郑州基地
介绍北大资源研修学院位于北京市中关村北区核心地带,占地面积近200亩,拥有30多间标准化多媒体教室、2-6人间学生...
css/style.css
body{
line-height:150%;margin:0;padding:0;
}
h2,h3,h4,h5,h6,h7,dl,dt,dd,ul,li,p,span,i,em{margin:0;padding:0;font-style:normal;}
h2,h3,h4,h5,h6,h7{font-size:14px;}
dl,dt,dd,ul,li{list-style-type:none;display:block;}
a{
color:#000;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
.box{
clear:both;
margin:0 auto;
}
.city-lists{
width:916px;
height:408px;
background:#E7E2DF;
margin:0 auto;
position:relative;
}
.list-title{
font: 18px/45px "微软雅黑";
color: rgb(255, 255, 255);
width:610px;
height:45px;
top:-1px;
left:-1px;
padding: 0px 14px 14px;
z-index:100;
background:url(../image/bd_bg1.jpg) no-repeat;
position:absolute;/*absolute如果最近的父元素没有定义,则相对于html绝对定位,好处是可以释放位置,所以下边的list-left可以沾满整个高度*/
}
.list-left{
height: 344px;
width: 552px;
float:left;
background:#F9F1E6;
position:absolute;
padding-top:64px;
padding-left:25px;
}
.list-left ul li{
color:#fff;
height: 107px;
width: 130px;
font:18px/107px "温软雅黑";
float:left;
text-align:center;
background: #707070;
margin:0px 3px 3px 0px;
cursor:pointer;/*鼠标移动上去出现小手*/
}
/*设置第一个li默认显示的颜色*/
.list-left ul .list_cutLi{
background:#6B0904;
}
.list-right{
width:336px;
float:right;
}
.list-right-t{
width:333px;
}
.left-btn{
padding:0px 0px 0px 5px;
width:23px;
height:21px;
float:left;
margin-top:145px;
cursor:pointer;
display:block;
background:url(../image/bd_lbtn.jpg) no-repeat;
}
.right-btn{
padding:0px 0px 0px 5px;
width:23px;
height:21px;
float:right;
margin-top:145px;
cursor:pointer;
display:block;
background:url(../image/bd_rbtn.jpg) no-repeat;
}
.left-btn:hover{
background:url(../image/hbd_lbtn.jpg) no-repeat;
}
.right-btn:hover{
background:url(../image/hbd_rbtn.jpg) no-repeat;
}
.right-box{
float:left;
width:268px;
height:333px;
overflow:hidden;
position:relative;/*right-main的absolute的父级*/
}
.right-box-main{
width:3216px;/*12张图片的宽度*/
height:333px;
position:absolute;
top:10px;
left:0;
}
.right-box-main ul li{
height:333px;
width:268px;
float:left;
font-family:"温软雅黑";
}
.right-box-main img{
width:268px;
height:173px;
}
.bc_chgTitle{
height:54px;
width:268px;
text-align:center;
line-height:54px;
font: bold 16px/54px "微软雅黑";
}
.right-box-main ul li p{
font-size:14px;
width:268px;
line-height:25px;
padding-top:15px;
}
js/demo.js
$(function () {
//1.自动轮播 定时器 setInterval(函数名,时间)
/**
autoPlay方法,实现自己动:
开始的时候,设置第一张图片的索引默认为 0,动一下索引 + 1 ,
如果动到最后一张的时候在动就默认在为 0 (索引大于索引最大值时默认回到最小)
*/
var curItem = 0;/*索引*/
var len = $(".list-left ul li").length; //索引的长度 12
function autoPlay() {
curItem++;
if (curItem > len-1) {
curItem = 0;
};
/**
eq获取索引,从第一个开始
siblings获取同辈元素
*/
showCur();
};
setInterval(autoPlay, 3000);
//2.左侧点击模块,右侧跳转到相应的图片
/**
获取当前点击的图片的索引
index()->搜索与参数表示的对象匹配的元素,并返回相应元素的索引值。
*/
$(".list-left ul li").click(function () {
curItem = $(this).index();
showCur();
});
//3.右侧点击图片,左侧跳转到相应的模块
//左按钮
$(".list-right .left-btn").click(function () {
curItem--;
if (curItem < 0) {
curItem = len - 1;
}
showCur();
});
//右按钮
$(".list-right .right-btn").click(function () {
curItem++;
if (curItem > len - 1) {
curItem = 0;
}
showCur();
});
//公共方法
function showCur() {
//移动到当前的块上,加上list_cutL索引,同级的去掉list_cutLi索引
$(".list-left ul li").eq(curItem).addClass("list_cutLi").siblings("li").removeClass("list_cutLi");
//一张图片宽268,*索引就是移动的宽度
var leftVal = 268 * curItem;
//$(".right-box-main").css('left', -leftVal);
//0.5秒内向左移动图片
$(".right-box-main").animate({ left: -leftVal }, 500);
};
})
新闻标题:jquery实现多模块切换轮播
标题链接:http://pwwzsj.com/article/pdjijd.html