简易版图片轮播as
2016-02-24 16:54
495 查看
滑动轮播
在后续修改中，添加了左右箭头和导航条，但在左右箭头点击之后，立即移开（未等下一张图片轮播完成）会出现轮播停止的情况，该bug下次更新修复
渐显渐隐轮播
在后续修改中，添加了左右箭头和导航条，但在左右箭头点击之后，立即移开（未等下一张图片轮播完成）会出现轮播停止的情况，该bug下次更新修复
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
position: relative;
overflow: hidden;
width:730px;
height: 454px;
margin:0 auto;
}
button{
position: absolute;
display: inline-block;
width: 50px;
height: 70px;
color: #fff;
font-size: 40px;
padding-bottom: 10px;
cursor: pointer;
border: 1px solid rgba(54,54,54,0.4);
}
button:focus{
outline: none;
}
.arrow_left{
top: 200px;
padding-left: 2px;
background-color: rgba(54,54,54,0.4);
}
.arrow_right{
top: 200px;
right: 0;
padding-right: 2px;
background-color: rgba(54,54,54,0.4);
}
ul{
position: absolute;
bottom: 10px;
left: 300px;
list-style: none;
}
li{
float: left;
color: #fff;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
margin-left: 10px;
background-color: #000;
border-radius: 10px;
cursor: pointer;
}
.pic{
width:6570px;
height:454px;
float:left;
}
img{
float:left;
}
li.red{
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<div class="icon_arrow">
<button class="arrow_left"><</button>
<button class="arrow_right">></button>
<ul>
<li class="red">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="pic">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
</div>
</div>
<script src="jquery-1.11.3.js"></script>
<script type="text/javascript">
var count=4;//记录图片的总数
var current=0;//记录播放到第几张图片
var width=parseInt(window.getComputedStyle($("#box")[0]).width);//获取最终盒子宽度
var arrowLeft=$(".arrow_left");//获取左箭头对象
var arrowRight=$(".arrow_right");//获取右箭头对象
var box=$("#box");
var pic=$(".pic");//获取图片组对象
var ul=$("ul");//获取进度条对象
var delRight=true;//定义原克隆象是否删除
var delLeft=true;//定义原克隆象是否删除
var timer=null;//定义定时器清除值
function moveLeft(){//逆向轮播方法，点击左箭头情况
if( current == 0 ){//轮播第四张图片
pic[0].style.transition = "margin-left 0s linear";
if(delLeft==true){
pic.append(pic.children().clone());//复制图片，追加到父元素末尾
delLeft=false;
}
pic[0].style.marginLeft= -width * (current+4) + "px";
current=4;
}
current--;
if(current==3){//进度条小圆点跟随
$(ul.children()[3-current]).removeClass('red');
$(ul.children()[current]).addClass('red');
}
if(current<4){//进度条小圆点跟随
$(ul.children()[current+1]).removeClass('red');
$(ul.children()[current]).addClass('red');
}
if(current<1){
pic.find("img:gt(3)").remove();//移除旧的4张图片
delLeft=true;
delRight=true;
}
setTimeout(function(){
pic[0].style.transition = "margin-left 1s linear";
pic[0].style.marginLeft = -width * current + "px";//图片位移距离
},50);
}
function moveRight(){//正向轮播方法，点击右箭头情况
console.log(1);
if( current == 0 ){//正向轮播第一张图片
pic[0].style.transition = "margin-left 1s linear";
if(delRight==true){
pic.append(pic.children().clone());//复制图片，追加到父元素
delRight=false;
}
}
current++;
if(current==4){//进度条小圆点跟随
$(ul.children()[current-1]).removeClass('red');
current=0;
$(ul.children()[current]).addClass('red');
current=4;
}
if(current!=4){//进度条小圆点跟随
$(ul.children()[current-1]).removeClass('red');
$(ul.children()[current]).addClass('red');
}
pic[0].style.marginLeft = -width * current + "px";//图片位移距离
if( current > 3 ){//轮播最后一张图片
clearInterval(timer);
setTimeout(function(){//实现最后一张到第一张无缝连接
pic[0].style.transition = "margin-left 0s linear";//消除滑动动画
pic.find("img:lt(4)").remove();//移除旧的4张图片
pic[0].style.marginLeft = 0;//恢复marginLeft初始值
current = 0;
delRight=true;
delLeft=true;
timer=setInterval(moveRight,4000);//重新开始新轮播
},2000);
}
}
function clickArrowRight(){//点击右箭头情况
moveRight();
PreventContinuousClick(arrowRight[0]);
}
function clickArrowLeft(){//点击左箭头情况
moveLeft();
PreventContinuousClick(arrowLeft[0]);
}
function PreventContinuousClick(obj){//防止连续点击
obj.disabled=true;
setTimeout(function(){
obj.disabled=false;
clearTimeout(timer);//清除到第一张会重新轮播的定时器
},2000);
}
function circleRun(e){//点击小圆点跳转功能
clearInterval(timer);
clearTimeout(timer);
var target=e.target;
pic[0].style.transition = "margin-left 1s linear";
pic[0].style.marginLeft = -width * (target.innerHTML-1) + "px";//图片位移距离
current=target.innerHTML-1;
ul.children().removeClass("red");
$(target).addClass('red');
console.log(target.innerHTML);
if(current==3&&pic.children().length<8){
pic.append(pic.children().clone());//复制图片，追加到父元素
}
}
ul.click(circleRun);
arrowRight.click(clickArrowRight);
arrowLeft.click(clickArrowLeft);
timer=setInterval(moveRight,4000);
box.mouseenter(function(event) {
clearInterval(timer);
clearTimeout(timer);
});
box.mouseleave(function(event) {
timer=setInterval(moveRight,4000);
});
</script>
</body>
</html>渐显渐隐轮播
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
#d1{
position: relative;
width: 167px;
height: 220px;
border:1px solid red;
margin-left: 100px;
}
li{
position: absolute;
opacity: 0;
transition: opacity 0.3s linear;
}
.show{
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">
<ul>
<li id="li_1" class="show">
<img src="1.jpg" height="220" width="167" alt="">
</li>
<li id="li_2">
<img src="2.jpg" height="220" width="167" alt="">
</li>
<li id="li_3">
<img src="3.jpg" height="220" width="167" alt="">
</li>
</ul>
</div>
<script type="text/javascript">
var count=1;
function changePic(num){//该案例只有3张图片，需要根据实际图片写入参数
var countCur=count+1;
var liHide=document.getElementById("li_"+count);//找到当前需要隐藏的图片
if(count==num){
countCur=1;
}
var liShow=document.getElementById("li_"+countCur);//找到当前需要显示的图片
liHide.style.opacity=0;
liShow.style.opacity=1;
if(count==num){
count=1;
}else{
count++;
}
}
setInterval("changePic(3)",600);//因为函数句柄不能带参数，所以写成字符串你的形式可以使达到效果，或者写一个返回值是一个函数
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于activiti流程通过、驳回、会签、转办、中止、挂起等核心操作功能的封装
- C#原理
- asp.net 操作ftp类 从网上找的先存起来以后用到了看下
- React-Native 原生模块（iOS）调用
- markdown编辑器使用一
- LuaNote
- iOS开发-block 简单使用
- Java Thread join() 的用法
- Linux文件目录权限管理
- 快速Android开发系列通信篇之EventBus
- 用Android网络通信技术，在网络上直接传输对象
- 限制Apache每秒新建连接数
- 基于Struts2的供求信息网设计(二)
- Python 学习.. 将持续更新...
- 安卓计算应用程序缓存大小以及清除缓存
- 39.Evaluate the following command:CREATE TABLE employees(employee_id NUMBER(2) PRIMARY KEY
- CSS未知宽高元素水平垂直居中
- .NET 经典面试题
- SQL中 char varchar和nvarchar的区别
- 日常讨论问题及相应解析