<!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. nyoj 448 寻找最大数（贪心专题）

    寻找最大数 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 请在整数 n 中删除m个数字, 使得余下的数字按原次序组成的新数最大, 比如当n=920813467185 ...

  2. Redis学习 - 配置属性：bind

    bind这个属性很容易理解成限制可以访问的IP地址,其实是指Redis服务器可以选择监听来自哪个网卡的访问请求.我们再用的时候一般都只有一个网卡,所以只能写本机的IP地址或者回路地址.否则在启动服务器 ...

  3. C#高级编程笔记 Day 7， 2016年9月 19日 （泛型）

    1.协变和抗变 泛型接口的协变 如果泛型类型用 out  关键字标注,泛型接口就是协变的.这也意味着返回类型只能是 T. 接口IIndex 与类型T 是协变的,并从一个制度索引器中返回这个类型. pu ...

  4. OpenCV 2.4.13 编译使用(VS2015下)

    OpenCV2.4.13编译(VS2015) 这里给出已经编译好的的下载路径.包括Win64的debug和release版本. OpenCV for MSVC14 Win64 1.下载OpenCV源码 ...

  5. Python复习之下划线的含义

    __xx__ 系统定义名字 __xx 双下划线的表示的是私有类型的变量.只能是允许这个类本身进行访问了.连子类也不可以 _xx 单下划线 不能用'from moduleimport *'导入 即保护类 ...

  6. 检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(转)

    我们将ASP.NET程序从IIS6移植到IIS7,可能运行提示以下错误: HTTP 错误 500.23 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP.N ...

  7. iOS 8.0后使用UIAlertController

    iOS 8的新特性之一就是让接口更有适应性.更灵活,因此许多视图控制器的实现方式发生了巨大的变化.全新的UIPresentationController在实现视图控制器间的过渡动画效果和自适应设备尺寸 ...

  8. c/c++字符串定义及使用的对比

    c/c++中使用字符串的频率还是比较高的,下面就字符串的不同定义及其使用方法做一些对比 字符串一般有以下三种定义方法: 1.char *p="hello"; 2.char str[ ...

  9. 【linux】su、sudo、sudo su、sudo -i的用法和区别

    来源:http://bbs.csdn.net/topics/390938651 sudo : 暂时切换到超级用户模式以执行超级用户权限,提示输入密码时该密码为当前用户的密码,而不是超级账户的密码.不过 ...

  10. ubuntu 下安装 cx_Oracle库

    1.下载3个zip包: 下载地址:http://www.oracle.com/technetwork/database/features/instant-client/index-097480.htm ...