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 相关文章推荐
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
js星星评分效果
Jul 24 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 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 Static关键字实用方法
2010/06/04 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
javascript History对象原理解析
2020/02/17 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
优秀班集体先进事迹材料
2014/05/28 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
寒假安全保证书
2015/02/28 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
关于运动会的广播稿
2015/08/19 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python