基于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,类似于淘宝海报带小圆点轮播图的更多相关文章

  1. JQuery和html+css实现带小圆点和左右按钮的轮播图

    是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...

  2. 【UI】为项目添加类似于淘宝筛选列表勾选的ui-choose

    jQuery下载的地址:http://www.htmleaf.com/jQuery/Form/201512182916.html GitHub地址:https://github.com/wangxin ...

  3. Android之仿京东淘宝的自动无限轮播控件

    在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于Re ...

  4. Android高仿京东淘宝自动无限循环轮播控件的实现思路和过程

    在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的实现思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于 ...

  5. JS仿淘宝详情页菜单条智能定位效果

    类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...

  6. JS五星级评分效果(类似与淘宝打分效果)

    今天晚上研究下 五星级评分效果,类似于淘宝后台评分效果,如下图所示: 思路: 当鼠标移到一颗星的时候 判断当前的索引 当前及当前的索引前面的星星亮起来 每当移到任何一颗星星时候 下面跟随提示 mous ...

  7. 纯js轮播图练习-1

    偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...

  8. 纯js实现淘宝商城轮播图

    需求: 循环无缝自动轮播3张图片,点击左右箭头可以手动切换图片,鼠标点击轮播图下面的小圆点会跳转到对应的第几张图片.鼠标放到轮播图的图片上时不再自动轮播,鼠标移开之后又继续轮播.效果图: 下面是htm ...

  9. js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

随机推荐

  1. JavaScript JSON AJAX 同源策略 跨域请求

    网页和Ajax和跨域的关系 1 Ajax使网页可以动态地.异步地的与服务器进行数据交互,可以让网页局部地与服务器进行数据交互 2 Ajax强调的是异步,但是会碰到跨域的问题. 3 而有很多技术可以解决 ...

  2. JavaScript Event 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw

    参考资料: 慕课网 DOM事件探秘    js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数 ...

  3. 【OBJC】数字转中文大写

    博客园都不知道怎么外链图片…… - (void)numToString:(double)num{ ; NSMutableString *szChMoney = [[NSMutableString al ...

  4. 10.符号链接&创建链接

    在我们到处查看时,我们可能会看到一个目录,列出像这样的一条信息: lrwxrwxrwx 1 root root 11 2007-08-11 07:34 libc.so.6 -> libc-2.6 ...

  5. 记录code修改

    package com.hesheng.myapplication; import android.content.Context;import android.graphics.Bitmap;imp ...

  6. Dapper进行增删改查 z

    http://www.cnblogs.com/huangkaiyan10/p/4640548.html 项目背景 前一段时间,开始做一个项目,在考虑数据访问层是考虑技术选型,考虑过原始的ADO.NET ...

  7. 使用UIScreenEdgePanGestureRecognizer写iOS7侧边栏

    使用UIScreenEdgePanGestureRecognizer写iOS7侧边栏 A UIScreenEdgePanGestureRecognizer looks for panning (dra ...

  8. 关于Jsp页面的jstl标签的级联属性的异常。

    使用SpringMVC框架时,当我做表单回显时. 情景描述.Employee 类有一个Department类的属性.这两个类存在多对一关联关系. 下面是Employee类的属性的定义. public ...

  9. UVa 1625 - Color Length(线性DP + 滚动数组)

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  10. springmvc(3)注解

    有疑问可以参考博主其他关于spring mvc的博文 此时直接进行代码的实现 一般的步骤: -加入jar包 -配置DispatcherServlet -加入Spring MVC配置文件 -编写请求的处 ...