Javascript实现图片轮播效果。
用js做一个简单的图片轮播效果。
思路如下:用JavaScript来控制轮播的图片的样式(margin-left)。用计时器来控制图片的自动播放。鼠标点击控制图片的翻页。
效果图如下。具有以下功能:1.自动图片轮播 2.左右切换图片 3.底下小按钮切换图片。
话不多说,代码如下。
首先肯定是HTML代码`这个没什么说的,先插入需要轮播的图片。底下切换图片的按钮,还有左右按键。
<div class="block"><div class="box_big "><div class="box"><img src="img/7.jpg" alt=""/></div><div class="box"><img src="img/5.jpg" alt=""/></div><div class="box"><img src="img/6.jpg" alt=""/></div><div class="box"><img src="img/8.jpg" alt=""/></div><div class="box"><img src="img/9.jpg" alt=""/></div><div class="box"><img src="img/7.jpg" alt=""/></div></div><div class="spot"><div class="spot_list">1</div><div class="spot_list">2</div><div class="spot_list">3</div><div class="spot_list">4</div><div class="spot_list">5</div></div><div class="btn"><div class="left_btn"><span> < </span></div><div class="right_btn"><span> > </span></div></div>
</div>
然后是给代码添加样式。添加好后基本样式就已经完成了。让图片横排列。超出父容器部分隐藏。记得给图片的margin-left添加过渡效果(如图)接下来就是让他动起来!!!
<style>* {margin: 0;padding: 0;}.block {width: 700px;height: 400px;border: 1px solid black;margin: 100px auto;position: relative;overflow: hidden;box-sizing: border-box;}.box_big {position: absolute;width: 4200px;height: 400px;}.nav {transition: margin-left 0.5s linear;}.box {width: 700px;height: 400px;float: left;}img {width: 100%;height: 100%;}.spot {position: absolute;width: 100%;text-align: right;bottom: 5px;}.spot_list {width: 30px;height: 30px;font-size: 20px;text-align: center;border: 1px solid gray;border-radius: 5px;line-height: 30px;font-weight: bolder;margin: 10px;display: inline-block;background: rgba(255, 255, 255, 0.3);}.btn {width: 100%;height: 80px;position: absolute;margin: 0 auto;top: 160px;}.left_btn, .right_btn {width: 30px;height: 80px;z-index: 15;background: rgba(255, 255, 255, 0.3);text-align: center;line-height: 80px;border-radius: 8px;}.left_btn {float: left;}.right_btn {float: right;}</style>
这块是最重要的的部分,js代码
思路如下,先获取元素,让图片切换下一张,这里我使用count++*元素的marginLeft值。count加一次图片就会切换下一张。然后把这段代码放在计时器中,图片就可以自动切换下一张了。切换的时候底下的小图标的背景色也跟着切换。
ipt>var box = document.getElementsByClassName("box_big")[0];var spot = document.getElementsByClassName("spot_list");var block = document.getElementsByClassName("block")[0];var left_btn = document.getElementsByClassName("left_btn")[0];var right_btn = document.getElementsByClassName("right_btn")[0];var time = null;var count = 0;
//计时器function showtime() {time = setInterval(function () {mate();}, 1000);}//正常滚动function mate() {box.className = "box_big nav";spot[count].style.background = "rgba(255, 255, 255, 0.3)";count++;spot[count > box.children.length - 2 ? 0 : count].style.background = "rgba(91,91,91,0.8)";box.style.marginLeft = (count * -700) + "px";//添加一次性计时器setTimeout(function () {//判断count的值。如果大于图片长度,就重0开始+if (count > box.children.length - 2) {count = 0;box.className = "box_big";box.style.marginLeft = "0px"}}, 500)}
然后设置鼠标进入计时器关闭,鼠标离开计时器打开。
block.onmouseenter = function () {clearInterval(time);};//鼠标出来计时器打开block.onmouseleave = function () {showtime();};
接下来,来做底下鼠标放在地下图标的时候切换对应的图片。这里我用的是for循环。
for (var i = 0; i < spot.length; i++) {spot[i].index = i;spot[i].onmouseenter = function () {spot[count].style.background = "rgba(255, 255, 255, 0.3)";this.style.background = "rgba(91,91,91,0.8)";count = this.index;box.style.marginLeft = (count * -700) + "px";}}
上面大部分功能已经完成,现在剩下最后一步,左右键切换图片的上一张和下一张。用鼠标点击事件。左边很简单,直接执行开始时候的方法即可(切换方向和自动切换方向相同)。右边用count–
//图片左边划left_btn.onclick = function () {mate();};//图片右边划right_btn.onclick = function () {spot[count].style.backgroundColor = "rgba(255,255,255,0.3)";count--;if (count < 0) {box.className = "box_big";count = box.children.length - 2;box.style.marginLeft = "-3500px";}//添加一次性计时器setTimeout(function () {box.className = "box_big nav";box.style.marginLeft = (-700 * count) + "px";spot[count].style.backgroundColor = "rgba(91,91,91,0.8)";}, 1);};
到这里就已经写完了。
完整js代码如下:
<script>
//首先获取元素,这里获取了所有需要的元素。var box = document.getElementsByClassName("box_big")[0];var spot = document.getElementsByClassName("spot_list");var block = document.getElementsByClassName("block")[0];var left_btn = document.getElementsByClassName("left_btn")[0];var right_btn = document.getElementsByClassName("right_btn")[0];var time = null;spot[0].style.background = "rgba(91,91,91,0.8)";var count = 0;showtime();//鼠标进入计时器停止block.onmouseenter = function () {clearInterval(time);};//鼠标出来计时器打开block.onmouseleave = function () {showtime();};//点的事件for (var i = 0; i < spot.length; i++) {spot[i].index = i;spot[i].onmouseenter = function () {spot[count].style.background = "rgba(255, 255, 255, 0.3)";this.style.background = "rgba(91,91,91,0.8)";count = this.index;box.style.marginLeft = (count * -700) + "px";}}//图片左边划left_btn.onclick = function () {mate();};//图片右边划right_btn.onclick = function () {spot[count].style.backgroundColor = "rgba(255,255,255,0.3)";count--;if (count < 0) {box.className = "box_big";count = box.children.length - 2;box.style.marginLeft = "-3500px";}setTimeout(function () {box.className = "box_big nav";box.style.marginLeft = (-700 * count) + "px";spot[count].style.backgroundColor = "rgba(91,91,91,0.8)";}, 1);};//计时器function showtime() {time = setInterval(function () {mate();}, 1000);}//正常滚动function mate() {box.className = "box_big nav";spot[count].style.background = "rgba(255, 255, 255, 0.3)";count++;spot[count > box.children.length - 2 ? 0 : count].style.background = "rgba(91,91,91,0.8)";box.style.marginLeft = (count * -700) + "px";setTimeout(function () {if (count > box.children.length - 2) {count = 0;box.className = "box_big";box.style.marginLeft = "0px"}}, 500)}
</script>
</body>
Javascript实现图片轮播效果。相关推荐
- 原生Javascript实现图片轮播效果
首先引入js运动框架 1 function getStyle(obj,name){ 2 if(obj.currentStyle){ 3 return obj.currentStyle[name]; 4 ...
- 十五分钟用JavaScript基础写一个图片轮播效果
十五分钟用JavaScript基础写一个图片轮播效果 前言 这次也是一个适合JavaScript初学者的小练手,用JavaScript的基本知识去写一个轮播图,其实轮播图有很多方法去实现,像用一些框架 ...
- android首页图片轮播效果,Android_Android自动播放Banner图片轮播效果,先看一下效果图支持本地图 - phpStudy...
Android自动播放Banner图片轮播效果 先看一下效果图 支持本地图片以及网络图片or本地网络混合. 使用方式: android:id="@+id/banner" andro ...
- php制作图片轮播_图片轮播效果实现方法
图片轮播效果如何实现呢本文主要介绍了JQuery实现图片轮播效果的制作原理以及实现代码,文章末尾附上源码下载,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 用JQuery操作DOM ...
- java图片特效轮播代码_JQuery实现图片轮播效果
[实例演示] 1 2 3 4 用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,其中选择器在此示例-"JQuery实现图片轮播效果"上 ...
- js图片轮播效果实现代码
这篇文章主要介绍了js图片轮播效果实现代码,文章对每一步进行了详细阐述,标注注意事项,为顺利实现js图片轮播效果做好铺垫,对轮播效果感兴趣的朋友可以参考一下 首先给大家看一看js图片轮播效果,如下图 ...
- jQuery实现图片轮播效果
图片轮播效果 : 在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接; 点击图片左下的标签(或中间的小圆点)切换到对应的图片; 点击图片的左右切换标签; 整体思路 : 自动轮播: 将一个 ...
- php制作图片轮播_JavaScript_jQuery制作简洁的图片轮播效果,演示图:核心代码:$ - phpStudy...
jQuery制作简洁的图片轮播效果 演示图: 核心代码: $(document).ready(function(){ var $iBox = $('.imgBox'), $iNum = $('.img ...
- html轮播带缩略图,js带缩略图的图片轮播效果代码分享
本文实例讲述了js带缩略图的图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javaScript实现带缩略图的图片轮播特效代码,实现过程很简单. 运行效果图:--------------- ...
最新文章
- Web API与JWT认证
- 干货丨浅析分布式系统(经典长文,值得收藏)
- Servlet简介与Servlet和HttpServlet运行的流程
- Additive属性动画
- 折腾Java设计模式之建造者模式
- php 字符型转变为数值,php怎么把字符串转换为数值?
- 2021牛客OI赛前集训营-提高组(第五场)C-第K排列【dp】
- HTML5设计基本网页-basic frameset
- c#生成静态库_在 Blazor WebAssembly 静态网站中部署ML.NET机器学习模型
- matlab求函数方程的正根,matlab解方程组的时候,可以只要正根吗?
- 平滑阴影blender_【Blender笔记】简单的创建一个平平无奇的石头
- Windows was unable to connect to wifi 电脑windows连不上路由器但是连得上手机wifi?
- PSP战神 斯巴达勇士 游戏ISO文件和完美通关存档和金手指
- 【智库解读】明天系、安邦系、海航系、复星系、联想系、中植系、三胞系、宝能系等27个超级民营金融巨头名单及其持股图揭秘!
- U盘提示格式化,8G的U盘变成了8M,并无法格式化打不开U盘解决方法
- foo java_Java的类型参数通配符到底意味着什么? Foo和Foo ?之间的真正区别是什么?...
- java操作word,自动更新目录/域
- jeecg-boot实现分布式定时任务
- python嵌入式怎么学_怎么自学嵌入式?
- 如何用Project2010制作WBS