详解原生JS+CSS实现的很酷的焦点图的具体方法（附源码）

焦点图轮播，图片轮播，是网站前端非常常用的一个模块功能。它通常用于增强页面表现力，使页面美观，布局更丰满，增加页面动感。用来展示网站最新的和热门的内容，用于吸引用户点击，引导用户行为。本资源参考优酷首页轮播图设计风格。话不多说，先看效果，免得占用您宝贵的学习和工作时间：

好了，效果图看过了，不感兴趣的同学可以划走了！感兴趣的，欢迎继续往下看。【点这里下载本例《原生JS+CSS实现的很酷的焦点图》源代码和图片】

首先，我们分析一下这个轮播，以看出它基本上由几个部分组成：大图列表，小图列表（含标题），大图主题，切换按钮。接下来写这个布局代码。

<div id="img_focus" class="focus_show" > <!-- 外容器，用来控制整体大小和位置 -->       
    <ul id="big_img_wrap" class="big_img_list" ><!-- 大图列表容器 -->
        <li>
            <a href="#" target="_blank"><img src="images/0000.jpg" alt="" /></a>
        </li>
        <li>
            <div class="ads_tip">广告</div>
            <a href="#" target="_blank"><img src="images/0001.jpg" alt="" /></a>
        </li>
        <li><a href="#" target="_blank"><img src="images/0002.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#" target="_blank"><img src="images/0003.jpg" alt="" /></a>
        </li>
        <li> 
            <div class="recommended">重磅推荐</div> 
            <a href="#" target="_blank"><img src="images/0004.jpg" alt="" /></a>
        </li>            
    </ul>

    <ul id="img_title" class="img_title" ><!-- 焦点标题容器 -->
        <li class="current"><h3><a href="#" target="_blank"></a></h3></li>
    </ul>

    <div class="focus_switch"><a href="javascript:;" class="icon_prev"></a><a href="javascript:;" class="icon_next"></a></div><!-- 切换按钮 -->

    <ul id="small_img_wrap" class="small_img_list" ><!-- 小图列表容器 -->
        <li class="current">
          <a href="#" target="_blank"><img src="images/0000.jpg"  alt="范·迪塞尔再度出山，为情为爱，极限狂飙！" /></a>
          <strong>速度与激情10</strong>
        </li>
        <li>
          <a href="#" target="_blank"><img src="images/0001.jpg" alt="看007能否再次从幽灵党的阴谋里拯救世界--" /></a>
          <strong>007:无暇赴死</strong>
        </li>
        <li>
          <a href="#" target="_blank"><img src="images/0002.jpg" alt="赛博坦星的死敌出现" /></a>
          <strong>变形金刚5：人类的末日</strong>
        </li>
        <li>
          <a href="#" target="_blank"><img src="images/0003.jpg" alt="黑寡妇单身赴死，灭霸弹指消灭宇宙" /></a>
          <strong>复仇者联盟：无限战争</strong>
        </li>
        <li>
          <a href="#" target="_blank"><img src="images/0004.jpg" alt="钢铁侠与美国队长的终极对决，缘来不分对错！" /></a>
          <strong>钢铁侠：内战</strong>
        </li>            
    </ul>         
</div>    

好了，看了上面的代码，结构很清楚了吧。我已经把重点注释都写在源码里，方便分析。接下来就是布局样式表，看看css是怎么写的：

/* Reset CSS  清除默认样式和浮动 */
html {
  margin: 0px !important;
  height: 100%;
  background: #000;
}
body{
  height: 100%;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,figure,fieldset,input,textarea,p,blockquote,th,td {
  margin: 0;
  padding: 0;
}

a{
    text-decoration: none;
}
/* 轮播图区域 */
.focus_show { 
    display: block;
    width: 1156px; 
    height: 540px; 
    position: relative; 
    overflow: hidden; 
    margin: 0 auto; 
    margin-top: 5%;
    border-radius: 15px;
    background: #000;   
}
    .focus_show .big_img_list { 
        display: block; 
        width: 100%; 
        height: 540px; 
        transition: opacity 2s;
    }
        .focus_show .big_img_list li, .focus_show .big_img_list a, .focus_show .big_img_list img { 
            display: block; 
            width: 100%; 
            height: auto; 
            transition: opacity 2s;
        }
        .focus_show .big_img_list li { 
            position: absolute; 
            left: 0; 
            top: 0; 
            transition: opacity 2s;
        }
    .focus_show .img_title { 
        position: absolute; 
        z-index: 11; 
        left: 0; 
        bottom:155px; 
        overflow:hidden; 
        zoom: 1; 
        width: 100%; 
        display: block;
    }

    
:root .img_title { 
    filter: none; 
}
.focus_show .img_title li { 
    padding: 0 0 0 30px;    
    word-break: keep-all; 
    word-wrap: keep-all; 
    white-space: nowrap; 
    table-layout: fixed; 
    -o-text-overflow: ellipsis; 
    text-overflow: ellipsis;
    /* background:rgba(0,0,0,.1) ;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);  */
}
    .focus_show .img_title li h3 { 
        line-height: 53px; 
        _line-height: 55px; 
        font-size: 28px; 
        font-family: "Microsoft Yahei",Tahoma,Geneva; font-weight: 600; 
    }
        .focus_show .img_title li h3 a { 
            color: #fff; 
            text-shadow: rgba(0,0,0,.5) 0px 2px 10px;
        }
        
.focus_switch { 
    width: 59px; 
    height: 30px; 
    position: absolute; 
    z-index: 10; 
    right:30px; 
    bottom: 50px;
    border-radius: 5px;
    overflow: hidden; 
}
    .focus_switch a { 
        float: left; 
        width: 29px; 
        height: 30px;         
        background: #333;        
        background-repeat: no-repeat; 
        cursor: pointer;        

    }
    .focus_switch .icon_prev { 
        border-radius: 5px 0px 0px 5px;         
        margin: 0 1px 0 0; 
        opacity: 0.5;
    }
        .focus_switch .icon_prev::after{
            display: block;
            content: '';
            border-width: 8px;
            border-style: solid;      
            position: absolute;       
            top: 7px;
            left:2px;
            transition: all .5s;
            border-color: transparent #fff transparent transparent ;
        }        
        .focus_switch .icon_prev:hover{
           
            opacity: 1;
        }
        .focus_switch .icon_prev:hover::after { 
            border-color: transparent #fff transparent transparent ;
        }
    .focus_switch .icon_next { 
        border-radius: 0px 5px 5px 0px; 
        opacity: 0.5; 
    }
    .focus_switch .icon_next::after{
            display: block;
            content: '';
            border-width: 8px;
            border-style: solid;      
            position: absolute;       
            top: 7px;
            right:2px;
            transition: all .5s;
            border-color: transparent transparent transparent #fff;
        }
        .focus_switch .icon_next:hover{
            
            opacity: 1;
        }
        .focus_switch .icon_next:hover::after{ 
            border-color: transparent transparent transparent #fff;
        }

.focus_show .small_img_list { 
    padding: 20px;  
    overflow: hidden; 
    height: 170px; 
    position:absolute;
    box-sizing:border-box; 
    bottom:0px; 
    left:0px; 
    z-index:9; 
    width: 100%;
    margin: 0 auto;
    background-image:linear-gradient(0deg,rgba(0,0,0,0.3) 18%,rgba(0,0,0,0.0));
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px); 
}
    .focus_show .small_img_list li { 
        width: 160px;
        height: 130px;
        border-radius: 10px;        
        float: left; 
        text-align: center;
        margin: 10px;       
        position: relative; 
        *display: inline; 
        overflow: hidden;
        color: #aaa;
        }
        .focus_show .small_img_list li a { 
            display: block; 
            width: auto;
            height: 100px;                              
            border-radius: 10px;  
            margin-bottom: 2px; 
            overflow:hidden; 
            position: relative;
            border: 2px solid rgba(0, 0, 0, .0);
        }
        .focus_show .small_img_list li img { 
            display: block; 
            width: auto;
            height: 100px;
            border-radius: 10px;
            position: absolute;     
            left: 50%;
            transform: translateX(-50%);
        }
        .focus_show .small_img_list li a:hover { 
            _background: none; 
        }
   
    .focus_show .small_img_list li a{
        filter: grayscale(70%) blur(0.5px); /* 调整数值来改变模糊程度 */                 
    }        
    .focus_show .small_img_list li.current a{ 
        border: 2px solid #139ce4;
        -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
        filter: grayscale(0%);
        filter: blur(0px); /* 调整数值来改变模糊程度 */                                 
    }
    .focus_show .small_img_list li strong{            
        font-weight: 500;
        font-size: 12px;  
    }
    .focus_show .small_img_list li.current strong{
        color: #139ce4;
    }

.ads_tip,.recommended {
  z-index: 9;
  position: absolute;
  right: 10px;
  top: 10px;
  width: auto;
  line-height: 15px;
  padding: 3px 8px;
  background: #fff;
  color: #999;
  font-size: 12px;
  font-weight: 700;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -khtml-border-radius: 10px;
}
.recommended {
  background-size: 300%;
  background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);
  color: #fff;
}

TIPS：本例与上传资源稍微有所修改，切换按钮部分，用css代替了原来的图片样式。其他部分没有变化，希望减少图片数量提高效率的同学可以复制这段css覆盖掉下载的源代码。（我懒的再传一次了。）

写到这里，页面布局基本成型，可以看到静态效果了。接下来，我们使用js让轮播动起来：

<script>
var foucsbox = function (time) {
    var time = time || 5000
    , $ = function (id) { return document.getElementById(id); }
    , topCon = $('img_focus')
    , big = $('big_img_wrap')
    , samll = $('small_img_wrap')
    , tip = $('img_title')
    , bigimgs = big.getElementsByTagName('li')
    , samllimgs = samll.getElementsByTagName('li')
    , imglink = tip.getElementsByTagName('a')[0]
    , slide = function (z) {
        samllimgs[lastIndex].className = '';
        samllimgs[z].className = 'current';
        //bigimgs[lastIndex].style.display = 'none';
        bigimgs[lastIndex].style.opacity = '0';
        //bigimgs[z].style.display = 'block';
        bigimgs[z].style.opacity= '1';
        try {
            imglink.innerHTML = samllimgs[z].getElementsByTagName('img')[0].alt;
        }
        catch (e) {
            imglink.innerText = samllimgs[z].firstChild.firstChild.alt;            
        }
        lastIndex = i = z;
    }
    , helper = function (z) {
        return function (e) {
            var na;
            if (!e) {
                e = window.event;
                na = e.srcElement.nodeName;
            }
            else {
                na = e.target.nodeName;
            }
            if (na === 'IMG') {
                slide(z);
            }
        }
    }
    , lastIndex = i = 0, x, y = bigimgs.length
    , getPrevI = function (q) { return i - q < 0 ? y - q : i - 1; }
    , getNextI = function (q) { return i + q >= y ? i + q - y : i + 1; }
    var s = setInterval(function () {
        slide(i);
        i = getNextI(1);
    }, time);
    try {
        imglink.innerText = samllimgs[0].getElementsByTagName('img')[0].alt;
    }
    catch (e) {
        imglink.innerText = samllimgs[0].firstChild.firstChild.alt;        
    }
    for (x = 1; x < y; x += 1) {
        //bigimgs[x].style.display = 'none';
        bigimgs[x].style.opacity = '0';
    }
    for (x = 0; x < y; x += 1) {
        samllimgs[x].onmouseover = helper(x);
    }
    topCon.children[2].onclick = function (e) {
        i = lastIndex;
        var t;
        if (!e) {
            e = window.event;
            t = e.srcElement;
        } else {
            t = e.target;
        }
        switch (t.className) {
            case 'icon_prev':
                slide(getPrevI(1));
                break;
            case 'icon_next':
                slide(getNextI(1));
                break;
        }
    };
    topCon.onmouseover = function () {
        clearInterval(s);
    };
    topCon.onmouseout = function () {
        s = setInterval(function () {
            slide(i);
            i = getNextI(1);
        }, time);
    };
};
    foucsbox(2500); // 调整切换速度，为了阅读方便，不宜过快（小）
</script>  

好了，就写到这里！【点这里下载本例《原生JS+CSS实现的很酷的焦点图》源代码和图片】

感谢您阅读我的文章，愿我的分享能对您的工作和学习有所帮助！嗯，不那么麻烦的话，请点个赞！