新浪网站首页同款轮播图
1.轮播图的最终效果
成功后的效果图如下;
2. 分析一下它的布局
- 首先是头部的布局:
- 轮播的内容:
- 展现的效果:
3.设置它的样式
样式说明: 轮播图头部的布局我主要用的是flex
布局,css3最喜欢的新属性之一便是flex布局属性,用六个字概括便是简单、方便、快速。还有一点就是上方介绍的 “子绝父相“” 的定位布局。
.context_center_item .context_center_sroll_item{
width: 360px;
margin-top: 10px;
}
.context_center_item .context_center_sroll_item .scoll_top{
display: flex;
justify-content: space-between;
align-items: center;
height: 34px;
border: 1px solid #dbdee1;
border-left: none;
background: url(//i2.sinaimg.cn/dy/deco/2013/0321/bg1px.png) 0 -33px repeat-x;
}
.context_center_item .context_center_sroll_item .scoll_top .top_leftMenu{
display: flex;
justify-content: space-around;
align-items: center;
width: 214px;
height: 33px;
border-top: 3px solid #ff8400;
border-right: 1px solid #dbdee1;
background: #fff
}
.context_center_item .context_center_sroll_item .scoll_top .top_leftMenu span{
display: inline-block;
font-size: 16px;
color: #333333;
font-family: "Microsoft YaHei","微软雅黑","SimHei","黑体";
}
.context_center_item .context_center_sroll_item .scoll_top .top_leftMenu .ctrlIcon{
display: flex;
justify-content: space-around;
align-items: center;
width: 130px;
height: 33px;
}
.context_center_sroll_item .scoll_top .top_leftMenu .ctrlIcon .left_ctrl{
width: 19px;
height: 19px;
background: url(//n.sinaimg.cn/finance/pctianyi_wdg/apps/www.sina_v2/images/btn-ty-ctrls.png) 0 0 no-repeat;
cursor: pointer;
}
.context_center_sroll_item .scoll_top .top_leftMenu .ctrlIcon .right_ctrl{
width: 19px;
height: 19px;
background: url(//n.sinaimg.cn/finance/pctianyi_wdg/apps/www.sina_v2/images/btn-ty-ctrls.png) 0 0 no-repeat;
background-position: -65px 0;
cursor: pointer;
}
.context_center_sroll_item .scoll_top .top_leftMenu .ctrlIcon .left_ctrl:hover{
opacity: .8;
}
.context_center_sroll_item .scoll_top .top_leftMenu .ctrlIcon .right_ctrl:hover{
opacity: .8;
}
.context_center_sroll_item .scoll_top .top_leftMenu .ctrlIcon .center_crtlItems {
display: flex;
justify-content: space-around;
align-items: center;
width: 72px;
height: 18px;
}
.context_center_sroll_item .scoll_top .top_leftMenu .ctrlIcon .center_crtlItems i{
width: 6px;
height: 6px;
background-color: #d3d3d3;
cursor: pointer;
}
.context_center_sroll_item .scoll_top .top_leftMenu .ctrlIcon .center_crtlItems .crtlItem_dot_on{
background-color: #FF8400;
}
.context_center_item .context_center_sroll_item .scroll_context{
width: 360px;
margin-top: 10px;
}
.context_center_item .context_center_sroll_item .scroll_context .context_container{
width: 360px;
height: 208px;
position: relative;
overflow: hidden;
}
.context_center_item .context_center_sroll_item .scroll_context .context_container .context_itemsPIC{
width: 2520px;
height:208px;
overflow: hidden;
position:absolute;
left: 0px;
top:0;
}
.context_center_item .context_center_sroll_item .scroll_context .context_container .context_itemsPIC ul{
width: 360px;
float: left;
overflow: hidden;
height:208px;
line-height:400px;
color:#fff;
font-size:80px;
}
/*轮播里面所有的li设置开始*/
.context_center_item .scroll_context li{
padding-left: 10px;
line-height: 26px;
height: 26px;
overflow: hidden;
font-size: 14px;
background: url(//i0.sinaimg.cn/home/main/index2013/0403/icon.png) no-repeat 0 -881px;
}
.context_center_item .scroll_context li a{
color: #122e67;
}
.context_center_item .scroll_context a:hover{
color: #ff8400;
text-decoration: underline;
}
/*轮播里面所有的li设置结束*/
.context_center_item .context_center_sroll_item .scroll_context .context_container_fixedBottom{
width: 360px;
height: 81px;
border-top: 1px solid #939393;
}
4.最核心的jquery控制
下方的注释已经很详细了。
//轮播图的显示效果开始
$(function() {
//拿到呈现内容的容器
let context_container = $('#context_container');
//拿到所有排列内容ul的超级宽的容器
let context_itemsPIC = $('.context_itemsPIC');
//获取所有的小圆点
let crtlItems = $('.center_crtlItems i');
//获取能调到前一张的按钮
let pre = $('.left_ctrl');
// 获取能调到后一张的按钮
let next = $('.right_ctrl');
// 获取每一张图片的宽度
let widUl = context_itemsPIC.children().eq(0).width();
let len = crtlItems.length;//表示有多少项
let idx = 0;//表示当前是第几项的索引
let timer = null;//设置时间周期
//设置所有的小点滑过的效果
crtlItems.hover(function() {
//siblings() 就是遍历它的同胞元素,表示移除除了当前元素其他所有同胞元素的crtlItem_dot_on类名,就是只选中当前元素
$(this).addClass("crtlItem_dot_on").siblings().removeClass("crtlItem_dot_on")
idx = $(this).index();
//animate方法通过CSS样式将元素从一个状态改变为另一个状态,此时是将总的轮播图像左移了一个图片的宽度
context_itemsPIC.animate({
left: -idx * widUl
}, 500)
})
// 点击下一张
next.click(function() {
idx++;
idx %= len; // 序号为小圆按钮的长度时到达第一张
crtlItems.eq(idx).addClass("crtlItem_dot_on").siblings().removeClass("crtlItem_dot_on")
context_itemsPIC.animate({
left: -idx * widUl
}, 300)
})
//点击上一张
pre.click(function() {
idx--;
if (idx < 0) {
idx = len - 1
};
crtlItems.eq(idx).addClass("crtlItem_dot_on").siblings().removeClass("crtlItem_dot_on")
context_itemsPIC.animate({
left: -idx * widUl
}, 300)
})
// 自动轮播
auto();
function auto() {
timer = setInterval(function() {
next.trigger("click") // trigger() 方法触发被选元素的指定事件类型。触发click
}, 5000)
}
//setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
//setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
//提示: 1000 毫秒= 1 秒。
context_container.hover(function() {
clearInterval(timer);
}, function() {
auto();
})
})
//轮播图的显示效果结束
轮播图其实有多种形式,轮播项的表现形式也有很多种,做主要的是掌握它的变化的思想,关于本篇博文的轮播图的jquery控制,我有心把它做成封装的完美一点,像我的上一篇博文:新浪网站首页同款选项卡(https://blog.csdn.net/weixin_43623871/article/details/84035369),有兴趣的可以去看看。
如您觉得我的文章对您有帮助,请复制上方链接分享,让更多的人看到。