1、图片会自动播放，鼠标放上面会暂停播放
2、点击左右出现的箭头可以切换到上一张/下一张图片
3、点击序号会跳转到对应图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>当当网首页轮播图-By小黑</title> <style> *{ padding: 0; margin: 0; list-style: none; } #wrap{ margin: 50px auto; width: 800px; height: 330px; overflow: hidden; position: relative; } #list{ position: absolute; bottom: 15px; right: 250px; } #list li{ float: left; margin-right: 15px; cursor: pointer; width: 23px; height: 23px; line-height: 23px; text-align: center; background: #ADA79D; color: #FFF ; border-radius: 50%; } #list .on{ background: red; } #bar_left,#bar_right{ width: 33px; height: 80px; line-height: 80px; position: absolute; top: 130px; background: rgba(0, 0, 0, 0.3); } #bar_left{ left: -33px; } #bar_right{ right: -35px; } /*下面利用伪元素实现左侧和右侧的小箭头*/ #bar_left:after,#bar_left:before,#bar_right:before,#bar_right:after{ content: ""; border-top: 15px solid transparent; border-bottom: 15px solid transparent; position: absolute; top: 25px; } /*左边箭头*/ #bar_left:before{ border-left: 15px solid transparent; border-right: 15px solid #FFF; right: 10px; } #bar_left:after{ border-left: 15px solid transparent; border-right: 15px solid rgba(0, 0, 0, 0.3); right: 7px; } /*右边箭头*/ #bar_right:before{ border-right: 15px solid transparent; border-left: 15px solid #FFF; left: 10px; } #bar_right:after{ border-right: 15px solid transparent; border-left: 15px solid rgba(0, 0, 0, 0.3); left: 7px; } #wrap:hover #bar_left{ left: 0; cursor: pointer; transition: left 0.5s; } #wrap:hover #bar_right{ /* display: block; */ right: 5px; cursor: pointer; transition: right 0.5s; } .tex{ margin: 20px auto; width: 400px; } .tex ul li{ list-style-type:circle; color: red; font-weight: bold; margin-bottom: 5px; } </style> </head> <body> <div> <ul> <li><img src="https://www.jb51.net/images/dang1.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/dang2.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/dang3.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/dang4.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/dang5.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/dang6.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/dang7.jpg" alt=""></li> <li><img src="https://www.jb51.net/images/dang8.jpg" alt=""></li> </ul> <div></div> <div></div> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ol> </div> <div> <ul> <li>功能如下：</li> <li>图片会自动播放，鼠标放上面会暂停播放</li> <li>点击左右出现的箭头可以切换到上一张/下一张图片</li> <li>点击序号会跳转到对应图片</li> </ul> </div> <script> var wrap=document.getElementById('wrap'); var pics=document.getElementById('pic'); var lists=document.getElementById('list').getElementsByTagName('li'); var point_l=document.getElementById('bar_left'); var point_r=document.getElementById('bar_right'); var index=0; var counter=null; function change(){//计时器 counter=setInterval(function(){ index++; if(index===lists.length){ index=0; } img(index); },2000) } change(); function img(curIndex){//切换图片 for (var i=0;i<lists.length;i++){ if(curIndex===i){ lists[i].className='on'; } else{ lists[i].className=''; } } index=curIndex; pics.style.marginTop=-330*curIndex+'px';//图片上移 wrap.οnmοuseοver=function(){//鼠标放到图片上时图片停止播放 pics.style.cursor="pointer"; clearInterval(counter);//清除计时器 } pics.οnmοuseοut=change; } //鼠标放到指定序号切换到指定图片 for (var i=0;i<lists.length;i++){ lists[i].id=i; lists[i].οnmοuseοver=function(){ img(this.id); this.className='on'; } } //当鼠标放在箭头上时，点击箭头切换到下一张图片 point_l.οnmοusedοwn=function(){//点击左边箭头 if(index<=0){ index=lists.length; } img(index-1); } point_r.οnmοusedοwn=function(){//点击右边箭头 if (index>=lists.length-1){ index=-1; } img(index+1); } </script> </body> </html>
效果图
精彩专题分享：