<!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. 【补充】Gitlab 部署 CI 持续集成

    上一篇:<劈荆斩棘:Gitlab 部署 CI 持续集成> 上一篇所配置的.gitlab-ci.yml: stages: - build - test before_script: - ec ...

  2. OWIN与Katana详解

    前言 我胡汉三又回来了,!!!!, 最近忙成狗,实在没空写博文,实在对不起自己,博客园上逛了逛发现 我大微软还是很给力的 asp.net core 1.0 .net core 1.0 即将发布,虽然. ...

  3. ASP.NET Core 中文文档 第二章 指南（2）用 Visual Studio 和 ASP.NET Core MVC 创建首个 Web API

    原文:Building Your First Web API with ASP.NET Core MVC and Visual Studio 作者:Mike Wasson 和 Rick Anderso ...

  4. 一款批量修改AE模板的工具

    一.需求分析 对于视频后期剪辑及相关从业人员来说,AE(After Effects)模板效果是一个不错的开始点.在模板效果的基础上,可以很快的做出各种炫酷的后期效果.但是在网上下载的模板工程中,往往包 ...

  5. scikit-learn一般实例之八:多标签分类

    本例模拟一个多标签文档分类问题.数据集基于下面的处理随机生成: 选取标签的数目:泊松(n~Poisson,n_labels) n次,选取类别C:多项式(c~Multinomial,theta) 选取文 ...

  6. Redis简单案例(四) Session的管理

    负载均衡,这应该是一个永恒的话题,也是一个十分重要的话题.毕竟当网站成长到一定程度,访问量自然也是会跟着增长,这个时候, 一般都会对其进行负载均衡等相应的调整.现如今最常见的应该就是使用Nginx来进 ...

  7. Entity Framework实现多列排序

    aList.OrderBy(a => a.WIndex).ThenBy(a=>a.KIndex) 类似sql:order by WIndex,KIndex

  8. asp.net创建事务的方法

    1.建立List用于存放多条语句 /// <summary> /// 保存表单 /// </summary> /// <param name="context& ...

  9. BZOJ3095 : 二元组

    \[\begin{eqnarray*}&&\sum_{i=0}^{n-1}\left(ki+b-a_i\right)^2\\&=&\sum_{i=0}^{n-1}\le ...

  10. spring mvc 和spring security配置 web.xml设置

    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmln ...