简单轮播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写简单轮播图方式１－从左向右滑动
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...
随机推荐
- 细说Java主流日志工具库
概述 在项目开发中,为了跟踪代码的运行情况,常常要使用日志来记录信息. 在Java世界,有很多的日志工具库来实现日志功能,避免了我们重复造轮子. 我们先来逐一了解一下主流日志工具. java.util ...
- [Spring]支持注解的Spring调度器
概述 如果想在Spring中使用任务调度功能,除了集成调度框架Quartz这种方式,也可以使用Spring自己的调度任务框架. 使用Spring的调度框架,优点是:支持注解(@Scheduler),可 ...
- Javascript本地存储小结
前言 总括:详细讲述Cookie,LocalStorge,SesstionStorge的区别和用法. 人生如画,岁月如歌. 原文博客地址:Javascript本地存储小结 知乎专栏&& ...
- 分享一个单点登录、OAuth2.0授权系统源码(SimpleSSO)
SimpleSSO 关于OAuth 2.0介绍: http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html 系统效果: 登录界面: 首页: 应用界面: ...
- 【无私分享：ASP.NET CORE 项目实战（第十二章）】添加对SqlServer、MySql、Oracle的支持
目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 增加对多数据库的支持,并不是意味着同时对多种数据库操作,当然,后面,我们会尝试同时对多种数据库操作,这可能需要多个上下文,暂且 ...
- shell编程
最吸引人的莫过于及时看到成果的努力,echo就是最好的初学者反馈函数,因为它的存在你可以及时的打印出结果. 1.分支 if[ ]:then elif ;then else fi 2.简单的循环,循环是 ...
- django+mysql学习笔记
这段时间在学习mysql+django的知识点.借此记录以下学习过程遇到的坑以及心得. 使用的工具是navicat for mysql python 2.7.12 mysql-python 1.2.3 ...
- Java中的多线程你只要看这一篇就够了
学习Java的同学注意了!!! 学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入Java学习交流群,群号码:279558494 我们一起学Java! 引 如果对什么是线程.什么是进程仍存有疑惑, ...
- Debug JDK变量显形
本文面向的朋友 本文主要说明在使用Eclipse Debug JDK时,看不到变量值的解决办法. 如果您看到上面绿色字体表示不敢兴趣,请一定果断back,如果您不爽,请在下面使劲的拍. Debug J ...
- 大量数据快速导出的解决方案-Kettle
1.开发背景 在web项目中,经常会需要查询数据导出excel,以前比较常见的就是用poi.使用poi的时候也有两种方式,一种就是直接将集合一次性导出为excel,还有一种是分批次追加的方式适合数据量 ...