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="data:images/dang1.jpg" alt=""></li><li><img src="data:images/dang2.jpg" alt=""></li><li><img src="data:images/dang3.jpg" alt=""></li><li><img src="data:images/dang4.jpg" alt=""></li><li><img src="data:images/dang5.jpg" alt=""></li><li><img src="data:images/dang6.jpg" alt=""></li><li><img src="data:images/dang7.jpg" alt=""></li><li><img src="data: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.onmouseover=function(){//鼠标放到图片上时图片停止播放pics.style.cursor="pointer";clearInterval(counter);//清除计时器}pics.onmouseout=change;}//鼠标放到指定序号切换到指定图片for (var i=0;i<lists.length;i++){lists[i].id=i;lists[i].onmouseover=function(){img(this.id);this.className='on';}}//当鼠标放在箭头上时，点击箭头切换到下一张图片point_l.onmousedown=function(){//点击左边箭头if(index<=0){index=lists.length;}img(index-1);}point_r.onmousedown=function(){//点击右边箭头if (index>=lists.length-1){index=-1;}img(index+1);}</script>
</body></html>

效果图

JavaScript实现轮播图相关推荐

html 轮播图自适应,JavaScript 自适应轮播图
JavaScript 自适应轮播图代码话不多说,先上代码,方便复制粘贴.演示轮播图 *{ margin: 0; padding: 0; } ul{ list-style: none; } img ...
HTML+CSS+JavaScript实现轮播图效果
前言先奉上本文需要的所有资源,免费下载,代码有详细注释,可搭配本文使用: 前端JavaScript实现轮播图效果百度网盘:百度网盘请输入提取码提取码:slbt 没有添加动画效果,添加了自动切换 ...
JavaScript模拟轮播图效果
轮播图相信小伙伴们应该不会陌生吧~ 就是网站中间的那个会定时切换的商品图今天咱们就来模拟一个轮播图~当然效果不是那么美观小伙伴们不要嫌弃哈~ 那么咱们开动了,额~先准备好几章轮播图片(直接在网上 ...
JavaScript图片轮播图
轮播图四张图片每隔2秒换下一张四张图片每隔2秒换下一张 <!DOCTYPE html> <html lang="en"> <head>< ...
教你用JavaScript制作轮播图
案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个轮播图.图片每3秒自动轮换,也可以点击左右按键轮播图片,当图片到达最左端或最右端时 ...
JavaScript——网页轮播图（实现点击小圆点、图片滑动、小圆点样式改变）
一.轮播图要实现的效果: 实现点击小圆点.图片滑动.小圆点样式改变二.轮播图实现效果步骤: 1.利用html+css完成轮播图片,底部小点的整体效果的布局. 2.通过原生js完成图片轮播,无缝自动切 ...
JavaScript之轮播图制作
目录 1.轮播布局 2.JS动态效果 (1)根据图片个数得到图片列表区域的宽度 (2)根据图片个数创建相应的圆点并为每个圆点绑定自定义属性 (3)通过事件委托给圆点切换区域绑定点击事件,根据圆点的自定 ...
纯HTML与JavaScript实现轮播图
一.效果轮播图代码实现 1.HTML部分 <div class="box" id="box"><div class="inner ...
前端：HTML+CSS+JavaScript实现轮播图
1. 最简单的轮播图效果如下: 这个实现非常简单,就是使用相对定位和绝对定位,将这三张图片压在一块.然后搞一个定时器,当到下一张图片的时候,把当前这张图片相应的标签上设置它的属性display,把它 ...

JavaScript实现轮播图

JavaScript实现轮播图相关推荐

最新文章

热门文章