纯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写淘宝无缝轮播图效果 需求分析: ...
随机推荐
- EF多实体对应单表
1.EF多实体对应单表 适用场景:单数据库表,表数据有较长用字段,有不常用或者大数据字段. 2.建表语句 CREATE TABLE [Chapter2].[Photograph]( ,) primar ...
- C++中long是什么类型
long long本质上还是整型,只不过是一种超长的整型. int型:32位整型,取值范围为-2^31 ~ (2^31 - 1) .long:在32位系统是32位整型,取值范围为-2^31 ~ (2^ ...
- create-react-native-app
create-react-native-app官网介绍链接,github文档,可以看看了解一下,总之是一个5分钟快速搭建react native项目并能看到效果的方法. 假设你已经安装了Node,你可 ...
- python 测试：生成exe文件
任务: test.py print(input('请输入:')) 将test.py生成test.exe 解答: 安装: pip install pyinstaller 命令使用: (绝对地址)pyin ...
- linux第一个C语言和sh脚本
linux第一个C语言 $ gedit hello_world.c #include <stdio.h> int main(void) { printf("hello world ...
- POI读取xls和xlsx
import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import ...
- 【Leetcode】【Medium】Unique Binary Search Trees
Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...
- Jenkins在deploy maven artifact时报Peer not authenticated.
这是一起由Nexus证书导入错误造成的Jenkins运行异常. 最近,同事修改了Nexus服务器的host name,结果导致Jenkins里的任务全都执行不了了.虽然job的配置都已经更新指向新的N ...
- 为什么S/4HANA的销售订单创建会触发生产订单的创建
调用S/4HANA销售订单创建函数SD_SALES_DOCU_MAINTAIN创建一个销售订单时,会触发生产订单的创建. 销售订单的每个行项目对应一个独立的生产订单,SD_SALES_DOCU_MAI ...
- UML用例图间关系说明
用例间一般存在如下四种关系: 1."通信"关系(<<cmmunicate>>构造型): "通信"关系:使用实心的关联线或带<< ...