新浪网站首页同款轮播图

1.轮播图的最终效果

成功后的效果图如下;

2. 分析一下它的布局

1. 首先是头部的布局：

2. 轮播的内容：

3. 展现的效果：

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),有兴趣的可以去看看。

如您觉得我的文章对您有帮助，请复制上方链接分享，让更多的人看到。