纯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写淘宝无缝轮播图效果 需求分析: ...
随机推荐
- AndroidStudio运行时出现错误：Instant Run requires 'Tools | Android | Enable ADB integration' to be enabled
本来想调出MMDS,没想到报出这个错误: 最后发现原来是自己选Android Device Monitor不小心把Enable ADB Integration前面的√去掉了.点击工具栏中的Tools, ...
- C# mvc读取模板并修改上传到web
C# mvc读取模板并修改上传到web 后台: public FileResult GetXls() { FileStream fs = new FileStream(System.Web.HttpC ...
- 关于Excel文件导入到Sqlserver2008中出现截断错误的解决办法
出现错误的可能原因: 1.数据库字段Varchar长度不够: 2.不能用Text类型: 3.数据中可能存在换行符: 4.数据项文本过长,超过4000: 5.前8行的最大长度不够大,后面有超过的. 解决 ...
- 两个知识点的回顾（const指针和动态链接库函数dlopen）
昨天,看了一点<c++ primer>和<程序员的自我修养>,想起了自己以前的两个知识点,这里回顾,并且总结一下. 1. const指针的参数 看primer的时候,看到几个概 ...
- 小程序——微信小程序初学踩过的坑
微信小程序初学踩过的坑 一.前言 最近因为某些需要和个人兴趣打算开发一下微信小程序,经过在官方网站上的基本了解,我大体知道了微信小程序开发的大致过程,其实最本质的就是MVVM,借用了很多模式上 ...
- July 05th 2017 Week 27th Wednesday
No man can make a good coat with bad cloth. 巧妇难为无米之炊. One can't make bricks without straw. There is ...
- define常量
看手册说define定义的常量只允许: 仅允许标量和 null.标量的类型是 integer, float,string 或者 boolean. 也能够定义常量值的类型为 resource ,但并不推 ...
- 浅聊IOC
1.概述 IOC:有很多人把控制反转和依赖注入混为一谈,虽然在某种意义上来看他们是一体的,但好像又有些不同. 1. IOC(控制反转)是一个控制容器,DI(依赖注入)就是这个容器的运行机制. 2. I ...
- 备份&添加无线网络配置
netsh wlan export profile key=clear folder=c:\ #备份 (ls c:\*.xml).FullName|%{netsh wlan add profile f ...
- 微信公众号支付IOS系统能够唤起，安卓系统不能唤起的问题解决
前言 之前系统内做过要给微信支付程序,只不过鉴于业务应用场景,大部分都是使用业务内的金币兑换产品,没有实际用到支付功能.后来运营小哥哥说他的手机不能唤起支付.于是乎我查询了一下资料,发现了这么个问题. ...