简单轮播js实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>rotate</title>
<link rel="stylesheet" href="css/index.css" />
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
#rotateImg{
width: 400px;
height: 220px;
margin:100px auto;
position: relative;
font:12px helvetica;
overflow: hidden;
}
img{
width: 400px;
height: 220px;
}
#rotateImg>ul{
position: absolute;
bottom:15px;
left:50%;
margin-left:-60px;
}
#rotateImg>ul>li{
float: left;
/*list-style: none;*/
cursor: pointer;
width: 16px;
height: 16px;
margin-right:10px;
text-align: center;
line-height: 16px;
border-radius: 8px;
background: #fff;
}
#rotateImg>ul>li.light{
background:red;
color:#fff;
}
#imgcontainer{
width: 100%;
}
#imgcontainer>ul{
width: 1000%;
height: 220px;
list-style: none;
position: absolute;
}
#imgcontainer>ul li{
float:left;
}
.arrows{
position: absolute;
width: 100%;
height: 40px;
top:50%;
margin-top:-20px;
display: none;
color: red;
}
.arrows .prev, .arrows .next{
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
font:600 30px/40px "simsun";
background:rgba(0,0,0,0.2);
cursor: pointer;
}
.arrows .prev{
float:left;
}
.arrows .next{
float:right;
}
</style>
</head>
<body>
<div id="rotateImg">
<div id="imgcontainer">
<ul>
<li><a href="#"><img src="img/ppt/Familia--Stark.gif" alt="" /></a></li>
<li><a href="#"><img src="img/ppt/game-of-thrones-deaths-09.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/ppt/margaery-and-sansa.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/ppt/Robb-Stark-Game-Of-Thrones.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/ppt/starks.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/ppt/game-of-thrones-has-been-an-integral-part.jpg" alt="" /></a></li>
</ul>
</div>
<ul>
</ul>
<div class="arrows">
<div class="prev"><</div>
<div class="next">></div>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
move("rotateImg");
}
function animation(obj,target){
var speed;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
speed = (target - obj.offsetLeft)/10;
speed = (speed>0?Math.ceil(speed):Math.floor(speed));
obj.style.left = obj.offsetLeft+speed+"px";
if(obj.offsetLeft==target){
clearInterval(obj.timer);
}
}, 20)
}
function move(id){
var rotateImg = document.getElementById(id);
var imgUl = rotateImg.children[0].children[0];
var imgList=imgUl.children;
var dotUl = rotateImg.children[1];
var arrows = rotateImg.children[2];
var prev = arrows.children[0];
var next = arrows.children[1];
var width = rotateImg.offsetWidth;
var num = 0;
//clone first image
var newLiFirstImgClone = imgUl.children[0].cloneNode(true);
imgUl.appendChild(newLiFirstImgClone);
//1、create dot according to number of images and append it
for(var i=1;i<imgList.length;i++){
var newDot = document.createElement("li");
newDot.innerHTML = i;
dotUl.appendChild(newDot);
}
var dotLiArray = dotUl.children;
//light first dot
light(num);
//2 click dot,transform image and light dot
for(var k =0;k<dotLiArray.length;k++){
dotLiArray[k].index = k;
dotLiArray[k].onclick=function(){
num = this.index;
light(num);
animation(imgUl,-num*width);
}
}
function light(index){
for(var j=0;j<dotLiArray.length;j++){
dotLiArray[j].className="";
}
dotLiArray[index].className = "light";
}
// 3、next
next.onclick=autoplay;
function autoplay(){
num++;
if(num==imgUl.children.length-1){
light(0);
//if img comes to the clone img,light the first dot
}else if(num==imgUl.children.length){
//if img is in the end ,set position to second img in a flash
imgUl.style.left=0;
num = 1;
light(num);
}else{
light(num);
}
animation(imgUl,-num*width);
}
//4、prevent
prev.onclick=function(){
num--;
if(num==-1){
//if image comes to the end then transform it before the clone image
imgUl.style.left=-width*(imgUl.children.length-1)+"px";
//change img position suddenly
num = imgUl.children.length-2;
}
light(num)
animation(imgUl,-num*width);
}
//5 when mouse move over elements,stop rotate and show arrow
rotateImg.onmouseover=function(){
clearInterval(rotateImg.timer);
arrows.style.display="block";
}
//6 when mouse out star rotate and hide arrow
rotateImg.onmouseout=function(){
clearInterval(rotateImg.timer);
arrows.style.display="none";
rotateImg.timer = setInterval(function(){
autoplay();
}, 1000)
}
//clearInterval and set original state as autoplay
clearInterval(rotateImg.timer);
rotateImg.timer = setInterval(function(){
autoplay();
}, 1000)
}
</script>
</body>
</html>
简单轮播js实现的更多相关文章
- js轮播功能 标签自动切换 同页面多轮播js
需要加入jquery 1.43及以上版本 下面还有个简单版,一个页面只支持一个轮播 同页面多轮播js <div> <div class="yt_content"& ...
- JS---案例：简单轮播图
案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...
- 网站图片的轮播JS代码
这是几个网站的轮播JS效果,实现图片按照时间来切换,目前有几个站实现该功能,特别是浴室柜网站改版前,以下就是JS具体内容可以自己改下路径就可以用的linkarr = new Array();picar ...
- 手把手原生js简单轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- 原生js简单轮播图 代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- 简单的音乐轮播JS
首先说明一点,此篇文章只是为了回应一些博友的要求,本人并非专业搞js的,所以键盘侠和各路大神如果看到此文还请轻喷或者可以直接关掉页面~ 直接上代码: <div id="myboot&q ...
- js写的简单轮播图
这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...
- 原生js实现简单轮播的淡入淡出效果
实现这种淡入淡出的轮播关键在于css的一种设置 首先它不能像传统的轮播显示隐藏 或者左右浮动 他应该让其固定定位使其重叠在一起 达到这种效果 然后设置c3动画属性 transition:1s; ...
- 原生js写简单轮播图方式１－从左向右滑动
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...
随机推荐
- 从零开始编写自己的C#框架——框架学习补充说明
非常感谢轩辕公子提出了对本框架的看法与意见,所以这里也将回复贴出来,让大家都了解一下 本系列的快速开发指的是,框架构建完毕后,在这个基础上开发新功能非常快捷方便,基本不用写太多代码就可以在短时间内完成 ...
- Java Collection开发技巧
Java Collection(集合) 集合中的一些技巧: 通过Collections类的静态方法,可以对集合进行一些操作 1 java.util.List<Integer> number ...
- 结合ABP源码实现邮件发送功能
1. 前言 2. 实现过程 1. 代码图(重) 2.具体实现 2.1 定义AppSettingNames及AppSettingProvider 2.2 EmailSenderConfiguration ...
- USB设备(移动硬盘、鼠标)掉电掉驱动的两种解决方案
症状: 当你发现"移动硬盘图标"经常无故消失,又自己出现时. 你可以把这个现象称之为"掉电" or "掉驱动". 遇到这种情况,相当不爽. ...
- 物联网框架SuperIO 2.2.9和ServerSuperIO 2.1同时更新，更适用于类似西门子s7-200发送多次数据，才能读取数据的情况
一.解决方案 二.更新内容 1.修改IRunDevice接口,把void Send(io,bytes)改成int Send(io,bytes).2.修改网络控制器,发送数据不直接使用IO实例,改为使用 ...
- 每天一个设计模式-2 外观模式（Facade）
每天一个设计模式-2 外观模式(Facade) 1.生活中的示例 客户想要购买一台电脑,一般有两种方法: 1.自己DIY,客户需要知道组成电脑的所有电子器件,并且需要熟悉那些配件,对客户要求较高. ...
- HTML5应用程序缓存Application Cache
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- low security dvwa--SQL Injection(Blind)
1.输入单引号,结果如下: 2.输入永真式 ' and 1=1; -- 结果如下: 多次测试,如果输入的条件为假,就会返回1中的结果,为真则返回2中的结果,由此说明这属于SQL盲注. 3.猜解用户名长 ...
- 【转】iOS UIApplication详解
1.状态栏UIStateBar的设置是在UIApplication里面设置的,它包含4中风格 2. - (void)beginIgnoringInteractionEvents; (void)endI ...
- Android中的 init.rc文件简介
init.rc脚本是由Android中linux的第一个用户级进程init进行解析的. init.rc 文件并不是普通的配置文件,而是由一种被称为"Android初始化语言"(An ...