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 相关文章推荐
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
js简单实现交换Li的值
May 22 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
原生JS进行前后端同构
Apr 22 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 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 Ubb代码编辑器函数代码
2012/07/05 PHP
php日历制作代码分享
2014/01/20 PHP
window.open不被拦截的实现代码
2012/08/22 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
Python对象体系深入分析
2014/10/28 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
简单的命令查看安装的python版本号
2020/08/28 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
软件设计的目标是什么
2016/12/04 面试题
实体的生命周期
2013/08/31 面试题
同事打架检讨书
2014/02/04 职场文书
企业员工培训感言
2014/02/26 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
庆七一活动简报
2015/07/20 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书