纯js轮播图练习-3，类似于淘宝海报带小圆点轮播图
基于js和css，跟着网上的视频教程，结合自己想要的效果，做出了一个类似于淘宝海报的效果。
如图：淘宝首页
自己做的：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lunbo3</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: middle;
}
.warp{
width: 640px;
height: 270px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.box{
height: 270px;
position: absolute;
left: 0px;
/*平移过渡动画，时间为半秒钟*/
transition: all 0.5s;
}
.box li{
width: 640px;
height: 270px;
float: left;
}
.box li a{
width: 640px;
height: 270px;
}
.box li a img{
width: 100%;
height: 100%;
cursor: pointer;
}
.buts span{
color: #FFFFFF;
display: none;
width: 8px;
height: 14px;
line-height: 18px;
background-color: rgba(0,0,0,0.5);
text-align: center;
margin: 0 auto;
cursor: pointer;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none; }.buts span:hover{
background-color: rgba(0,0,0,0.8);
}
.buts span img{
display: block;
width: 8px;
height: 14px;
}
.butL{
position: absolute;
z-index: 100;
top: 120px;
padding: 10px 10px 10px 5px;
border-top-right-radius: 17px;
border-bottom-right-radius: 17px;
}
.butR{
position: absolute;
z-index: 100;
top: 120px;
right: 0;
padding: 10px 5px 10px 10px;
border-top-left-radius: 17px;
border-bottom-left-radius: 17px;
}
.dotBox{
position: absolute;
z-index: 999;
bottom: 10px;
width: 100%;
height: 18px;
text-align: center;
}
.dot{
display: inline-block;
margin: 0 auto;
height: 8px;
padding: 5px;
border-radius: 15px;
background-color: rgba(255,255,255,0.3);
}
.dot li{
float: left;
width: 8px;
height: 8px;
line-height: 8px;
border-radius: 4px;
color: #FFFFFF;
text-align: center;
margin: 0 4px;
background-color: #FFFFFF;
cursor: pointer;
user-select:none;
-moz-user-focus: none;
-webkit-user-select: none;
-lhtml-user-select:none;
-moz-user-select: none;
-ms-user-select: none;
font-size: 10px;
}
.dot li:hover{
background-color: #FF0000;
}
#dotIs{
background-color: #FF0000;
}
</style> </head>
<body>
<div class="warp">
<!--图片-->
<ul class="box" id="box">
<li><a href="#"><img src="../image/lunbo/00.jpg" /></a></li>
<li><a href="#"><img src="../image/lunbo/01.jpg" /></a></li>
<li><a href="#"><img src="../image/lunbo/02.jpg" /></a></li>
<li><a href="#"><img src="../image/lunbo/03.jpg" /></a></li>
<li><a href="#"><img src="../image/lunbo/04.jpg" /></a></li>
<li><a href="#"><img src="../image/lunbo/05.jpg" /></a></li>
</ul>
<!--按钮-->
<div class="buts">
<span class="butL" id="butL"><img src="../image/lunbo/L.png" /></span>
<span class="butR" id="butR"><img src="../image/lunbo/R.png" /></span>
</div>
<!--圆点-->
<div class="dotBox">
<ul class="dot" id="dot">
<li id="dotIs"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div> <script type="text/javascript">
window.onload = function(){ //获取ul（图片外框）
var box = document.getElementById("box");
//获取li（图片）
var li = box.getElementsByTagName("li");
//获取单个li宽度（单张图片宽度）
var liWidth = li[0].scrollWidth;
//获取左按钮
var butL = document.getElementById("butL");
//获取右按钮
var butR = document.getElementById("butR");
//获取小圆点
var dot = document.getElementById("dot").getElementsByTagName("li");
//定义数字
var index = 0;
//定义开关
var flag = true; //更改图片外框宽度（图片的数量*单张图片的宽度）
box.style.width = li.length*liWidth+"px"; //点击下一张
butR.onclick = function(){
//判断flag是否为true
if(flag){
//更改flag为false
flag = false;
//数字加1
index++;
//判断数字是否等于图片的总数量
if(index == li.length){
//将数字改为0
index = 0;
};
//更改图片外边框的left，向左边移动，移动的尺寸为数字*单张图片图片的宽度
box.style.left = -index*liWidth+"px";
//遍历循环查找小圆点下标位置
for(var i = 0 ; i < dot.length; i++){
//判断小圆点的下标位置是否与数字相同
if(i == index){
//更改已匹配到li，将已写好的css样式id名字赋给它
dot[index].id = "dotIs";
}else{
//去掉未匹配的id名字
dot[i].id = "";
};
};
//延迟执行，500毫秒之后执行，延迟的时间与css的transition: all 0.5s;的5s一致
setTimeout(function(){
//改变flag为true
flag = true;
},500)
};
}; //点击上一张
butL.onclick = function(){
//判断flag是否为true
if(flag){
//更改flag为false
flag = false;
//数字减1
index--;
//判断数字是否小于0
if(index < 0){
//将数字图片总数的数字
index = li.length-1
};
//更改图片外边框的left，向右边移动，移动的尺寸为数字*单张图片图片的宽度
box.style.left = -index*liWidth+"px";
//遍历循环查找小圆点下标位置
for(var i = 0 ; i < dot.length; i++){
//判断小圆点的下标位置是否与数字相同
if(i == index){
dot[index].id = "dotIs";
//更改已匹配到li，将已写好的css样式id名字赋给它
}else{
//去掉未匹配的id名字
dot[i].id = "";
};
};
//延迟执行，500毫秒之后执行，延迟的时间与css的transition: all 0.5s;的5s一致
setTimeout(function(){
//改变flag为true
flag = true;
},500);
};
}; //设置自动播放
function play(){
//连续不断持续的执行
lunbo = setInterval(function(){
//数字加1
index++;
//判断数字是否等于图片的总数量
if(index == li.length){
//将数字改为0
index = 0;
};
//更改图片外边框的left，向左边移动，移动的尺寸为数字*单张图片图片的宽度
box.style.left = -index*liWidth+"px";
//遍历循环查找小圆点下标位置
for(var i = 0 ; i < dot.length; i++){
//判断小圆点的下标位置是否与数字相同
if(i == index){
//更改已匹配到li，将已写好的css样式id名字赋给它
dot[index].id = "dotIs";
}else{
//去掉未匹配的id名字
dot[i].id = "";
};
};
//每3000（3秒）执行一次。
},3000);
}; //设置停止自动播放
function stop(){
//停止（lunbo）已写好的持续执行方法。
clearTimeout(lunbo);
}; //默认启动自动播放
play(); //点击圆点
for(var i = 0; i < dot.length; i++){
//给每个小圆点赋值，每个小圆点都有一个相对应的数字。
dot[i].is = i;
//鼠标移入小圆点
dot[i].onmouseover = function(){
//停止图片自动播放
stop();
} //鼠标移出小圆点
dot[i].onmouseout = function(){
//图片继续自动播放
play();
} //点击小圆点
dot[i].onclick = function(){
//更改图片外边框的left，向选择的小圆点移动方向，移动的尺寸为小圆点的数字*单张图片图片的宽度
box.style.left = -this.is*liWidth+"px";
//循环遍历小圆点
for(var i = 0 ; i < dot.length; i++){
//判断小圆点的数字是否等于选中的小圆点数字
if(i == this.is){
//更改数字（index）等于的小圆点选中的数字
index = dot[i].is;
//更改已匹配到li，将已写好的css样式id名字赋给它
dot[this.is].id = "dotIs";
}else{
//去掉未匹配的id名字
dot[i].id = "";
};
};
};
}; //鼠标移入左按钮
butL.onmouseover = function(){
//停止自动轮播
stop();
//左按钮显示
butL.style.display = "block";
//右按钮显示
butR.style.display = "block";
}; //鼠标移出左按钮
butL.onmouseout = function(){
//继续自动轮播
play();
//左按钮隐藏
butL.style.display = "none";
//右按钮隐藏
butR.style.display = "none";
} //鼠标移入右按钮
butR.onmouseover = function(){
//停止自动轮播
stop();
//左按钮显示
butL.style.display = "block";
//右按钮显示
butR.style.display = "block";
}; //鼠标移出右按钮
butR.onmouseout = function(){
//继续自动轮播
play();
//左按钮隐藏
butL.style.display = "none";
//右按钮隐藏
butR.style.display = "none";
} //鼠标移入图片
box.onmouseover = function(){
//停止自动轮播
stop();
//左按钮显示
butL.style.display = "block";
//右按钮显示
butR.style.display = "block";
}; //鼠标移出图片
box.onmouseout = function(){
//继续自动轮播
play();
//左按钮隐藏
butL.style.display = "none";
//右按钮隐藏
butR.style.display = "none";
} }
</script>
</body>
</html>
未经允许，禁止转载，抄袭，如需借鉴参考等，请附上该文章连接。
纯js轮播图练习-3，类似于淘宝海报带小圆点轮播图的更多相关文章
- JQuery和html+css实现带小圆点和左右按钮的轮播图
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
- 【UI】为项目添加类似于淘宝筛选列表勾选的ui-choose
jQuery下载的地址:http://www.htmleaf.com/jQuery/Form/201512182916.html GitHub地址:https://github.com/wangxin ...
- Android之仿京东淘宝的自动无限轮播控件
在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于Re ...
- Android高仿京东淘宝自动无限循环轮播控件的实现思路和过程
在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的实现思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于 ...
- JS仿淘宝详情页菜单条智能定位效果
类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...
- JS五星级评分效果(类似与淘宝打分效果)
今天晚上研究下 五星级评分效果,类似于淘宝后台评分效果,如下图所示: 思路: 当鼠标移到一颗星的时候 判断当前的索引 当前及当前的索引前面的星星亮起来 每当移到任何一颗星星时候 下面跟随提示 mous ...
- 纯js轮播图练习-1
偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
- 纯js实现淘宝商城轮播图
需求: 循环无缝自动轮播3张图片,点击左右箭头可以手动切换图片,鼠标点击轮播图下面的小圆点会跳转到对应的第几张图片.鼠标放到轮播图的图片上时不再自动轮播,鼠标移开之后又继续轮播.效果图: 下面是htm ...
- js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
随机推荐
- linux第一个C语言和sh脚本
linux第一个C语言 $ gedit hello_world.c #include <stdio.h> int main(void) { printf("hello world ...
- 安装python File "/usr/bin/pip", line 11, in <module> sys.exit(main()) File "/usr/lib/python3.4/site-packages/pip/__init__.py", line 215, in main locale.setlocale(locale.LC_ALL, '') File "/u
$ uname -a Linux debian 3.16.0-4-amd64 #1 SMP Debian 3.16.7-ckt11-1+deb8u6 (2015-11-09) x86_64 GNU ...
- java virtualVM远程配置方法
在/etc/hosts中设置主机名和ip的对应关系 ip为用java virtualVM链接服务器的ip 如: 10.175.0.191 host-ai #rmiregistry不知道干 ...
- [原]Linux 命令行 发送邮件
1.mail -s hi xx@yy.com 给xx@yy.com发一封主题为hi的信(没有正文) 编辑完内容后Ctrl-D结束. 2.echo "This is a test mail!& ...
- csr867x开发日记——常用软件工具介绍
xIDE xIDE开发环境(编译器)可以被用于以下操作 查看代码 构建新应用 调试 运行 重新配置 修改 Universal Front End 通用前端 通用前端(UFE)工具用于配置DSP,ADK ...
- Service Fabric eShop On Containers
Service Fabric承载eShop On Containers 从模块化到微服务化 从Pet Shop 到eShop on Container都是Microsoft在技术演进的路径上给开发者展 ...
- Linux_脚本——使用echo从一个文件写入还有一个文件末尾
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/svitter/article/details/30980923 echo $(cat 你须要的文件) ...
- UVa 1658 - Admiral（最小费用最大流 + 拆点）
链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- 15、SpringBoot-CRUD错误处理机制（2）
二.如何定制错误响应 1).如何定义错误处理页面 1.1.有模板引擎的情况下:error/状态码; [将错误页面命名为 错误状态码.html 放在模板引擎文件夹里面的error文件夹下 ...
- WMIC常用
显示详细的进程信息 查找进程的具体路径 通过比较严查可疑文件 显示本机安装的软件