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 检测浏览器类型和版本的代码
Sep 15 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
微信小程序实现点击效果
Jun 21 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
详解Vue 单文件组件的三种写法
Feb 19 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中SESSION过期设置
2021/03/09 PHP
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
JS实现放大镜效果
2020/09/21 Javascript
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
实例详解Python模块decimal
2019/06/26 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
django 实现简单的插入视频
2020/04/07 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
python中pop()函数的语法与实例
2020/12/01 Python
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
集中整治工作方案
2014/05/01 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
深入理解redis中multi与pipeline
2021/06/02 Redis
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL