<!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. R语言-用R眼看琅琊榜小说的正确姿势

    博客总目录:http://www.cnblogs.com/weibaar/p/4507801.html 目录: 零:写在前面的一些废话 一.R眼看琅琊榜的基本原理 1.导入数据 2.筛选数据 3.多条 ...

  2. 简单的方向传感器SimpleOrientationSensor

    SimpleOrientationSensor是一个简单的方向传感器.能够识别手机如下表的6种方向信息: SimpleOrientation枚举变量 方向 NotRotated 设备未旋转 Rotat ...

  3. 利用 PhpStorm、Idea 等 IDE 如何 运行/调试 Go 程序 ？

    以自己常用的 PhpStorm 为例 第一步:下载安装 Go插件 File -> Settings -> Plugins -> 输入关键字:Go 第二步:新建 Go项目 File - ...

  4. 292. Nim Game

    292. Nim Game You are playing the following Nim Game with your friend: There is a heap of stones on ...

  5. log4cxx

    1.简介 (1)Apache log4cxx当前是由Apache软件基金会进行维护.它是java中著名开源项目Apache log4j在c++中对应的日志框架.它是借助于APR(Apache Port ...

  6. errno.h

    linux 中c语言使用errno.h头文件来记录错误信息以及定义返回错误代码的宏. strerror(errno)打印错误信息 1. warning: implicit declaration of ...

  7. .deb包的安装方法

    deb是Debian linux的安装格式,跟redhat的rpm非常相似,最基本的安装命令是: dpkg -i file.deb dpkg是Debian Package的简写,是为Debian专门开 ...

  8. CSS初始化样式

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  9. 利用委托与Lambada创建和调用webapi接口

    前言 现在项目中用的是webapi,其中有以下问题:    1.接口随着开发的增多逐渐增加相当庞大. 2.接口调用时不好管理. 以上是主要问题,对此就衍生了一个想法: 如果每一个接口都一个配置文件来管 ...

  10. PHP日期与时间

    时间戳是自 1970 年 1 月 1 日(00:00:00 GMT)以来的秒数.它也被称为 Unix 时间戳(Unix Timestamp).Unix时间戳(Unix timestamp),或称Uni ...