<!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实现的更多相关文章

  1. js轮播功能 标签自动切换 同页面多轮播js

    需要加入jquery 1.43及以上版本 下面还有个简单版,一个页面只支持一个轮播 同页面多轮播js <div> <div class="yt_content"& ...

  2. JS---案例：简单轮播图

    案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...

  3. 网站图片的轮播JS代码

    这是几个网站的轮播JS效果,实现图片按照时间来切换,目前有几个站实现该功能,特别是浴室柜网站改版前,以下就是JS具体内容可以自己改下路径就可以用的linkarr = new Array();picar ...

  4. 手把手原生js简单轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  5. 原生js简单轮播图 代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  6. 简单的音乐轮播JS

    首先说明一点,此篇文章只是为了回应一些博友的要求,本人并非专业搞js的,所以键盘侠和各路大神如果看到此文还请轻喷或者可以直接关掉页面~ 直接上代码: <div id="myboot&q ...

  7. js写的简单轮播图

    这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...

  8. 原生js实现简单轮播的淡入淡出效果

    实现这种淡入淡出的轮播关键在于css的一种设置  首先它不能像传统的轮播显示隐藏 或者左右浮动 他应该让其固定定位使其重叠在一起  达到这种效果  然后设置c3动画属性 transition:1s; ...

  9. 原生js写简单轮播图方式１－从左向右滑动

    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...

随机推荐

  1. 《你不知道的JavaScript》整理（二）——this

    最近在读一本进阶的JavaScript的书<你不知道的JavaScript(上卷)>,这次研究了一下“this”. 当一个函数被调用时,会创建一个活动记录(执行上下文). 这个记录会包含函 ...

  2. 浅谈利用SQLite存储离散瓦片的思路和实现方法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 在多个项目中涉及到互联网地图的内网显示,通过自制工具完成了互联 ...

  3. 8.JAVA之GUI编程键盘码查询器

    程序使用说明: 1.本程序由于是java代码编写,所以运行需安装jdk并配置好环境变量. 2. 复制java代码到记事本内,另存为Keyboard_events.java: 3.复制批处理代码到记事本 ...

  4. How to implement equals() and hashCode() methods in Java[reproduced]

    Part I:equals() (javadoc) must define an equivalence relation (it must be reflexive, symmetric, and ...

  5. 用python实现最长公共子序列算法(找到所有最长公共子串)

    软件安全的一个小实验,正好复习一下LCS的写法. 实现LCS的算法和算法导论上的方式基本一致,都是先建好两个表,一个存储在(i,j)处当前最长公共子序列长度,另一个存储在(i,j)处的回溯方向. 相对 ...

  6. Uploadify 结合 Web API 2 上传问题

    最近使用jQuery.Uploadify和Web API配合来做上传,碰到问题,还木有办法解决,记录一下: 环境:jQuery 1.10.2,Uploadify 3.2.1,SWFObject 2.2 ...

  7. UITableViewCell单元格的删除、插入、移动

    UITableViewDelegate的方法      设置编辑模式中得cell的编辑样式(删除或插入)      - (UITableViewCellEditingStyle)tableView:( ...

  8. 【手记】为windows2008建个睡眠快捷方式

    ----------------201607041343更新---------------- 在另一台电脑上SetSystemPowerState又不好使了,执行了根本没反应.又回头来试SetSusp ...

  9. α-β剪枝算法的java语言实现（非常实用）

    利用α-β剪枝算法,对下图所示的博弈树进行搜索,搜索得到根节点选择的走步,以及没有必要进行评估的节点,并求出给出在何处发生了剪枝,以及剪枝的类型(属于α剪枝还是β剪枝). 注:□表示MIN节点:○表示 ...

  10. 使用命令 gradle uploadArchives 的异常： Unable to initialize POM pom-default.xml: Failed to validate POM for project

    在使用:gradle uploadArchives 命令对项目进行上传maven时,常常遇到如下报错: 这时候要仔细的检查一下build.gradle文件中的dependencies内容,很多时候是由 ...