纯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写淘宝无缝轮播图效果 需求分析: ...
随机推荐
- 【Python】回文palindrome——利用字符串反转
回文 palindrome Python 字符串反转string[::-1] Slice notation "[a : b : c]" means "count in i ...
- bootstrap 默认显示1899问题
今天使用bootstrap的 dateTimePicker控件时候,又碰到了去年的 显示 1899年的问题,之前解决过,但是忘记了.就记得 他的代码里面有一段是 说格式不正确或者 时间格式小于某个值时 ...
- react 反模式——不使用jsx动态显示异步组件
前言: react反模式 (anti-patterns)指的是违背react思想(flux)的coding方式. 本文在 App 组件中,通过 Model.show 动态显示 Model 组件,通过 ...
- GitHub教程(一) 使用指南
刚进公司上班的时候,技术总监让我熟悉一下Git(分布式版本控制工具)操作命令和GitHub(代码托管平台),说实话之前我也没有具体使用过Git工具,但是GitHub我还是注册过账号的.在练习将本地仓库 ...
- asp.net ashx导出excel到前台
最近有一个项目使用以前的ashx,不能使用FileResult,只有通过response返回拼接好的字符串.但是通过查阅资料拼接的字符串总是提示文件格式不匹配,虽然能正常打开,但是体验很不好,在此总结 ...
- centos 开机执行的命令
centos开机执行的命令-------待验证,因为有可能涉及到root问题,没想明白怎么输入密码 1.增加rc.local可执行权限 chmod +x /etc/rc.d/rc.local 2.在里 ...
- Microsoft.Exchange 发邮件
//Microsoft.Exchange.WebServices.dll ExchangeService service = new ExchangeService(); // 获取身份验证, 能够尝 ...
- java中double类型显示两个小数，比如12.00
Double类型的数据如何保留两位小数? 各位大虾,现有Double类型的数据,如何转换为保留两位小数的数,返回值的类型仍然是Double类型的,而不是字符串类型. 比如 0,返回“0.00” ...
- SVNKit学习——wiki+简介（二）
这篇文章是参考SVNKit官网在wiki的文档,做了个人的理解~ 首先抛出一个疑问,Subversion是做什么的,SVNKit又是用来干什么的? 相信一般工作过的同学都用过或了解过svn,不了解的同 ...
- win 8系统：System.IO.FileNotFoundException: 未能加载文件或程序集“CefSharp.Core.dll”或它的某一个依赖项。找不到指定的模块
最近用CefSharp做了一个chrome核心的浏览器. 在win 7.win 10系统上都正常运行,但是在win 8系统上报错了. win 8系统:System.IO.FileNotFoundExc ...