<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; border: 0; } body,html{ width: 100%; min-width: 1200px; height: 100%; } #top{ width: 100%; height: 60px; background: #000; } #top:hover{ background: #333; } #wrap{ width: 1200px; margin: 0 auto; } #top ul{ overflow: hidden; } #top ul li{ list-style: none; color: #fff; font-size: 16px; padding: 21px; cursor: pointer; } #top .left li{ float: left; } #top .left{ float: left; } #top .right{ float: right; } #top .right li{ float: right; } #top ul li:hover{ border-bottom: 2px solid #f40; padding: 20px; } #top #wrap span{ display: block; float: right; padding: 21px; background: #3fc; color: #fff; cursor: pointer; } #top #wrap span:hover{ background: #3ff; } #top .banner{ width: 100%; height: 500px; } #top .banner img{ width: 100%; height: 100%; } .box{ position: relative; } #list{ position: absolute; bottom: 10px; left: 50%; margin-left: -180px; } #list li{ list-style: none; width: 20px; height: 20px; border-radius: 50%; background: #000; opacity: .4; filter: alpha(opacity = 40) ; float: left; margin-left:10px; cursor: pointer; } #list .li{ background: #fff; } </style></head><body> <div id="top"> <div id="wrap"> <ul class="left"> <li>最新活动</li> <li>产品</li> <li>解决方案</li> <li>运市场</li> <li>大数据</li> <li>社区</li> <li>支持</li> <li>合作伙伴</li> <li>更多</li> </ul> <span>注册有礼</span> <ul class="right"> <li>控制台</li> <li>备案</li> <li>登陆</li> </ul> <div style="clear: both"></div> </div> <div class="box"> <div class="banner"> <img src="img/1.jpg" id="pic" /> </div> <ul id="list"> <li class="li"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <script type="text/javascript" src="js/jquery-1.11.3.js" ></script> <script type="text/javascript" src="js/timeSport.js" ></script> <script> var banner = document.getElementsByClassName("banner"); var oPic = document.getElementById("pic") var list = document.getElementById("list"); num = 1; var oLi = $("#list li") for(var i=0;i<oLi.length;i++){ oLi[i].index = i; oLi.click(function(){ num = this.index + 1; fn(); }) }function fn(){
sport(oPic,{'opacity':0},function(){ oPic.src = "img/"+num+".jpg"; sport(oPic,{'opacity':100}) for (var i=0;i<oLi.length;i++) { oLi[i].className = ''; if(num == i+1){ oLi[i].style.background = '#fff'; }else{ oLi[i].style.background = ''; } } }); } </script> </body></html>