4.1哪位大神做出來了可以發(fā)下代碼嗎搞了好久都沒出來效果
幫幫忙
qq_冰凍的陸地_0
2016-10-07
5 回答
舉報
0/150
提交
取消
2016-12-07
你把我的代碼直接粘貼進去應該就能用了
2016-12-11
function?$(id){ ????return?typeof?id==='string'?document.getElementById(id):id; } window.onload=function(){ ????var?timer=null; ????var?time2=null; ????var?index=0; ????//獲取鼠標滑過或點擊的標簽和要切換內(nèi)容的元素 ????var?lis=$('title').getElementsByTagName('li'), ????????divs=$('cont').getElementsByTagName('div'); ????if(lis.length!=divs.length) ????return; ????//遍歷title下的所有l(wèi)i ????for(i=0;i<lis.length;i++){ ????????lis[i].id=i; ????????lis[i].onmouseover=function(){ ????????????clearInterval(time2); ????????????//用that來引用當前的li ????????????var?that=this; ????????????//如果存在定時器，就清除定時器 ????????????if(timer){ ????????????????clearTimeout(timer); ????????????????timer=null; ????????????} ????????????timer=setTimeout(changeOption(that.id),500) ????????} ????????lis[i].onmouseout=function(){ ????????????clearInterval(time2); ????????????if(timer){ ????????????????clearTimeout(timer); ????????????????timer=null; ????????????} ????????????timer2=setInterval(autoPlay,2000); ????????} ????} ????//定時器，定時改變 ????if(timer2){ ????????clearInterval(timer2); ????????timer2=null; ????} ????timer2=setInterval(autoPlay,2000); ????//封裝 ????function?changeOption(x){ ????????????????//清除所有l(wèi)i上的active ????????????????????for(j=0;j<lis.length;j++){ ????????????????????????lis[j].className=''; ????????????????????????divs[j].style.display='none'; ????????????????????} ????????????????//設置當前高亮顯示 ????????????????????lis[x].className='active'; ????????????????????divs[x].style.display='block'; ????????????????????index=x; ????} ????function?autoPlay(){ ????????????index++; ????????????if(index>=lis.length){ ????????????????index=0;} ????????????changeOption(index); ????????} }2016-12-07
<script type="text/javascript">
? function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
? window.onload=banner;
? function banner(){
? var wrap=document.getElementById('wrap'),
? ? ? ? picList=document.getElementById('pic').getElementsByTagName('li'),
? ? ? ? list=document.getElementById('list').getElementsByTagName('li'),
? ? ? ? index=0,
? ? ? ? timer=null;
? ? ? // 定義并調(diào)用自動播放函數(shù)
timer=setInterval(autoPlay,2000);
? ? ? // 定義圖片切換函數(shù)
? ? ?function autoPlay(){
? ? ? index++;
? ? ? if(index>=list.length){
? ? ? index=0;
? ? ? }
? ? ? autoChange(index);
? ? ?
? ? ?}
? ? ?
for(var i=0;i<list.length;i++){
list[i].id=i;
list[i].onmouseover=function(){
clearInterval(timer);
autoChange(this.id);
}
list[i].onmouseout=function(){
timer=setInterval(autoPlay,2000);
}
picList[i].onmouseover=function(){
clearInterval(timer);
}
picList[i].onmouseout=function(){
timer=setInterval(autoPlay,2000);
}
}
? ? ?function autoChange(curIndex){
? ? ? for(var j=0;j<list.length;j++){
? ? ? list[j].className='';
? ? ? picList[j].style.display='none';
? ? ? }
? ? ? list[curIndex].className='on';
? ? ? picList[curIndex].style.display='block';
? ? ? index=curIndex;
? ? ?}
? }
? ??
? ?
? </script>
2016-10-17
這不是jQuery，你開頭就定義錯了
2016-10-08
image.html 代碼
<!doctype html>
<html>
<head>
??? <meta charset="UTF-8">
?? ?<title>Document</title>
? <link rel="stylesheet" type="text/css" href="css/image.css">
? <script type="text/javascript" src="js/image.js"></script>
</head>
<body>
? <div id='wrap'>
??? <ul id="pic">
????? <li style="display: block;"><img src="http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg" alt=""></li>
????? <li style="display: none;"><img src="http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg" alt=""></li>
????? <li style="display: none;"><img src="http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg" alt=""></li>
????? <li style="display: none;"><img src="http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg" alt=""></li>
????? <li style="display: none;"><img src="http://img1.sycdn.imooc.com//54111d7d00018ba604900170.jpg" alt=""></li>?? ?
??? </ul>
??? <ol id="list">
????? <li>1</li>
????? <li>2</li>
????? <li>3</li>
????? <li>4</li>
????? <li>5</li>
??? </ol>
? </div>
</body>
</html>
css代碼
*{margin:0;
??? padding:0;
??? list-style:none;}
.wrap{height:170px;
??????? width:490px;
??????? margin:60px auto;
??????? overflow: hidden;
??????? position: relative;
??????? margin:100px auto;}
.wrap ul{position:absolute;}
.wrap ul li{height:170px;}
.wrap ol{position:absolute;
?????????? right:5px;
?????????? bottom:10px;}
.wrap ol li{height:20px; width: 20px;
????????????? background:#ccc;
????????????? border:solid 1px #666;
????????????? margin-left:5px;
????????????? color:#000;
????????????? float:left;
????????????? /*line-height:center;*/
????????????? text-align:center;
????????????? cursor:pointer;}
.wrap ol .on{background:#E97305;
?????????????? color:#fff;}
js 代碼
function $(id){
? return typeof id==='string'?document.getElementById(id):id;
}
window.onload=image;
function image(){
??? var wrap=$('wrap');
??? var pic=$('pic');
??? var lis = pic.getElementsByTagName('li');
??? var list=$('list').getElementsByTagName('li');
??? var index=0;
??? var timer=null;
?? ?
????? //輪播圖自動播放
????? timer=setInterval(aotuPlay,2000)
???? ?
??? ?
???? // 鼠標劃過整個容器時停止自動播放
????? pic.onmouseover=function(){
??????? clearInterval(timer);
?????? }
??? // 鼠標離開整個容器時繼續(xù)播放至下一張
????? pic.onmouseout=function(){
??????? timer=setInterval(aotuPlay,2000)
????? }
??? ?
???? //定義并調(diào)用自動播放函數(shù)aotuPlay
???? function aotuPlay(){
??????? index++;
??????? if (index>=lis.length) {
????????? index=0;
??????? }
??????? // 遍歷所有數(shù)字導航實現(xiàn)劃過切換至對應的圖片
??????? for (var i = 0; i < lis.length; i++) {
????????? lis[i].style.display='none';
????????? list[i].className='';
??????? }
??????? lis[index].style.display='block';
??????? list[index].className='on';
????? }
}