<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
ul{
list-style: none;
}
#div1{
width: 100%;
overflow: hidden;
position: relative;
}
#div1 img{
width: 100%;

}
.ul1{
position: absolute;
top:40%;
width: 100%;
}
.ul1 li{
width: 25px;
height: 50px;
}
.ul1 li div{
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
}
.ul1 #prev{

float: left;
margin-left: 10%;
}
.ul1 #prev div{
border-right: 25px solid white;
}
.ul1 #next{

float: right;
margin-right: 10%;}
.ul1 #next div{
border-left: 25px solid white;
}
.ul2{
position: absolute;
bottom: 10px;
left: 40%;
}
.ul2 li{
float: left;
width: 20px;
height: 20px;
border-radius: 10px;

margin-right: 10px;
}
.ul2 li.black{
background: rgba(86,86,86,0.8);
}
.ul2 li.orange{
background: rgba(248,114,6,0.8);
}
</style>
</head>
<body>
<div id="div1">
<img src="Images/banner_1.jpg" alt="" title="" id="img1" />
<ul class="ul1">
<li id="prev">
<div></div>
</li>
<li id="next">
<div></div>
</li>
</ul>
<ul class="ul2" id="page">

</ul>
</div>
<script>
var div1,imgs,prev,next,ul2,lis,index=0;

//存放图片
var arr=[{id:1,src:"Images/banner_1.jpg",title:"",href:""},

{id:2,src:"Images/banner_2.jpg",title:"",href:""},

{id:3,src:"Images/banner_3.jpg",title:"",href:""},

{id:4,src:"Images/banner_longtou.jpg",title:"",href:""}];
var timer=null;
window.onload=function(){
div1=document.getElementById("div1");
imgs=div1.getElementsByTagName("img")[0];
prev=document.getElementById("prev");
next=document.getElementById("next");
ul2=document.getElementById("page");

//创建小点元素

for(var i=0,len=arr.length;i<len;i++){
var li=document.createElement("li");
li.className="black";
li.value=i;
li.onclick=liClick;
ul2.appendChild(li);
}
lis=ul2.getElementsByTagName("li");
lis[0].className="orange";
prev.onclick=prevCLick;
next.onclick=nextClick;
timer=setInterval(auto,3000);
}
//自动改变索引
function auto(){
index++;
if(index==arr.length){
index=0;
}
show();
}
//切换图片按钮颜色
function show(){
imgs.src=arr[index].src;
for(var i=0,len=lis.length;i<len;i++){
lis[i].className="black";
}
lis[index].className="orange";
}
function prevCLick(){
clearInterval(timer);
index--;
if(index<0){
index=arr.length-1;
}
show();
timer=setInterval(auto,3000);
}
function nextClick(){
clearInterval(timer);
index++;
if(index==arr.length){
index=0;

}
show();
timer=setInterval(auto,3000);
}
function liClick(){
clearInterval(timer);
index=this.value;
show();
timer=setInterval(auto,3000);


}
</script>
</body>
</html>

javascript平时例子⑧（大屏轮播）的更多相关文章

  1. 关于最近在做的一个js全屏轮播插件

    最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用m ...

  2. Vue与swiper想结合封装全屏轮播插件

    项目需求介绍: 1.页面图文混排, 2.点击图片后全屏展示图片,并在底部显示文字,如果没有则不显示 3.关闭全屏后依然停留在上次浏览的位置 4.浏览图片时,不管点击的哪张图片,全屏展示的时候也要显示这 ...

  3. 使用javascript,jquery实现的图片轮播功能

    使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...

  4. 使用JavaScript制作一个好看的轮播图

    目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...

  5. jQuery五屏轮播手风琴切换代码

    jQuery五屏轮播手风琴切换代码 在线演示本地下载

  6. Taro -- Swiper的图片由小变大3d轮播效果

    Swiper的图片由小变大3d轮播效果 this.state = ({ nowIdx:, swiperH:'', imgList:[ {img:'../../assets/12.jpg'}, {img ...

  7. 全屏banner及全屏轮播

    一.全屏banner 1.设置网页图片全屏banner <!DOCTYPE html> <html lang="en"> <head> < ...

  8. javascript无缝全屏轮播

    虽然平时能利用插件来实现,但是总是觉得,如果连个无缝轮播都写不出来,还玩个毛线: 其实现在还真的是玩毛线,因为代码都是别人的,不过嘛,很快就变成是我的啦! 代码还没封装成插件,其实我也还没弄清楚. 下 ...

  9. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

随机推荐

  1. 创建maven工程时总是带有后缀名Maven Webapp解决办法

    做项目时突然遇到了一个新问题,从前没有的,今天不知怎么了突然有了这个问题,maven创建web项目时多出了后缀名maven webapp ,很碍眼,而且访问路径还得删了,这个后缀名才可访问,所以找了答 ...

  2. PHP之static静态变量详解（一）

    什么是static静态变量?(以下为在C语言中的理解) 静态变量 类型说明符是static. 静态变量属于静态存储方式,其存储空间为内存中的静态数据区(在静态存储区内分配存储单元),该 区域中的数据在 ...

  3. HMTL判断ie版本

    html判断IE版本 1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> 2. <!--[if IE]> ...

  4. 《C++ 101条建议》学习笔记——第一章快速入门

    1.C++程序组成:a.编译指示,由#开始,不由分号结束.只是影响编译过程.b.声明语句,影响编译过程,编译结果中并不会生成对应的指令.只是告诉编译器一些信息.c.可执行过程语句,生成对应的指令.包括 ...

  5. jsp实验二

    1.编写一个简单的留言薄,写入留言提交后,显示留言内容 2.编写一个实现页面计数的计数器.思考,如果要求当刷新页面时,不增加计数. 3.编写一个简易购物车,实现向购物车添加商品.思考,如果增加清空购物 ...

  6. 【python】引用其他目录文件

    假设有 目录/A(a.py), 目录/B(b.py), 括号里是目录中的文件 在目录/A中编写a2.py,里面可以import a,但是不能import b 解决方法 import sys sys.p ...

  7. 安装学习nginx记录

    通过查看nginx目录下的log文件,发现80端口没有权限使用 查找文章发现: netstat -aon|findstr ":80" 有的进程ID占用多了80端口,看监听的端口 启 ...

  8. LATTICE 存储之FIFO的使用

    坑,,以后填 对于Lattice 的  FIFO 存储器分为两种,见下图: 这两个的主要区别是一个后面加DC一个不加,那这个DC是什么意思呢??DC这里是Dual  Clock的意思,也就是双时钟的意 ...

  9. 【C#】MVC项目中搭建WebSocket服务器

    前言 因为项目需要,前端页面中需要不断向后台请求获取一个及一个以上的状态值.最初的方案是为每个状态值请求都建立一个定时器循环定时发起Ajax请求,结果显而 易见.在HTTP1.1协议中,同一客户端浏览 ...

  10. Datatables JQuery插件

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax ...