JS轮播图实现简单代码


Posted in Javascript onFebruary 19, 2021

本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下

思路:

1、首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片
2、Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化。
3、图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示
4、当鼠标滑动到图片上时,清除定时器,图片停止轮播,当鼠标移出时继续进行轮播
5、图片上有一组小圆点用于与当前显示的图片相对应,同时可以通过点击的方式查看对应的图片
6、图片可以通过点击进行左右滑动显示

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>轮播图</title>
 <style type="text/css">
 .container{
 margin:0 auto;
 width:600px;
 height:400px;
 position: relative;
 overflow: hidden;
 border:4px solid gray;
 box-shadow: 3px 3px 5px gray;
 border-radius:10px;
 }
 .list{
 width:4200px;
 height:400px;
 position: absolute;
 top:0px;
 }
 img{
 float:left;
 width:600px;
 height:400px;
 }
 .dots{
 position: absolute;
 left:40%;
 bottom:30px;
 list-style: none;
 }
 .dots li{
 float:left;
 width:8px;
 height:8px;
 border-radius: 50%;
 background: gray;
 margin-left:5px
 }
 .dots .active{
 background: white;
 }
 .pre,.next{
 position: absolute;
 top:40%;
 font-size:40px;
 color:white;
 text-align:center;
 background: rgba(128,128,128,0.5);
 /* display:none;*/
 }
 .pre{
 left:30px;
 }
 .next{
 right:30px;
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="list" style=" left:-600px;">
 <img src="img/5.jpg">
 <img src="img/1.jpg">
 <img src="img/2.jpg">
 <img src="img/3.jpg">
 <img src="img/4.jpg">
 <img src="img/5.jpg">
 <img src="img/1.jpg">
 </div>
 <ul class="dots">
 <li index=1 class="active dot"></li>
 <li index=2 class="dot"></li>
 <li index=3 class="dot"></li>
 <li index=4 class="dot"></li>
 <li index=5 class="dot"></li>
 </ul>
 <div class="pre"><</div>
 <div class="next">></div>
 </div>
<script type="text/javascript">
 var index=1,timer;
 function init(){
 eventBind();
 autoPlay();
 }
 init();
 function autoPlay(){
 timer =setInterval(function () {
 animation(-600);
 dotIndex(true);
 },1000)
 }
 function stopAutoPlay() {
 clearInterval(timer);
 }
 function dotIndex(add){
 if(add){
 index++;
 }
 else{
 index--;
 }
 if(index>5){
 index = 1;
 }
 if(index<1){
 index = 5;
 }
 dotActive();
 }
 function dotActive() {
 var dots = document.getElementsByClassName("dot");
 var len = dots.length;
 for(var i=0 ;i<len ;i++){
 dots[i].className = "dot";
 }

 for(var i=0;i<len;i++){
 /*此处可以不用parseInt,当不用全等时*/
 if(index === parseInt(dots[i].getAttribute("index"))){
 dots[i].className = "dot active";
 }
 }
 }
 function eventBind(){
 /*点的点击事件*/
 var dots = document.getElementsByClassName("dot");
 var len = dots.length;
 for(var i=0;i<len;i++){
 (function(j){
 dots[j].onclick = function(e){
 var ind = parseInt(dots[j].getAttribute("index"));
 animation((index - ind)*(-600));/*显示点击的图片*/
 index = ind;
 dotActive();
 }
 })(i)
 }
 /*容器的hover事件*/
 var con = document.getElementsByClassName("container")[0];
 /*鼠标移动到容器上时,停止制动滑动,离开时继续滚动*/
 con.onmouseover = function (e) {
 stopAutoPlay();
 }
 con.onmouseout =function(e){
 autoPlay();
 }
 /*箭头事件的绑定*/
 var pre = document.getElementsByClassName("pre")[0];
 var next = document.getElementsByClassName("next")[0];
 pre.onclick = function (e) {
 dotIndex(false);
 animation(600);
 }
 next.onclick = function (e) {
 dotIndex(true);
 animation(-600);
 }
 }
 function animation(offset){
 var lists = document.getElementsByClassName("list")[0];
 var left = parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset;
 if(left<-3000){
 lists.style.left = "-600px";
 }
 else if(left>-600){
 lists.style.left = "-3000px";
 }
 else{
 lists.style.left = left+"px";
 }
 }

</script>
</body>
</html>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 #Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 #Javascript
最基础的vue.js双向绑定操作
Aug 23 #Javascript
vue组件实现文字居中对齐的方法
Aug 23 #Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 #Javascript
深入理解React中何时使用箭头函数
Aug 23 #Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 #jQuery
You might like
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
express.js中间件说明详解
2019/03/19 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
python中base64加密解密方法实例分析
2015/05/16 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
python读取指定字节长度的文本方法
2019/08/27 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
《狼》教学反思
2014/03/02 职场文书
消防安全责任书
2014/04/14 职场文书
小学家长意见怎么写
2015/06/03 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python