JavaScript实现轮播图特效
本文实例为大家分享了JavaScript实现轮播图特效的具体代码，供大家参考，具体内容如下
功能：
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 id='wrap'> <ul id='pic'> <li><img src='https://www.haobala.com/bcjs/images/dang1.jpg' alt=''></li> <li><img src='https://www.haobala.com/bcjs/images/dang2.jpg' alt=''></li> <li><img src='https://www.haobala.com/bcjs/images/dang3.jpg' alt=''></li> <li><img src='https://www.haobala.com/bcjs/images/dang4.jpg' alt=''></li> <li><img src='https://www.haobala.com/bcjs/images/dang5.jpg' alt=''></li> <li><img src='https://www.haobala.com/bcjs/images/dang6.jpg' alt=''></li> <li><img src='https://www.haobala.com/bcjs/images/dang7.jpg' alt=''></li> <li><img src='https://www.haobala.com/bcjs/images/dang8.jpg' alt=''></li> </ul> <div id='bar_left'></div> <div id='bar_right'></div> <ol id='list'> <li class='on'>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 class='tex'> <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>
效果图
精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. 详解Android跨进程通信之AIDL2. Python ini文件常用操作方法解析3. set rs=conn.execute,set rs=server.createobject(“ADODB.recordset”)的性能对比4. python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析5. 如何使用Mock修改Android设备上的features6. opencv-python的RGB与BGR互转方式7. 如何修改PHP的memory_limit限制8. python 基于PYMYSQL使用MYSQL数据库9. python tkinter GUI绘制,以及点击更新显示图片代码10. PHP设计模式（六）桥连模式Bridge实例详解【结构型】
网公网安备