                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /焦點圖輪播特效

請大神幫忙

只需要圖片自動播放和鼠標滑過/點擊按鈕時暫停 ?而不需要兩側箭頭可不可以？

實現代碼是什么樣的呢？

qq_你可以閉嘴了_04053243

2016-10-27

源自：焦點圖輪播特效 7-1

關注問題我要回答

776

操作

收起

1 回答

Joker_123 回答被采納 +3 積分
2016-10-27

<!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;}
????????
????</style>
????<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?index?=?1;
????????????var?len?=?5;
????????????var?animated?=?false;
????????????var?interval?=?3000;
????????????var?timer;


????????????function?animate?(offset)?{
????????????????if?(offset?==?0)?{
????????????????????return;
????????????????}
????????????????animated?=?true;
????????????????var?time?=?300;
????????????????var?inteval?=?10;
????????????????var?speed?=?offset/(time/inteval);
????????????????var?left?=?parseInt(list.style.left)?+?offset;

????????????????var?go?=?function?(){
????????????????????if?(?(speed?>?0?&&?parseInt(list.style.left)?<?left)?||?(speed?<?0?&&?parseInt(list.style.left)?>?left))?{
????????????????????????list.style.left?=?parseInt(list.style.left)?+?speed?+?'px';
????????????????????????setTimeout(go,?inteval);
????????????????????}
????????????????????else?{
????????????????????????list.style.left?=?left?+?'px';
????????????????????????if(left>-200){
????????????????????????????list.style.left?=?-600?*?len?+?'px';
????????????????????????}
????????????????????????if(left<(-600?*?len))?{
????????????????????????????list.style.left?=?'-600px';
????????????????????????}
????????????????????????animated?=?false;
????????????????????}
????????????????}
????????????????go();
????????????}

????????????function?showButton()?{
????????????????for?(var?i?=?0;?i?<?buttons.length?;?i++)?{
????????????????????if(?buttons[i].className?==?'on'){
????????????????????????buttons[i].className?=?'';
????????????????????????break;
????????????????????}
????????????????}
????????????????buttons[index?-?1].className?=?'on';
????????????}

????????????function?play()?{
????????????????timer?=?setTimeout(function?()?{
????????????????????next();
????????????????????play();
????????????????},?interval);
????????????}
????????????function?stop()?{
????????????????clearTimeout(timer);
????????????}

?????????????function?next()?{
????????????????if?(animated)?{
????????????????????return;
????????????????}
????????????????if?(index?==?5)?{
????????????????????index?=?1;
????????????????}
????????????????else?{
????????????????????index?+=?1;
????????????????}
????????????????animate(-600);
????????????????showButton();
????????????}
????????????/*prev.onclick?=?function?()?{
????????????????if?(animated)?{
????????????????????return;
????????????????}
????????????????if?(index?==?1)?{
????????????????????index?=?5;
????????????????}
????????????????else?{
????????????????????index?-=?1;
????????????????}
????????????????animate(600);
????????????????showButton();
????????????}*/

????????????for?(var?i?=?0;?i?<?buttons.length;?i++)?{
????????????????buttons[i].onclick?=?function?()?{
????????????????????if?(animated)?{
????????????????????????return;
????????????????????}
????????????????????if(this.className?==?'on')?{
????????????????????????return;
????????????????????}
????????????????????var?myIndex?=?parseInt(this.getAttribute('index'));
????????????????????var?offset?=?-600?*?(myIndex?-?index);

????????????????????animate(offset);
????????????????????index?=?myIndex;
????????????????????showButton();
????????????????}
????????????}

????????????container.onmouseover?=?stop;
????????????container.onmouseout?=?play;
			container.onclick=stop;
????????????play();

????????}
????</script>
</head>
<body>

<div?id="container">
????<div?id="list"?style="left:?-600px;">
????????<img?src="img/5.jpg"?alt="1"/>
????????<img?src="img/1.jpg"?alt="1"/>
????????<img?src="img/2.jpg"?alt="2"/>
????????<img?src="img/3.jpg"?alt="3"/>
????????<img?src="img/4.jpg"?alt="4"/>
????????<img?src="img/5.jpg"?alt="5"/>
????????<img?src="img/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>
????
</div>

</body>
</html>