零基础建站培训教程介绍

当前位置:

网站通栏轮播焦点图代码(推荐)

这是一个适用于各类网站的通栏轮播焦点图,尺寸是自动适应于用户的屏幕尺寸。而且代码简单,功能齐全,是我们自己建网站时随拿随用的网站通栏轮播焦点图,推荐新手学建网站使用。

网站通栏轮播焦点图

相关功能代码

网站通栏轮播焦点图代码如下:

HTML代码(图片地址可以换成自己的)


<div id="focus-banner">
<ul id="focus-banner-list">
 <li><a href="http://www.kabincy.com/?page_id=1150" class="focus-banner-img"> <img src="http://www.kabincy.com/wp-content/themes/canyin/images/banner1.jpg" alt=""></a>
 <div class="focus-banner-text">
<p>文字介绍1</p>
</div>

 </li>
            <li><a href="http://www.kabincy.com/?cat=60" class="focus-banner-img"> <img src="http://www.kabincy.com/wp-content/themes/canyin/images/banner2.jpg" alt=""></a>
             <div class="focus-banner-text">
<p>文字介绍2</p>
</div>
            </li>
            <li><a href="http://www.kabincy.com/?page_id=1152" class="focus-banner-img"> <img src="http://www.kabincy.com/wp-content/themes/canyin/images/banner3.jpg" alt=""></a>
             <div class="focus-banner-text">
<p>文字介绍3</p>
</div>

            </li>
</ul>
<a href="javascript:;" id="next-img" class="focus-handle"></a> <a href="javascript:;" id="prev-img" class="focus-handle"></a>
<ul id="focus-bubble">
</ul>
</div>

CSS代码


#focus-banner {
    position: relative;
    width: 100%;
    height: 350px !important;
    overflow: hidden;
    z-index:-99;
    top:-5px;
}
#focus-banner-list {
    position: relative
}
#focus-banner-list li {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%
}
#focus-banner-list li img {
    width: 100%
    height:350px !important;
}
.focus-banner-img {
    display: block
}
#focus-banner-list .focus-banner-text {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1000px;
    height: 100%;
    margin-left: -500px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    text-align: center
}
#focus-banner .focus-handle{position:absolute;top:50%;margin-top:-40px;z-index:100;display:block;width:80px;height:80px;background-image:url(http://www.jq22.com/demo/focus20150803/images/focus_handle.png)}
#next-img {
    left: 0
}
#next-img {
    left: 50px;
    background-position: 0 0
}
#next-img:hover {
    background-position: 0 -80px
}
#prev-img {
    right: 0
}
#prev-img {
    right: 50px;
    background-position: -80px 0
}
#prev-img:hover {
    background-position: -80px -80px
}
#focus-bubble {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 999
}
#focus-bubble li {
    float: left;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border: 1px #fff solid;
    cursor: pointer
}
#focus-bubble li a {
    display: block;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=0);
    opacity: 0
}
#focus-bubble li.current {
    background-color: #fff
}

JS代码


<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
        $(function(){
            var focusBanner=function(){
                var $focusBanner=$("#focus-banner"),
                    $bannerList=$("#focus-banner-list li"),
                    $focusHandle=$(".focus-handle"),
                    $bannerImg=$(".focus-banner-img"),
                    $nextBnt=$("#next-img"),
                    $prevBnt=$("#prev-img"),
                    $focusBubble=$("#focus-bubble"),
                    bannerLength=$bannerList.length,
                    _index=0,
                    _timer="";

                    var _height=$(".focus-banner-img").find("img").height();
                    $focusBanner.height(_height);
                    $bannerImg.height(_height);

                    for(var i=0; i<bannerLength; i++){
                        $bannerList.eq(i).css("zIndex",bannerLength-i);
                        $focusBubble.append('<li><a href="javascript:;">'+i+'</a></li>');
                    }
                    $focusBubble.find("li").eq(0).addClass("current");
                    var bubbleLength=$focusBubble.find("li").length;
                    $focusBubble.css({
                        "width":bubbleLength*22,
                        "marginLeft":-bubbleLength*11
                    });//初始化

                    $focusBubble.on("click","li",function(){
                        $(this).addClass("current").siblings().removeClass("current");
                        _index=$(this).index();
                        changeImg(_index);
                    });//点击轮换

                    $prevBnt.on("click",function(){
                        _index++
                        if(_index>bannerLength-1){
                            _index=0;
                        }
                        changeImg(_index);
                    });//下一张

                    $nextBnt.on("click",function(){
                        _index--
                        if(_index<0){
                            _index=bannerLength-1;
                        }
                        changeImg(_index);
                    });//上一张

                    function changeImg(_index){
                        $bannerList.eq(_index).fadeIn(250);
                        $bannerList.eq(_index).siblings().fadeOut(200);
                        $focusBubble.find("li").removeClass("current");
                        $focusBubble.find("li").eq(_index).addClass("current");
                        clearInterval(_timer);
                        _timer=setInterval(function(){$nextBnt.click()},5000)
                    }//切换主函数
                    _timer=setInterval(function(){$nextBnt.click()},5000);

                    function isIE() { //ie?
                        if (!!window.ActiveXObject || "ActiveXObject" in window)
                        return true;
                        else
                        return false;
                    }

                    if(!isIE()){
                        $(window).resize(function(){    
                            window.location.reload();
                        });
                    }else{
                        if(!+'\v1' && !'1'[0]){
                            alert("老铁什么年代啦还在搞ie8以下版本啊!")
                        } else{
                            $(window).resize(function(){    
                                window.location.reload();
                            });
                        };
                    }

            }();   
        })
    </script>

使用方法

将以上代码放到相应的位置。

  • HTML代码放到需要显示轮播图的位置;
  • CSS代码放到自己网站的CSS文件中;
  • JS代码放到网站的最底部</body>标签上面。

发表评论

零基础学建站就到学做网站论坛