jQuery全屏banner焦点图切换

最新推荐文章于 2022-07-09 10:30:05 发布

Cc_JoJo

最新推荐文章于 2022-07-09 10:30:05 发布

阅读量1.4k

点赞数 1

分类专栏： web前端文章标签： jquery banner滚动效果

本文链接：https://blog.csdn.net/caohoucheng/article/details/74178250

版权

web前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

效果：
这里写图片描述
如图所示：
1.点击圆点切换图片
2.点击箭头切换图片
3.x秒后自动往后跳一张图（图中未演示）

代码


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>jQuery全屏banner焦点图切换代码</title>

<script type="text/javascript" src="js/jQuery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<style>
/* css 重置 */
body,div,ul,li,dl,dt,dd,h2,p{padding:0;margin:0;font-family:"微软雅黑";}
ul{list-style:none ;}
img{border:none;}
a{blr:expression(this.onFocus=this.blur());outline:none;}

/* banner-box */
.banner-box{min-width:1210px;height:360px;position:relative;overflow:hidden;}
.banner-box .bd{ width:100% !important;}
.banner-box .bd li .m-width {width:1210px;margin:0 auto;overflow:hidden;}
.banner-box .bd li{width:100% !important;height:360px;}
.banner-box .bd li a{display:block;background-size:auto;}

.banner-btn{width:1210px;position:absolute;top:120px;left:50%;margin-left:-605px;}
.banner-btn a{display:block;width:49px;height:104px;position:absolute;top:0;filter:alpha(opacity=40);-moz-opacity:0.4;-khtml-opacity:0.4;opacity:0.4;}
.banner-btn a.prev{left:20px;background:url(img/foot.png) no-repeat 0 0;} 
.banner-btn a.next{right:20px;background:url(img/foot.png) no-repeat -49px 0;}

.banner-box .hd {position:absolute;top:210px;left:537px;}
.banner-box .hd ul li{width:12px;height:12px;border-radius :50%;text-indent:-9999px;margin-right:20px;background:#ccc;float:left;cursor:pointer;}
.banner-box .hd ul li.on{background:#DA324D;}
</style>

</head>
<body>

<div class="banner-box">
    <div class="bd">
        <ul>                
            <li style="background:#F3E5D8;">
                <div class="m-width">
                <a href="javascript:void(0);"><img src="img/img1.jpg" /></a>
                </div>
            </li>
            <li style="background:#B01415">
                <div class="m-width">
                <a href="javascript:void(0);"><img src="img/img2.jpg" /></a>
                </div>
            </li>
            <li style="background:#C49803;">
                <div class="m-width">
                <a href="javascript:void(0);"><img src="img/img3.jpg" /></a>
                </div>
            </li>
            <li style="background:#FDFDF5">
                <div class="m-width">
                <a href="javascript:void(0);"><img src="img/img4.jpg" /></a>
                </div>
            </li>  

        </ul>
    </div>
    <div class="banner-btn">
        <a class="prev" href="javascript:void(0);"></a>
        <a class="next" href="javascript:void(0);"></a>
        <div class="hd">
        <ul></ul>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){

    $(".prev,.next").hover(function(){
        $(this).stop(true,false).fadeTo("show",0.9);
    },function(){
        $(this).stop(true,false).fadeTo("show",0.4);
    });

    $(".banner-box").slide({
        titCell:".hd ul",
        mainCell:".bd ul",
        effect:"fold",
        interTime:3500,//跳转间隔时间
        delayTime:500,
        autoPlay:true,
        autoPage:true, 
        trigger:"click" 
    });

});
</script>
</body>
</html>