前端事件练习之轮播图代码

1.将图片放在同一位置，设置透明度将其隐藏；

2.设置点击事件，每点击一次按钮，下一张图片透明度为1，其他为0；

样式代码如下：

<style>.swiper{width:170.4px;height:127.9px;position: relative;}.swiperItem{width: 170.4px;height: 127.9px;background-size: 100% 100%;position: absolute;opacity: 0;}.name{opacity: 0;display: none;}.btn{position: absolute;top: 113px;left: 230px;}.active{opacity: 1;display: block;}.introduction{width: 400px;min-height: 200px;padding: 10px;border: 1px solid grey;position: absolute;top: 200px;}p{text-indent: 2em;text-align: left;}

其他代码：

<div class="swiper"><div class="swiperItem" style="background-image: url(img/hongjiangguo.jpg);"></div><div class="swiperItem" style="background-image: url(img/luobin.jpg);"></div><div class="swiperItem" style="background-image: url(img/qiaokeli.jpg);"></div><div class="swiperItem" style="background-image: url(img/caihong.jpg);"></div><div class="swiperItem" style="background-image: url(img/huangjinyulu.jpg);"></div><div class="swiperItem" style="background-image: url(img/keaimeigui.jpg);"></div><div class="swiperItem" style="background-image: url(img/baiza.jpg);"></div></div><button class="btn">Next One</button><h2>Introduction</h2><div class="introduction"><div class="name"><h4>红色浆果</h4><p>新引进小型或微型多年生肉质草本植物，杂交品种。株型与“虹之玉”有些相像，但株型更细小，叶片更紧凑密集，一颗颗晶莹剔透的圆形、椭圆形的叶片（小浆果）轮生、聚拢在一起，仿若一串袖珍的葡萄，十分可爱，红色浆果的颜色也相当丰富，有果冻色、鲜红色、粉红色、褐紫色、青绿等，且光泽度、透明感较“虹之玉”更好，其观赏性让“虹之玉”望尘莫及。茎，纤细，嫩茎红色，老茎灰绿或灰褐色，易生气根，易爆侧芽，常匍匐生长，可出现爆盆，或形成株型美观的群生株。</p></div><div class="name"><h4>罗宾</h4><p>多肉罗宾对土壤、温度、光照、湿度的要求高。养殖期间要用松软、透气、排水性好的土壤，否则容易沤根。它喜温暖环境，耐寒性以及耐高温能力差，夏冬季需采取控温措施。喜光，但不耐晒，夏季的光照过于强烈，必须要遮光处理，否则易晒伤。有较强的耐旱能力，浇水需严格控制水量，浇透即可，严禁积水。</p></div><div class="name"><h4>巧克力</h4><p>巧克力方砖需要生长在土壤略微湿润的地方，但是又不能有积水。它的抗低温能力很强，只要高于零下四摄氏度就能存活。一旦周围环境低于这个点，它就有可能会被冻伤，然后出现干枯的现象，最终会死亡。反过来，在高温的情况下，它也会缓慢地生长，这个时候要避免在太阳下面过分暴露。这种盆栽在每年的九月到次年的六月都是生长期，所以在这个阶段，需要保持环境的阳光、庇荫以及水分。</p></div><div class="name"><h4>彩虹</h4><p>多肉彩虹对土壤的要求并不高，可用一半颗粒土掺杂一半营养土养殖，注意上盆前先消毒处理。养殖期间春秋生长季每周浇水一次，夏冬两季控水。它喜光，光照充足颜色才会更漂亮，否则易徒长。</p></div><div class="name"><h4>黄金玉露</h4><p>黄金玉露多肉在养护时需注意用土，土壤必须是透气，透水能力强，松软的才行。它喜光，但是惧怕直射光，建议放在室内光线明亮处，多晒散光照。给它浇水不需太勤，可按照见干见湿的方法进行。生长旺季还需追肥，一个月一次稀薄的液肥就行。此外，还要很好的控制夏冬季的高低温。温度适宜才可安全度夏，越冬。</p></div><div class="name"><h4>可爱玫瑰</h4><p>可爱玫瑰喜欢生长在疏松肥沃、排水良好，不易结块的土壤中，可用泥炭、椰糠、颗粒土等混合配制。适宜生长温度在15℃-20℃之间，夏季和冬季要控制好温度。给予充足的光照，每天见光4-6小时左右。生长季节可充足浇水，生长期间每隔半个月施肥一次。在养护期间，要保持良好的通风环境。</p></div><div class="name"><h4>白杂</h4><p>白女王杂需要提供充足到光照，夏季可以适当遮阴。土壤一般用松软的沙壤土，可以用泥炭土和蛭石配制。平时浇水不要浇多，以免根部被淹，影响它的呼吸。每月要施一次肥，但到了休眠期要及时停肥。这种植物多用叶插法繁殖，剪取一片叶子，放到基质上即可。</p></div></div><script>var btn = document.querySelector('.btn');var swiperList = document.querySelectorAll('.swiperItem');var nameList = document.querySelectorAll('.name');var index = 0;swiperList[index].classList.add('active');nameList[index].classList.add('active');btn.addEventListener('click',function(){swiperList[index].classList.remove('active');nameList[index].classList.remove('active');index++;if( index >= swiperList.length){index = 0;}swiperList[index].classList.add('active');nameList[index].classList.add('active');})</script>

效果图：

前端事件练习之轮播图代码相关推荐

bootstrap轮播图代码详解
最近在做个人简历网站,然后要用到轮播图,上网查了一下,以下为轮播图代码: 下面展示一些内联代码片.  <div id="my ...
JavaScript轮播图代码
JavaScript轮播图代码 <html><head><meta charset="utf-8"><title>轮播图</t ...
做一个前端网页送给女朋友~轮播图+纪念日
文章目录 1. 轮播图框架 2. 轮播图大盒子实现 1. 盒子及图片的可视化 2. 将图片重叠起来并放入轮播图盒子中 ...相对定位与绝对定位 3. 添加左右按钮 4. 点击按钮跳转图片 5. 鼠标离 ...
JS-内置对象内置构造函数事件-拖拽轮播图无缝滚动
内置对象&内置构造函数日期时间格式 // 创建一个当前时刻的日期时间对象 var date = new Date(); // 获取date对象中的年月日时分秒 var y = date.ge ...
从零开始学前端：OPPO商城轮播图 --- 今天你学习了吗？（CSS：Day23）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:css3新属性scss和less - 今天你学习了吗?(CSS:Day22) 文章目录从零开始学前端:程 ...
【学习笔记57】轮播图代码的实现
一.HTML代码 <div class="banner"><ul class="img_box&quo ...
js轮播图代码_javascript基础（一）——轮播图
javascript基础(一)--轮播图 1.轮播图的实现原理轮播图的js实现原理其实十分的简单,首先将图片放入一个ul标签中,ul标签的大小要足够将所有图片放入其中.然后再将ul标签放进div中, ...
轮播图代码,带定时器和小圆圈(易懂)
简单的显示隐藏(带小圆圈和左右按钮,js写) <!DOCTYPE html> <html lang = "en" > <head ><me ...
微信小程序轮播图代码
微信小程序轮播图的代码如下: 首先,在小程序的 wxml 文件中,添加如下代码:  <swiper class="swiper" in ...
左右无缝轮播html,JS实现左右无缝轮播图代码
废话不多说了,直接给大家贴代码了. 无缝轮播图: 无缝轮播图 *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;h ...

前端事件练习之轮播图代码

前端事件练习之轮播图代码相关推荐

最新文章

热门文章