1.轮播图效果图

2.完整代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
*{margin:0;padding:0;
}
/*设置外部div*/
#outer
{width:447px;height:240px;margin:50px auto;/*居中*/background-color:#0FF;/*设置背景颜色*/padding:10px 0;position:relative;/*父元素div开启相对定位*/overflow:hidden;/*裁剪溢出内容*/
}
/*设置ul*/
#imgList
{list-style:none;/*去除项目符合*/position:absolute;/*给ul开启绝对定位*/left:0px;/*设置偏移量,每向左移动447px就会显示下一张图片*/
}
/*设置图片中的li*/
#imgList li
{float:left;/*设置浮动*/margin:0 10px;/*设置左右外边距*/}
/*设置导航按钮*/
#navdiv
{position:absolute;/*开启绝对定位*/bottom:15px;/*设置位置*/
}
#navdiv a
{float:left;/*设置超链接浮动*/width:15px;height:15px;background-color:#F00;/*设置背景颜色*/margin:0 5px;/*设置左右外边距*/opacity:0.5;/*设置半透明*//*兼容IE8透明的写法为,filter:alpha(opacity=50)*/
}
/*设置鼠标移入的效果*/
#navdiv a:hover
{background-color:#000;
}
</style>
<script type="text/javascript" src="myjs/dh.js"></script>
<script type="text/javascript">
window.function()
{//获取ulvar imgList=document.getElementById("imgList");//获取页面中所有的图片(即获取img标签)var imgarr=document.getElementsByTagName("img");//设置imgList的宽度imgList.style.width=447*imgarr.length+"px";//设置导航按钮居中//第一步获取导航divvar navdiv=document.getElementById("navdiv");var outer=document.getElementById("outer");//第二步设置left值,left=(outer的宽度-navdiv的宽度)/2navdiv.style.left=(outer.offsetWidth-navdiv.offsetWidth)/2+"px";//默认显示图片的的索引var index=0;//获取所有的avar alla=document.getElementsByTagName("a");//设置默认选中的效果alla[index].style.backgroundColor="#000";//点击超链接切换到指定图片,点击第一个超链接显示第一张图片,点击第二个超链接显示第二张图片//为所有超链接都绑定单击响应事件for(var i=0;i<alla.length;i++){//为每一个超链接添加一个num属性alla[i].num=i;alla[i].onclick=function(){//关闭定时器clearInterval(timer);//获取点击超链接的索引,并将其设置为indexindex=this.num;//切换图片,第一张索引为0,left为0,第二张索引为1,left为-447,第三张索引为2,left为-894//imgList.style.left=-447*index+"px";//设置选中asetA();//使用move函数来切换图片move(imgList,"left",-447*index,20,function(){//动画结束,开启自动切换autoChange();});};}//自动切换图片autoChange();//创建一个方法用来设置选中的afunction setA(){//判断当前索引是否是最后一张图片if(index>=imgarr.length-1){//则将index设置为0index=0;//此时显示的是最后一张图片,而最后一张图片和第一张是一样的通过CSS将最后一张切换成第一张imgList.style.left=0;}//遍历所有的a并将所有的背景颜色都设置为红色for(var i=0;i<alla.length;i++){alla[i].style.backgroundColor="";}//将选中的a设置为黑色alla[index].style.backgroundColor="#000";};var timer;//创建一个函数,用来开启自动切换图片function autoChange(){//开启一个定时器用来定时切换图片timer=setInterval(function(){//使索引自增index++;index=index%imgarr.length;//执行动画,切换图片move(imgList,"left",-447*index,20,function(){//修改导航按钮setA();});},3000);}
};
</script>
</head>
<body>
<!--创建一个外部的div,来作为大的容器-->
<div id="outer">
<!--创建一个ul,用于放置图片-->
<ul id="imgList">
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/6.jpg"></li>
<li><img src="img/2.jpg"></li>
</ul>
<!--创建导航按钮-->
<div id="navdiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>

3.附上引用js部分代码(dh.js)

// JavaScript Document
//创建一个可以执行简单动画的函数
//参数1:要执行动画的对象(obj);参数2:要执行动画的样式,可以是left,right,top等(attr);参数3:执行动画的目标位置(target);参数4:表示移动的速度正数向右移动,负数向左移动(speed);参数5:回调函数(callback),这个函数将会在动画执行完毕以后执行
function move(obj,attr,target,speed,callback)
{//在开启一个定时器之前,先关闭上一个元素的定时器clearInterval(obj.timer);//获取元素目前的位置var current=parseInt(getStyle(obj,attr));//判断速度的正负//如果从0向800移动,则speed为正,如果从800向0移动,则speed为负if(current>target){speed=-speed;}//开启一个定时器来实现动画效果//向执行动画的对象中添加一个timer属性值,用来保存它自己的定时器标识obj.timer=setInterval(function(){//获取div的原来的值var oldvalue=parseInt(getStyle(obj,attr));//在旧值的基础上增加var newvalue=oldvalue+speed;//判读newvalue是否大于800if(speed<0 && newvalue<target || speed>0 && newvalue>target){newvalue=target;}//将新值赋给boxobj.style[attr]=newvalue+"px";//当元素移动到800px时,则停止执行动画if(newvalue==target){//达到目标关闭定时器clearInterval(obj.timer);//动画执行完毕,调用回调函数callback && callback();}},30);
}
//定义一个函数用来获取指定元素的当前样式,参数,obj代表需获取样式的元素,name代表需获取的样式名
function getStyle(obj,name)
{if(window.getComputedStyle){//正常浏览器有getComputedStyle()方法return getComputedStyle(obj,null)[name];}else{//IE8的浏览器没有getComputedStyle()方法return obj.currentStyle[name];}
}

4.图片素材
2.jpg

3.jpg

4.jpg

5.jpg

6.jpg

JS实现轮播图(手动切换+自动切换两种方法)相关推荐

  1. jquery,js实现手机端全屏轮播图手动滑动+自动切换(autoplay)

    jquery,js实现手机端全屏轮播图 使用了swiper插件,可手动滑动切换也可自动切换 效果图 css代码 只是作为参考,可以根据你自己的需求去改,这里我用的是上下两张背景图,图自行修改 html ...

  2. swiper 定义放多少张图片,小程序swiper轮播图,自定义样式,两种方法:原生方法和bindchange方法;将点点改为数字(当前第几张 /总共几张);点击点点跳转当前图片...

    一.点点部分 1.1.通过原生方法 (1)wxml文件 (2)wxss /* 轮播图部分 */ .swiperBar { width: 690rpx; height: 337rpx; margin: ...

  3. 【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放+手动播放

    轮播图已经成了页面开发中不可缺少的一部分,日常生活中随处都能见到轮播图的身影,例如平常我们购物的淘宝,京东等等,都靠着轮播图在一片 有限的区域内展现出更多的商品.这也是前端程序员最早接触到的练手小项目 ...

  4. 图片轮播的实现(详解两种方法)

    今天带来的是前端里图片轮播的实现,可以说,这两种方法都很简单,尤其第一种,只要是有点基础的应该都可以看懂,这也是小编花费了一定时间想到的代码较少的方式.(图片我放在文末了) 当然也有更复杂的图片,也会 ...

  5. js实现轮播图(点击小图片切换大图片+自动切换)

    js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...

  6. JS实现轮播图(自动+手动)

    网页轮播图效果: 核心原理: tips:代码在文章末尾 这个ul就是我们这四张图片的父盒子,我们通过对这个父盒子添加动画函数来实现移动,然后给父盒子来一个溢出隐藏就达到了轮播的效果 动画函数如下: f ...

  7. 关于element-ui中轮播图手动切换轮播图片

    文章目录 前言 一.关于element-ui中轮播图手动切换轮播图片 二.解决方案 1.查看element-ui中Carousel 走马灯组件的方法 2.解决方法 结尾 前言 在开发过程中发现项目中轮 ...

  8. 原生JS无缝轮播图(左右切换、导航跟随)

    原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...

  9. JS实现轮播图点击切换、按钮切换功能

    JS实现轮播图点击切换.按钮切换功能 前言 轮播图案例 总结 前言 轮播图的案例非常经典,写法也非常多,我在写一个自己用的比较多的写法,帮助大家理解,在网页的设计中,可以直接拿去用(记得换图片路径哦! ...

  10. 原生js实现轮播图实例教程

    原生js实现轮播图实例教程 本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...

最新文章

  1. ASP的DES加密解密
  2. 专访阿里云MVP王俊杰:开发者的超能力是用技术让世界更美好
  3. java代码编写的文本特征提取_Test1 java语言写的特征提取源代码,有搞文字识别的可以下载一看,简单易学 Develop 274万源代码下载- www.pudn.com...
  4. 基于小程序·云开发构建高考查分小程序丨实战
  5. 内存分析工具 MAT 的使用
  6. A+B for Input-Output Practice (I)
  7. Leetcode461Hamming Distance汉明距离
  8. sftp本地上传和远程下载
  9. ArcGIS获取点图层对应栅格图层的栅格行列号(或属性值)
  10. 用html数据库搭建信息管理系统,数据库的建立和系统模块功能的实现.doc
  11. PostgreSQL11 | pgadmin4基本使用
  12. IMU(LPMS-B2) ROS下使用教程
  13. MySQL生成自增的流水号
  14. JS怎么处理有些网页禁止选中复制方法过程详解
  15. 如何进行强制类型转换?
  16. 后乔布斯时代:三星微软谷歌3大劲敌环伺苹果
  17. 优朋otv显示服务器接口异常,睿因路由器产品常见问题及解答汇总
  18. Parity check(奇偶校验)
  19. Access Token获取
  20. 字典学习以及稀疏表示的概要

热门文章

  1. android studio真机测试不生成apk,Android应用开发Android Studio编译出来的APK无法安装如何解决?...
  2. 火绒剑 HRSword 5.0.1.1
  3. 金融业务的数据存储选型
  4. 赛普拉斯代理4Mbit串行SPI铁电存储器CY15B104Q-LHXI
  5. WinCE系统时间年份不准的问题(记录)
  6. python高手之路python处理excel文件
  7. Docer可视化管理工具Portainer部署
  8. 2021年12月中国商品出口总额排行榜:中国贸易顺差944.6亿美元,对中国台湾贸易逆差最大(附月榜TOP100详单)
  9. 【详解+安装失败解决】Win11系统装CH340驱动方法
  10. NodeJS 获取酷狗音乐