jQuery全屏banner焦点图切换

来源：互联网发布：excel学生成绩管理数据编辑：程序博客网时间：2024/05/22 15:40
效果：
这里写图片描述
如图所示：
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>
GitHub源码
阅读全文
0 0