原生JS实现手动轮播图效果实例代码
2019/6/26 23:20:59
本文主要是介绍原生JS实现手动轮播图效果实例代码,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等。。。
轮播图主要用于展现图片,新出商品,词条,又能美观网页。給网页中增加动态效果。
手动轮播,是小编认为最简单的一种轮播方式,既能左右翻页,还能通过悬浮按钮,快速预览图片,所以今天就给大家写一个原生js手动轮播图。
一,利用JavaScript制作手动轮播图,首先排版。
引入默认样式表(可以手写);
<link rel="stylesheet" href="css/Default style sheet.css" rel="external nofollow" rel="external nofollow" />//本博客有css默认样式表可以下载。
div排版布局:
<body> <div id="box"> <div id="lunbo"><img src="img/1.jpg" id="img"/></div> <div id="left"><</div> <div id="right">></div> <div id="radiu"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </body>
二,定义div的CSS样式,给div设置宽高,定位。
<style> body{ background: darkturquoise; } #box{ height:320px; width:480px; margin: 3px auto; border: 2px solid red; } #lunbo{ height: 292px; width:453px; border: 1px solid yellow; margin: 0px auto; position: relative; } #left{ height: 60px; width: 60px; font-size: 60px; text-align: center; line-height: 60px; position: absolute; top:150px; left: 440px; color: black; } #right{ height: 60px; width: 60px; font-size: 60px; text-align: center; line-height: 60px; position: absolute; top:150px; left: 880px; color: black; } #radiu{ height: 30px; width: 240px; text-align: center; margin: 0px auto; } #radiu li{ float: left; background: white; height: 30px; width: 30px; line-height: 30px; border-radius:50% ; margin-right:6px; } .active{ background: orange; color: ; } </style> 原生js代码: <script> window.onload=function(){ var ridiu=document.getElementById("radiu") var right=document.getElementById("right"); var left=document.getElementById("left") var img=document.getElementById("img"); var oli=ridiu.getElementsByTagName("li") var arry=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'] var a=null; right.onclick=function(){ a++ if(a>arry.length-1){ a=0; } img.src=arry[a] } left.onclick=function(){ a-- if(a<0){ a=arry.length-1; } img.src=arry[a] } for (var i=0;i<oli.length;i++) { oli[i].onclick=function(){ a++ if(a==arry.length){ a=0; } img.src=arry[a]; } } } </script>
HTML全部效果代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手动轮播图</title> <link rel="stylesheet" href="css/Default style sheet.css" rel="external nofollow" rel="external nofollow" /> <style> body{ background: darkturquoise; } #box{ height:320px; width:480px; margin: 3px auto; border: 2px solid red; } #lunbo{ height: 292px; width:453px; border: 1px solid yellow; margin: 0px auto; position: relative; } #left{ height: 60px; width: 60px; font-size: 60px; text-align: center; line-height: 60px; position: absolute; top:150px; left: 440px; color: black; } #right{ height: 60px; width: 60px; font-size: 60px; text-align: center; line-height: 60px; position: absolute; top:150px; left: 880px; color: black; } #radiu{ height: 30px; width: 240px; text-align: center; margin: 0px auto; } #radiu li{ float: left; background: white; height: 30px; width: 30px; line-height: 30px; border-radius:50% ; margin-right:6px; } .active{ background: orange; color: ; } </style> <script> window.onload=function(){ var ridiu=document.getElementById("radiu") var right=document.getElementById("right"); var left=document.getElementById("left") var img=document.getElementById("img"); var oli=ridiu.getElementsByTagName("li") var arry=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'] var a=null; right.onclick=function(){ a++ if(a>arry.length-1){ a=0; } img.src=arry[a] } left.onclick=function(){ a-- if(a<0){ a=arry.length-1; } img.src=arry[a] } for (var i=0;i<oli.length;i++) { oli[i].onclick=function(){ a++ if(a==arry.length){ a=0; } img.src=arry[a]; } } } </script> </head> <body> <div id="box"> <div id="lunbo"><img src="img/1.jpg" id="img"/></div> <div id="left"><</div> <div id="right">></div> <div id="radiu"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </body> </html>
效果图:
body{ background: darkturquoise; } #box{ height:320px; width:480px; margin: 3px auto; border: 2px solid red; } #lunbo{ height: 292px; width:453px; border: 1px solid yellow; margin: 0px auto; position: relative; } #left{ height: 60px; width: 60px; font-size: 60px; text-align: center; line-height: 60px; position: absolute; top:150px; left: 440px; color: black; } #right{ height: 60px; width: 60px; font-size: 60px; text-align: center; line-height: 60px; position: absolute; top:150px; left: 880px; color: black; } #radiu{ height: 30px; width: 240px; text-align: center; margin: 0px auto; } #radiu li{ float: left; background: white; height: 30px; width: 30px; line-height: 30px; border-radius:50% ; margin-right:6px; } .active{ background: orange; color: ; }
这篇关于原生JS实现手动轮播图效果实例代码的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist