<!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. Linux C 字符函数 getchar()、putchar() 与 EOF 详解

    首先给出<The_C_Programming_Language>这本书中的例子: #include <stdio.h> int main() { int c; c = getc ...

  2. PF_INET 和 AF_INET 的区别

    在写网络程序的时候,建立TCP socket: sock = socket(PF_INET, SOCK_STREAM, 0); 然后再绑定本地地址或连接远程地址时需要初始化sockaddr_in结构, ...

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

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

  4. Is there a difference between `==` and `is` in Python?

    There is a simple rule of thumb to tell you when to use == or is. == is for value equality. Use it w ...

  5. sql server中将一个字段根据某个字符拆分成多个字段显示

    sql server 数据库中某张表(Person)的数据信息是: ID Address 1 平山花园-4单元-12幢-203 2 香山花园-3单元-22幢-304 现在有需求是,将地址信息显示形式改 ...

  6. Windows无法安装到GPT分区的磁盘的解决方法

    thinkpad 预装win8的机子,硬盘采用gpt分区,在重新安装其它系统的时候是无法安装的,会提示“windows无法安装到这个磁盘,选中的磁盘采用GPT分区 形式".所以先采用下面的方 ...

  7. Linux常用命令学习3---（文件的压缩和解压缩命令zip unzip tar、关机和重启命令shutdown reboot……）

    1.压缩和解压缩命令    常用压缩格式:.zip..gz..bz2..tar.gz..tar.bz2..rar .zip格式压缩和解压缩命令        zip 压缩文件名 源文件:压缩文件   ...

  8. JVM 1.6 GC

    JVM调优是一门艺术. JVM调优的重点是减少Major GC的次数,因为Major GC会暂停程序比较长的时间.如果Major GC的次数比较多,意味着应用程序的JVM内存参数需要调整. JVM内存 ...

  9. 11g新特性-dba_users安全性的一些增强

    1.dba_user表的password(除了GLOBAL和EXTERNAL的密码)不再保存密码. 查询10g的dba_user表 SQL> select username,password f ...

  10. mysql数据库的安装与使用

    ubuntu下面的mysql安装 sudo apt-get install mysql-server 安装后,登陆 mysql -u root -p mysql -h 主机名 -u 用户名 -p -h ...