(1)html

<div class="box" id="box">
<ul class="uls" id="uls">
<li><img src="img/one.jpg" alt=""></li>
<li><img src="img/two.jpg" alt=""></li>
<li><img src="img/three.jpg" alt=""></li>
<li><img src="img/four.jpg" alt=""></li>
<li><img src="img/five.jpg" alt=""></li>
<li><img src="img/six.jpg" alt=""></li>
</ul>

<span id="left">左</span>
<span id="right">右</span>
<ol id="ols" class="ols">
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>

(2)css

*{
margin: 0px;
padding: 0px;
}
.box{
width: 520px;
height: 280px;
border: 1px solid #000;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.uls{
list-style: none;
width: 99999px;
/*给ul足够大的宽度,使li可以全部水平排列*/
}
.uls li{
float: left;
}

.box>span{
position: absolute;
width: 20px;
height: 30px;
background: rgba(0,0,0,0.7);
top: 50%;
margin-top: -15px;
color: white;
cursor: pointer;
text-align: center;
line-height: 30px;
}
#left{
left: 20px;
}
#right{
right: 20px;
}

.ols{
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -111px;
list-style: none;
}
.ols li{
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #f60;
margin-right: 15px;
cursor: pointer;
}
.ols li.selected{
background: #f60;
}

(3)JavaScript

var ouls=document.getElementById('uls');
var obox=document.getElementById('box');
var oright=document.getElementById('right');
var oleft=document.getElementById('left');
var olis=document.getElementById('ols').children;
var timer;
var num=0;

function go(){
// 自动轮播
timer=setInterval(function(){
num++;
if(num>5){
num=0;
}
ouls.style.marginLeft=-520*num+'px';

for(var i=0;i<olis.length;i++){
olis[i].setAttribute('class','');
}
olis[num].setAttribute('class','selected');
},1000)
}
go();

obox.onmouseenter=function(){
// 鼠标移入,停止定时器
clearInterval(timer);
}

obox.onmouseleave=function(){
// 鼠标移出,启动定时器
go();
}

// 点击向右按钮
oright.onclick=function(){
num++;
if(num>5){
num=0;
}
ouls.style.marginLeft=-520*num+'px';

for(var i=0;i<olis.length;i++){
olis[i].setAttribute('class','');
}
olis[num].setAttribute('class','selected');
}
// 点击向左按钮
oleft.onclick=function(){
num--;
if(num<0){
num=5;
}
ouls.style.marginLeft=-520*num+'px';

for(var i=0;i<olis.length;i++){
olis[i].setAttribute('class','');
}
olis[num].setAttribute('class','selected');
}

// 底部导航栏
for(var i=0;i<olis.length;i++){
olis[i].setAttribute('index', i);
olis[i].onclick=function(){
num=this.getAttribute('index');
for(var i=0;i<olis.length;i++){
olis[i].setAttribute('class','');
}
this.setAttribute('class', 'selected');

ouls.style.marginLeft=-520*num+'px';

}
}

JavaScript之轮播图的更多相关文章

  1. JavaScript焦点轮播图

    在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...

  2. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  3. 原生javascript焦点轮播图

    刚刚学会,写了一个轮播图效果,不过bug蛮多,请高手指点一下,谢谢 <!DOCTYPE html> <html> <head> <meta charset=& ...

  4. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

  5. 【JavaScript】轮播图

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  6. JavaScript 自适应轮播图

    代码 话不多说,先上代码,方便复制粘贴.演示 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. javascript简单轮播图

    **轮播图实现原理: 通过多张图片平铺,用overflow:hidden只显示一张图片.其他的隐藏,无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果.** HTML布局和内容: 1.容器c ...

  8. javaScript实现轮播图

    一.需求分析 在首页完成对轮播图的效果实现,完成自动切换图片的功能. 二.技术分析 获取元素 document.getElementById(“id 名称”) 事件(onload) 定时操作: set ...

  9. 原生JavaScript实现轮播图

    ---恢复内容开始--- 实现原理 通过自定义的animate函数来改变元素的left值让图片呈现左右滚动的效果 HTML: <!DOCTYPE html> <html> &l ...

随机推荐

  1. centos如何添加ftp目录

    检查Centos服务器中是否安装了vsftpd rpm -qa |grep vsftpd 如果没有显示则没有安装 2.安装vsftpd yum -y install vsftpd 3.打开vsftpd ...

  2. Oracle 导出表结构

    Oracle导出表结构 select A.Table_Name 表名 , -- A.column_name 字段名 A.column_name 字段名, A.data_type 数据类型, A.dat ...

  3. Struts2 输入校验(使用编码方式)

    一.Struts输入校验 1.创建register.jsp <%@ page language="java" contentType="text/html; cha ...

  4. DateUtils.formate()函数的“bug”

    写在前面 项目功能测试, 日期格式转换出现个诡异的问题, 转换后的时间总是和系统当前时间相差8小时, 问题是另一个项目和这个代码完全一样, DateUtils.java, 包括formatDate() ...

  5. Linux下安装java及配置(yum安装)

    1.查看java的所有版本:yum list java* 2.安装免费版1.8: yum install java-1.8.0-openjdk.x86_64 3.配置java环境 JAVA_HOME= ...

  6. SNF快速开发平台2019-权限管理模型实践-权限都在这里

    其它权限实践系列文章: 1.角色.权限.账户的概念理解-非常全的理论讲解权限控制 https://www.cnblogs.com/spring_wang/p/10954370.html 2.权限管理模 ...

  7. Scrapy的 Shell终端

    crapy Shell Scrapy终端是一个交互终端,我们可以在未启动spider的情况下尝试及调试代码,也可以用来测试XPath或CSS表达式,查看他们的工作方式,方便我们爬取的网页中提取的数据. ...

  8. Qt组件(例如按钮、树形控件)上响应鼠标右键

    ui->textEdit->setContextMenuPolicy(Qt::CustomContextMenu); connect(ui->textEdit,SIGNAL(cust ...

  9. error: RPC failed; curl 56 GnuTLS recv error (-54): Error in the pull function.

    . . . . . 今天从 github 上 clone 代码的时候,出现了一个错误,重试多次后仍然出现,错误如下: >$ git clone https://github.com/BOINC/ ...

  10. 自定义MyBatis

    自定义MyBatis是为了深入了解MyBatis的原理 主要的调用是这样的: //1.读取配置文件 InputStream in = Resources.getResourceAsStream(&qu ...