自動播放 時小圓點鼠標移進移出問題
自動播放時鼠標移進移出沒效果，小圓點每次移動到第二個。
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>焦點輪播圖</title>
????<style?type="text/css">
????????*{?margin:?0;?padding:?0;?text-decoration:?none;}
????????body?{?padding:?20px;}
????????#container?{?width:?600px;?height:?400px;?border:?3px?solid?#333;?overflow:?hidden;?position:?relative;}
????????#list?{?width:?4200px;?height:?400px;?position:?absolute;?z-index:?1;}
????????#list?img?{?float:?left;}
????????#buttons?{?position:?absolute;?height:?10px;?width:?100px;?z-index:?2;?bottom:?20px;?left:?250px;}
????????#buttons?span?{?cursor:?pointer;?float:?left;?border:?1px?solid?#fff;?width:?10px;?height:?10px;?border-radius:?50%;?background:?#333;?margin-right:?5px;}
????????#buttons?.on?{??background:?orangered;}
????????.arrow?{?cursor:?pointer;?display:?none;?line-height:?39px;?text-align:?center;?font-size:?36px;?font-weight:?bold;?width:?40px;?height:?40px;??position:?absolute;?z-index:?2;?top:?180px;?background-color:?RGBA(0,0,0,.3);?color:?#fff;}
????????.arrow:hover?{?background-color:?RGBA(0,0,0,.7);}
????????#container:hover?.arrow?{?display:?block;}
????????#prev?{?left:?20px;}
????????#next?{?right:?20px;}
????</style>
</head>
<body>
<div?id="container">
????<div?id="list"?style="left:?-600px;">
????????<img?src="__STATIC__/index/images/pc/5.jpg"?alt="1"/>
????????<img?src="__STATIC__/index/images/pc/1.jpg"?alt="1"/>
????????<img?src="__STATIC__/index/images/pc/2.jpg"?alt="2"/>
????????<img?src="__STATIC__/index/images/pc/3.jpg"?alt="3"/>
????????<img?src="__STATIC__/index/images/pc/4.jpg"?alt="4"/>
????????<img?src="__STATIC__/index/images/pc/5.jpg"?alt="5"/>
????????<img?src="__STATIC__/index/images/pc/1.jpg"?alt="5"/>
????</div>
????<div?id="buttons">
????????<span?index="1"?class="on"></span>
????????<span?index="2"></span>
????????<span?index="3"></span>
????????<span?index="4"></span>
????????<span?index="5"></span>
????</div>
????<a?href="javascript:;"?id="prev"?class="arrow"><</a>
????<a?href="javascript:;"?id="next"?class="arrow">></a>
</div>
</body>
<script?src="__STATIC__/index/js/jquery.1.10.2.js"></script>
<script?type="text/javascript">
????//數據初始化加載
????window.onload?=?function?()?{
????????var?container?=?document.getElementById('container')//獲取容器
????????var?list?=?document.getElementById('list');
????????var?buttons?=?document.getElementById('buttons').getElementsByTagName('span');
????????var?prev?=?document.getElementById('prev');//左箭頭容器
????????var?next?=?document.getElementById('next');//右箭頭容器
????????var?index?=?1;
????????var?animated?=?false;?//動畫是否在運行變量
????????var?timer?;?//定時器變量
????????//小圓點切換
????????function?showButton()?{
????????????for(i=0;?i<buttons.length;?i++){
????????????????if(buttons[i].className?==?'on'){
????????????????????buttons[i].className?=?'';
????????????????????break;
????????????????}
????????????}
????????????buttons[index?-?1].className?=?'on';
????????}
????????//點擊箭頭向左切換圖片
????????function?animate(offset)?{
????????????animated?=?true;?//動畫在運行時為true；
????????????var?newLeft?=?parseInt(list.style.left)?+?offset;
????????????var?time?=?600;//位移總時間
????????????var?interval?=?10?;?//位移間隔10毫秒
????????????var?speed?=?offset/(time/interval);?//每次的位移量
????????????//圖片位移動畫效果
????????????function?go(){
????????????????if(?(speed?<?0?&&?parseInt(list.style.left)>?newLeft)?||(speed?>?0?&&?parseInt(list.style.left)<?newLeft)?){
????????????????????list.style.left?=??parseInt(list.style.left)?+?speed?+?'px';//把字符串轉成數字
????????????????????setTimeout(go,interval);//setTimeout:設置定時器（執(zhí)行一次）
????????????????}else{
????????????????????animated?=?false;?//動畫在運行時為false；
????????????????????list.style.left?=?newLeft?+?'px';
????????????????????if(newLeft?>?-600){
????????????????????????list.style.left?=?-3000?+?'px';
????????????????????}
????????????????????if(newLeft?<?-3000){
????????????????????????list.style.left?=?-600?+?'px';
????????????????????}
????????????????}
????????????}
????????????go();
????????}
????????//自動播放(原理：每隔1秒執(zhí)行點擊右箭頭操作)
????????function?play(){
????????????timer?=?setInterval(function?()?{?//setInterval:設置定時器（執(zhí)行多次）
????????????????next.onclick();
????????????},3000);
????????}
????????//鼠標移上去停止動畫
????????function?stop(){
????????????clearInterval(timer);//清除定時器
????????}
????????//點擊箭頭向右切換圖片
????????next.onclick?=?function?()?{
????????????if(index?==?5){
????????????????index?=?1;
????????????}else{
????????????????index?+=?1;
????????????}
????????????showButton();
????????????if(!animated){
????????????????animate(-600)?//把字符串轉成數字
????????????}
????????};
????????prev.onclick?=?function?()?{
????????????if(index?==?1){
????????????????index?=?5;
????????????}else{
????????????????index?-=?1;
????????????}
????????????showButton();
????????????if(!animated){
????????????????animate(600)?//把字符串轉成數字
????????????}
????????};
????????//點擊某個小圓點?切換到當前原點對應的圖片
????????for?(i=0;?i<buttons.length;?i++){
?????????????buttons[i].onclick?=?function?()?{
?????????????????if(this.className?==?'on'){
????????????????????return;
?????????????????}
?????????????????var?myIndex?=?this.getAttribute('index');//獲取span標簽的index值??getAttribute：獲取某個二級自定義屬性的值
?????????????????var?offset?=?-600?*?(myIndex?-?index);
?????????????????if(!animated){
?????????????????????animate(600)?//把字符串轉成數字
?????????????????}
?????????????????index?=?myIndex;
?????????????????showButton();
?????????????};
????????}
????????container.onmouseover?=?stop();//鼠標移進停止位移動畫
????????container.onmouseout?=?play();//鼠標移出恢復位移動畫
????????play();//初始化?自動播放狀態(tài)
????};
</script>
</html>
2019-08-11
自動播放時鼠標移進移出沒效果 ：
container.onmouseover?=?stop; ? ? ? ? container.onmouseout?=?play;