|
|| <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> <link rel="stylesheet" type="text/css" href="images/style.css"> <link rel="stylesheet" type="text/css" href="images/pic.css"> <div class="bwidth"> <div class="top"> <div class="logo"><img src="images/logo.png" /></div> <div class="nav"> <ul> <li><a href="#glk">GLK-SUV</a></li> <li><a href="#cxld">车型亮点</a></li> <li><a href="#peizhi">配置</a></li> <li><a href="#about">联系我们</a></li> </ul> </div> </div> <div class="navbg"></div> <div id="glk" class="scroll_div"> <ul class="pic"> <li><img src="banner/b1.jpg" /></li> <li><img src="banner/b2.jpg" /></li> <li><img src="banner/b3.jpg" /></li> </ul> <ul class="btn"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <div id="cxld" class="scroll_div_cxld"> <ul class="pic_cxld"> <li><img src="images/cxld1.jpg" /></li> <li><img src="images/cxld2.jpg" /></li> <li><img src="images/cxld3.jpg" /></li> </ul> <ul class="btn_cxld"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div> <div class="bwidth1"> <div id="peizhi" class="scroll_div_peizhi"> <ul class="pic_peizhi"> <li><img src="images/peizhi1.jpg" /></li> <li><img src="images/peizhi2.jpg" /></li> <li><img src="images/peizhi3.jpg" /></li> </ul> <ul class="btn_peizhi"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div> <div id="footer" class="footer"></div> <script type="text/javascript"> $(function(){ var listLen = $(".pic li").length, i=0,setInter,speen = 3000; /*图片轮播*/ $(".btn li:last").css({"margin":"0px 0px 0px 0px"}); $(".btn li:first").addClass("on"); $(".pic li:first").show(); $(".btn li").each(function(index,element){ $(element).click(function(){ i = index; $(this).addClass("on").siblings().removeClass("on"); $(".pic li").eq(index).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300); }) $(element).hover(function(){ clearInterval(setInter); },function(){ outPlay(); }); }) out_fun = function(){ if(i < listLen){i++;}else{i=0;}; $(".btn li").eq(i).addClass("on").siblings().removeClass("on"); $(".pic li").eq(i).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300); } outPlay = function(){ setInter = setInterval("out_fun()",speen); } outPlay(); }) /*图片轮播亮点*/ $(function(){ var listLen = $(".pic_cxld li").length, i=0,setInter,speen = 3600; /*图片轮播*/ $(".btn_cxld li:last").css({"margin":"0px 0px 0px 0px"}); $(".btn_cxld li:first").addClass("on"); $(".pic_cxld li:first").show(); $(".btn_cxld li").each(function(index,element){ $(element).click(function(){ i = index; $(this).addClass("on").siblings().removeClass("on"); $(".pic_cxld li").eq(index).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300); }) $(element).hover(function(){ clearInterval(setInter); },function(){ outPlay_cxld(); }); }) out_fun_cxld = function(){ if(i < listLen){i++;}else{i=0;}; $(".btn_cxld li").eq(i).addClass("on").siblings().removeClass("on"); $(".pic_cxld li").eq(i).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300); } outPlay_cxld = function(){ setInter = setInterval("out_fun_cxld()",speen); } outPlay_cxld(); }) /*图片轮播配置*/ $(function(){ var listLen = $(".pic_peizhi li").length, i=0,setInter,speen = 9000; /*图片轮播*/ $(".btn_peizhi li:last").css({"margin":"0px 0px 0px 0px"}); $(".btn_peizhi li:first").addClass("on"); $(".pic_peizhi li:first").show(); $(".btn_peizhi li").each(function(index,element){ $(element).click(function(){ i = index; $(this).addClass("on").siblings().removeClass("on"); $(".pic_peizhi li").eq(index).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300); }) $(element).hover(function(){ clearInterval(setInter); },function(){ outPlay_peizhi(); }); }) out_fun_peizhi = function(){ if(i < listLen){i++;}else{i=0;}; $(".btn_peizhi li").eq(i).addClass("on").siblings().removeClass("on"); $(".pic_peizhi li").eq(i).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300); } outPlay_peizhi = function(){ setInter = setInterval("out_fun_peizhi()",speen); } outPlay_peizhi(); }) </script> CSS .scroll_div {width:960px; height:498px; margin:0 auto;position:relative;} .scroll_div .pic{width:960px; height:498px; overflow:hidden; position:relative; float:left;} .scroll_div .pic li{width:960px; height:498px; position:absolute; top:0; left:0; display:none;} .scroll_div .btn{float:right; width:18px;position:absolute;top:10%;left:5;} .scroll_div .btn li{width:18px; height:18px; display:block; float:left; text-align:center; color:#fff; font:12px/100% "微软雅黑"; background:#008dd8; margin-bottom:5px; line-height:18px; cursor:pointer;} .scroll_div .btn li.on{background:#d73737;} li {list-style:none;} .scroll_div_cxld{width:960px;height:195px;margin:0 auto;position:relative;} .scroll_div_cxld .pic_cxld{width:960px; height:195px; overflow:hidden; position:relative; float:left;} .scroll_div_cxld .pic_cxld li{width:960px; height:195px; position:absolute; top:0; left:0; display:none;} .scroll_div_cxld .btn_cxld{float:right; width:18px;position:absolute;top:65;right:10px;} .scroll_div_cxld .btn_cxld li{width:18px; height:18px; display:block; float:left; text-align:center; color:#fff; font:12px/100% "微软雅黑"; background:#008dd8; margin-bottom:10px; line-height:18px; cursor:pointer;} .scroll_div_cxld .btn_cxld li.on{background:#d73737;} .scroll_div_peizhi {width:960px; height:580px; margin:0 auto;position:relative;} .scroll_div_peizhi .pic_peizhi{width:960px; height:580px; overflow:hidden; position:relative; float:left;} .scroll_div_peizhi .pic_peizhi li{width:960px; height:580px; position:absolute; top:0; left:0; display:none;} .scroll_div_peizhi .btn_peizhi{float:right; width:18px;position:absolute;top:10%;left:15;} .scroll_div_peizhi .btn_peizhi li{width:18px; height:18px; display:block; float:left; text-align:center; color:#fff; font:12px/100% "微软雅黑"; background:#008dd8; margin-bottom:5px; line-height:18px; cursor:pointer;} .scroll_div_peizhi .btn_peizhi li.on{background:#d73737;} |
|
|
