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 相关文章推荐
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
jquery实现聊天机器人
Feb 08 jQuery
vue 解决IOS10低版本白屏的问题
Nov 17 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
PHP 高手之路(二)
2006/10/09 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
JQUERY获取form表单值的代码
2010/07/17 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
python计算auc指标实例
2017/07/13 Python
python ansible服务及剧本编写
2017/12/29 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
聊聊python中的异常嵌套
2020/09/01 Python
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
珍惜时间演讲稿
2014/05/14 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
pt-archiver 主键自增
2022/04/26 MySQL