用JavaScript制作天猫轮播图

**pacity和rgba的区别：**
1. 都可以设置透明的效果,
2. 用opacity来设置透明效果时文本的内容也会变透明，而用rgba来设置是文本的内容不会改变。例如：opacity:0.3;
3. rgba语法为（r,g,b,a），r为红色值，g为绿色值 b为蓝色值，a为alpha（透明度）， 值为0 ~ 1之间的小数，0.0 （完全透明）到 1.0（完全不透明）例如：background-color:rgba(0,0,0,0.3);

实现效果：

      1.鼠标放在图片内部时，显示两个箭头，鼠标离开时不显示2.鼠标点击下方导航条时，可以移动到达数字对应的第几个图片3.点击左右两个箭头图片移动，并且图片移动到第几个时，导航条中的数字对应第几个图片

实现步骤：

   1.先给两个箭头（块级元素）设置onmouseover和onmouseout事件2.动态生成轮播图的导航元素，可以根据图片的个数来生成（或者li标签的个数,li标签对应一个img标签）， 并且生成对应的数字放在新生成的li标签中3.给每一个生成的li标签增加一个index属性和起始位置的current属性，index属性用于点击时获取序号，4.根据“排它原理”，给新生成的li标签设置onclick事件，鼠标点击该标签时设置current属性同时获取index里的值，将这个获取的值乘负的图片的宽度(这里的图片宽度为800， 这里为index的值*-800）来使图片移动.5.给两个箭头增加缓动动画效果，同时设置导航栏中的按钮为被选中项。

实现细节：

  1.使用background-color:rgba(0,0,0,0,0.3)，来设置span标签的半透明，内容不是半透明,这样不影响文本内容2. var btn = document.getElementById('btn');var box = document.getElementById('box');//1.声明变量leader，幷赋初值为0，它用来计算盒子每一次移动到的位置//2.声明变量target，并赋初值为0，它的作用是用来设置盒子移动的终点，//3.在页面加载时启动定时器，并写好缓动动画公式//4.在触发缓动动画效果的事件中，设定target终点的坐标var leader = 0;var target = 0;setInterval(function(){leader = leader + (target - leader) / 10;box.style.left = leader + 'px';},50)btn.onclick = function(){target = 1000;}用来设置缓动动画

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>轮播图</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 800px;height: 300px;position: relative;overflow: hidden;margin: 100px auto;}.box .slider{width: 100%;height: 100%;}.box .slider ul{width: 1000%;list-style: none;position: absolute;top: 0;left: 0;}.box .slider img{vertical-align: top;}.box .slider ul li{float: left;}.box .scroll_nav{list-style: none;position: absolute;right: 20px;bottom: 10px;}.box .scroll_nav li{float: left;width: 20px;height: 20px;background-color: #000;color: #fff;text-align: center;font-size: 12px;font-family: "微软雅黑";line-height: 20px;cursor: pointer;border-radius: 50%;margin-right: 5px;}.box .scroll_nav li.current{background-color: #356acb;}.box .arr{width: 40px;height: 50px;font-size: 35px;font-family: "黑体";line-height: 50px;background-color: rgba(0,0,0,0.3); /*这种方式能让背景透明而文本不收影响*/color: #fff;text-align: center;position: absolute;top: 125px;font-weight: bold;display: none;cursor: pointer;/* opacity: 0.1; opacity属性会让盒子半透明，与此同时它也会让黑子内部的文本半透明*/}.box .arr_prev{left: 5px;}.box .arr_next{right: 5px;}</style><script type="text/javascript">function $(id){return document.getElementById(id);}        window.onload = function(){$('scroll').onmouseover = function(){ //鼠标放在屏幕上的效果var arrs = this.getElementsByClassName('arr');for (var i = 0; i < arrs.length; i++) {arrs[i].style.display = 'block';}}$('scroll').onmouseout = function(){  //鼠标离开屏幕中心时不显示var arrs = this.getElementsByClassName('arr');for (var i = 0; i < arrs.length; i++) {arrs[i].style.display = 'none';}}var imgCount = $('sl').getElementsByTagName('li').length;for (var i = 0; i < imgCount; i++) {var li = document.createElement('li');li.innerHTML = i+1;if(i == 0){li.setAttribute('class', 'current');}//根据排它原理实现轮播导航样式li.setAttribute('index', i);//给li标签添加一个index属性，用于在点击导航时，获取序号li.onclick = function(){var lis = $('sc_nav').getElementsByTagName('li');for (var i = 0; i < lis.length; i++){lis[i].className = '';}this.className = 'current';//设置动画终点位置var index = this.getAttribute('index');//getAttribute获得属性的值target = index * -800;}$('sc_nav').appendChild(li);}//缓动动画实现动画效果var leader = 0;var target = 0;setInterval(function(){leader = leader +(target - leader)/10;$('sl_ul').style.left = leader + 'px';}, 20);//点击箭头滚动//左箭头点击事件$('prev').onclick = function(){if(target < 0){target += 800;}else{target = -3200;}setCurrent();}//右箭头点击事件$('next').onclick = function(){if(target > -3200){target -= 800;}else{target = 0;//如果已经是最后一张图，那么再点击就直接回到第一张图}setCurrent();}//修改对应的nav栏中的按钮为被选中项function setCurrent(){var index = Math.abs(target / 800);//取绝对值var lis = $('sc_nav').getElementsByTagName('li');for(var i = 0; i<lis.length; i++){lis[i].className = '';}lis[index].className = "current";}}</script></head><body><div class="box" id="scroll"><div class="slider" id="sl"><ul id="sl_ul"><li><img src="imgs/1.jpg" alt=""></li><li><img src="imgs/2.jpg" alt=""></li><li><img src="imgs/3.jpg" alt=""></li><li><img src="imgs/4.jpg" alt=""></li><li><img src="imgs/5.jpg" alt=""></li></ul></div><ul class="scroll_nav" id="sc_nav"><!-- <li class="current">1</li><li>2</li><li>3</li><li>4</li><li>5</li> --></ul><span class="arr arr_prev" id="prev"><</span><span class="arr arr_next" id="next">></span></div></body>
</html>

用JavaScript制作天猫轮播图相关推荐

如何通过 HTML+CSS+JS 制作焦点轮播图
序言 [版权声明]:狸狸高度重视原创作者或者著作权人应该享有的著作权,严格遵守国家相关法律法规,系该文章内所引用到的实例并非百分之百对原作品进行还原.因此,即便是您完完整整的复制并粘贴了本文章内所有的 ...
JavaScript实现网页轮播图
轮播图也成为焦点图,是网页中比较常见的网页特效一.功能: 1.鼠标经过轮播图模块,左右两边的按钮显示,鼠标离开轮播图模块,就隐藏左右按钮. 2.点击右(左)侧按钮一次,图片往左(右)播放一张,一以此 ...
【JavaScript】网页轮播图
目录 HTML搭建功能实现小圆圈事件左右按钮事件自动播放轮播图也叫焦点图,是网页中比较常见的网页特效. 功能: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 点击右侧按钮一次,图片往 ...
php制作小米轮播图,小米商城轮播图的实现
小米商城轮播图用了div+css+js+jsjquery 要引入jquery库 1 2 3 4 5 < > 手机电话卡 > 电视盒子 > 笔记本平板 > 家电插 ...
[情人节特辑]如何用简单好看html代码制作H5轮播图
文章目录 Valentine 特辑需求分析准备清单 xampp新建项目文件夹文案月色真美的iframe代码主框架代码,利用iSlider的QQ音乐demo修改而成 html部分 css部分 ...
用javascript做网页轮播图
文章目录网页轮播图: 功能需求: 动图展示: 代码分析: 主题结构部分: 样式设置: 交互效果: 引用缓动动画(图片滚动的效果) 网页轮播图: 轮播图也称为焦点图,是网页中比较常见的网页特效. 功能 ...
原生javascript之实战轮播图
成品效果如下图所示: 因为博客园限制图片上传大小被我删了一些帧数,所以图片看起来会有一点卡,现实运行是不会的搭建HTML和CSS结构 HTML代码如下: 1 <div class=" ...
前端全栈大佬是如何使用javaScript实现一个轮播图
效果图: 代码如下: <!DOCTYPE html> <html> <head lang="en"><meta charset=" ...
使用swiper_关于使用swiper制作web轮播图
我这个方法是很适用于小白的,利用swiper插件的应用.https://www.swiper.com.cn/这个是swiper中文官网的网址,上面有关于swiper的说明和使用方法.想要用到swipe ...

用JavaScript制作天猫轮播图

实现效果：

实现步骤：

实现细节：

用JavaScript制作天猫轮播图相关推荐

最新文章

热门文章