<style type="text/css"> *{margin:0;padding:0;} body{font-size:12px;font-family:"微软雅黑";color:#666;height:1500px;} img{border:0;} /*banner start*/ .banner{100%;height:350px;margin-top:px;} .banner .b_adv{1200px;height:50px;margin:0 auto;position:relative;} .banner .b_adv a{position:absolute;top:0;left:220px;} .banner .b_bg{height:300px;background:#4a4d9c;z-index:1;} .banner .b_bg .b_con{1200px;height:300px;margin:0 auto; position:relative;z-index:2; } /*focus start*/ .banner .b_bg .b_con .focus{760px;height:300px; position:absolute;left:220px;top:0;z-index:3;overflow:hidden;} .banner .b_bg .b_con .focus .f_pic{position:relative;} .banner .b_bg .b_con .focus .f_pic li{list-style:none;} .banner .b_bg .b_con .focus .f_btn{height:24px; position:absolute;bottom:10px;left:330px; /*left:50%;margin-left:-70px;*/ } .banner .b_bg .b_con .focus .f_btn ul{background:#000;display:inline-block;padding:7px 28px;opacity:0.4;filter:alpha(opacity=40); border-radius:15px;} .banner .b_bg .b_con .focus .f_btn ul li{8px;height:8px;border-radius:10px;border:1px solid #fff;float:left;list-style:none;margin:0 3px;} .banner .b_bg .b_con .focus .f_btn ul .no{background:#fff;} .banner .b_bg .b_con .focus .f_ear{46px;height:70px;display:block;background:url("images/icon.png") no-repeat; position:absolute;display:none; } .banner .b_bg .b_con .focus:hover .f_ear{display:block;} .banner .b_bg .b_con .focus .pre{left:10px;top:110px;background-position:-74px 0;} .banner .b_bg .b_con .focus .pre:hover{background-position:-172px 0;} .banner .b_bg .b_con .focus .next{right:10px;top:110px;background-position:-123px 0;} .banner .b_bg .b_con .focus .next:hover{background-position:0 -57px;} /*end focus*/ .clear{clear:both;} </style> <body> <!--banner start--> <div class="banner"> <div class="b_bg"> <div class="b_con"> <!--focus start--> <div class="focus"> <ul class="f_pic"> <li> <a href="#"> <img src="images/banner-3.jpg" alt="中山学院" width="760" height="300" /> </a> </li> <li> <a href="#"> <img src="images/banner-1.jpg" alt="中山学院" width="760" height="300" /> </a> </li> <li> <a href="#"> <img src="images/banner-2.jpg" alt="中山学院" width="760" height="300" /> </a> </li> <li> <a href="#"> <img src="images/banner-4.jpg" alt="中山学院" width="760" height="300" /> </a> </li> <li> <a href="#"> <img src="images/banner-5.jpg" alt="中山学院" width="760" height="300" /> </a> </li> </ul> <div class="f_btn"> <ul> <li class="no" data-color="#4E4D9B"></li> <li data-color="#A136D2"></li> <li data-color="#6766CE"></li> <li data-color="#563481"></li> <li data-color="#009DE4"></li> </ul> </div> <a href="#" class="f_ear pre"></a> <a href="#" class="f_ear next"></a> </div> <!--end focus--> </div> </div> </div> <!--end banner--> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function(){ // 焦点图切换 var index = 0; // 轮展图切换 $(".f_btn").find("li").mouseover(function(){ // 控制小按钮 $(this).addClass("no").siblings().removeClass("no"); var _index = $(this).index(); // 获取当前选中的索引 index = _index; // 重新赋值 $(".f_pic").find("li").eq(_index).fadeIn("slow").siblings().hide(); // 联动切换 // 切换背景颜色 var background = $(this).data("color"); $(this).parents(".b_bg").css("background",background); }); // 下一张 $(".next").click(function(){ index++; var length = $(".f_pic").find("li").length; if(index >= length){ index = 0; } // 切换背景颜色 var background = $(".f_btn").find("li").eq(index).data("color"); $(this).parents(".b_bg").css("background",background); // 联动小按钮 $(".f_btn").find("li").eq(index).addClass("no").siblings().removeClass("no"); $(".f_pic").find("li").eq(index).fadeIn("slow").siblings().hide(); // 联动切换 }); // 上一张 $(".pre").click(function(){ index--; var length = $(".f_pic").find("li").length; if(index < 0){ index = length - 1; } // 切换背景颜色 var background = $(".f_btn").find("li").eq(index).data("color"); $(this).parents(".b_bg").css("background",background); // 联动小按钮 $(".f_btn").find("li").eq(index).addClass("no").siblings().removeClass("no"); $(".f_pic").find("li").eq(index).fadeIn("slow").siblings().hide(); // 联动切换 }); // 自动切换,一般不使用setTimeout只执行一次 setInterval(function(){ index++; var length = $(".f_pic").find("li").length; if(index >= length){ index = 0; } // 切换背景颜色 var background = $(".f_btn").find("li").eq(index).data("color"); $(".b_bg").css("background",background); // 联动小按钮 $(".f_btn").find("li").eq(index).addClass("no").siblings().removeClass("no"); $(".f_pic").find("li").eq(index).fadeIn("slow").siblings().hide(); // 联动切换 },2000); }); </script> </body>
