js 简单的滑动1
作者:Lellansin 转载请标明出处,谢谢
首先我们要实现一个简单的滑动,三张图、点击左边向左滑动,点右向右滑,碰到临界值的时候就不能滑动。
这个简单滑动的原理是,通过改变边距来达到移动图片的效果,比如向右滑动的时候,让左边li的左边距不断减小来移动图片,而右边的li(向左浮动)会自动靠过来,等到图片移出center_window之后,再设置左边li的display为none使其隐藏。在时间恰当好的情况下,看起来就好像是当前的图片向左滑动,而右边的图片滑了过来。
要实现这一功能并不难,我们首先需要把静态页面准备好。
<div id="window">
<div id="left_arrow"></div>
<div id="center_window">
<ul>
<li id="list_0"><img src="img/1.jpg" /></li>
<li id="list_1"><img src="img/2.jpg" /></li>
<li id="list_2"><img src="img/3.jpg" /></li>
</ul>
</div>
<div id="right_arrow"></div>
</div>
整体一个window,里面包含三个部分,分别是向左和向右的箭头,以及中间的显示列表。
<style type="text/css">
*{ margin:0; padding:0; }
li{ list-style: none; }
#window{ height:200px; width:230px;margin:0 auto; overflow:hidden; }
#center_window{ height:200px; width:160px; float:left; }
#center_window ul{ height:200px; width:600px; }
#center_window ul li{ height:200px; width:160px; float:left; }
#center_window img{ display:block; margin:5px auto; }
#left_arrow{ height:200px; width:35px; float:left; background:url("left.png") no-repeat scroll 5px 75px #fff; }
#left_arrow:hover{ cursor: pointer; }
#right_arrow{ height:200px; width: 35px; float:right; background:url("right.png") no-repeat scroll 0px 75px #fff; }
#right_arrow:hover{ cursor: pointer; }
</style>
以上是css部分,我们将显示的图片宽高需在160px和200px以内。
<script>
//全局计数器
var count = 0; function sliderLeft(){
if(count>0){
count--;
}
//获取当前要操作的li
var pic = document.getElementById("list_"+count);
//若上一个li已经被隐藏,表示已经到了第一个li
if(!(pic.style.display == "none")){
return;
}
//显示li
pic.style.display = "";
var i=250;
var timer = setInterval(function(){
if(i<251){
//通过改变边距来滑动
pic.style.margin = "0 0 0 -"+ i +"px";
i-=50;
}else{
// 清楚计时器
clearInterval(timer);
}
},80);
//80为每80微秒执行一次,通过这个执行间隔与上方每次减少的像素来控制滑动的速度 } function sliderRight(){
if(count<2){
count++;
}
/** count-1 是为了让计数器计到当前的li,
/* 否则计数器未计到当前的li,会导致向左滑动时向左多减一个
**/
var pic = document.getElementById("list_"+(count-1));
var i=0;
var timer1 = setInterval(function(){
if(i<251){
pic.style.margin = "0 0 0 -"+ i +"px";
i+=50;
}else{
// 滑出边界后使其隐藏
pic.style.display = "none";
clearInterval(timer1);
}
},80);
}
</script>
简单的js已经出现,具体已经有注释,注意getElementById的时候里面的id要跟li的id相对应。
整体代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js滑动</title> <style type="text/css">
*{ margin:0; padding:0; }
li{ list-style: none; }
#window{ height:200px; width:230px; margin:0 auto; overflow:hidden; }
#center_window{ height:200px; width:160px; float:left; }
#center_window ul{ height:200px; width:600px; }
#center_window ul li{ height:200px; width:160px; float:left; }
#center_window img{ display:block; margin:5px auto; }
#left_arrow{ height:200px; width:35px; float:left; background:url("left.png") no-repeat scroll 5px 75px #fff; }
#left_arrow:hover{ cursor: pointer; }
#right_arrow{ height:200px; width: 35px; float:right; background:url("right.png") no-repeat scroll 0px 75px #fff; }
#right_arrow:hover{ cursor: pointer; }
</style> </head> <body>
<div id="window">
<div id="left_arrow" onclick="sliderLeft()"></div>
<div id="center_window">
<ul>
<li id="list_0"><img src="img/1.jpg" /></li>
<li id="list_1"><img src="img/2.jpg" /></li>
<li id="list_2"><img src="img/3.jpg" /></li>
</ul>
</div>
<div id="right_arrow" onclick="sliderRight()"></div>
</div> <script> var count = 0; function sliderLeft(){
if(count>0){
count--;
}
var pic = document.getElementById("list_"+count);
if(!(pic.style.display == "none")){
return;
}
pic.style.display = "";
var i=250;
var timer = setInterval(function(){
if(i<251){
pic.style.margin = "0 0 0 -"+ i +"px";
i-=50;
}else{
clearInterval(timer);
}
},80); }
function sliderRight(){
if(count<2){
count++;
}
var pic = document.getElementById("list_"+(count-1));
var i=0;
var timer1 = setInterval(function(){
if(i<251){
pic.style.margin = "0 0 0 -"+ i +"px";
i+=50;
}else{
pic.style.display = "none";
clearInterval(timer1);
}
},80);
}
</script>
</body>
</html>
js 简单的滑动1的更多相关文章
- js 简单的滑动4
js 简单的滑动教程(四) 作者:Lellansin 转载请标明出处,谢谢 在大概的了解滑动的基本原理和怎么去实现之后,现在我们将更深入的去讨论js的滑动. 相信细心的朋友应该已经发现了,在本教程 ...
- js 简单的滑动3
js 简单的滑动教程(三) 作者:Lellansin 转载请标明出处,谢谢 在前面的基础上(js 简单的滑动教程(二)),我们可以再添加一些功能使程序的可用性更高. 比如自动为图片的LI赋id值, ...
- js 简单的滑动2
js 简单的滑动教程(二) 作者:Lellansin 转载请标明出处,谢谢 现在我们让滑动多一个功能,三张图.点击左边向左滑动,点右向右滑,碰到临界值的时候可以循环滑动 原理也很将简单,用posi ...
- js实现图片滑动显示效果
js实现图片滑动显示效果 今天用户提出一个需求,要实现一个滑动显示新闻列表的效果,具体就是图片新闻自动滑动显示,鼠标移上去就停止滑动,移开就继续滑动:效果如下: 第一:先用HTML和CSS实现显示,主 ...
- baguetteBox.js - 简单易用的 lightbox 插件
baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件,支持滑动手势在移动设备上使用.纯 JavaScript 实现,不依赖第三方库和插件,赶紧来体验吧. 在线演示 ...
- js简单 图片版时钟,带翻转效果
js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- js简单操作Cookie
贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...
- js简单弹出层、遮罩层
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...
- Tourist.js – 简单灵活的操作指南和导航插件
Tourist.js 是一个基于 Backbone 和 jQuery 开发的轻量库,帮助你在应用程序创建简单易用的操作指南和导航功能.相比网站,它更适合用于复杂的,单页网站类型的应用程序.Touris ...
随机推荐
- Python实现 "反转字符串中的元音字母" 的方法
#coding=utf- def reverseVowels(s): """ :type s: str :rtype: str """ sS ...
- mysql 遍历所有表并条件查询
use eepm_push; DROP PROCEDURE IF EXISTS FountTable; delimiter $$ create procedure FountTable() begin ...
- 阿里云服务器 nginx 公网 IP 无法访问 浏览器
配置完成 nginx 后, 在浏览器输入:http://ip,正常的话,会有页面,welcome to nginx但是浏览器显示访问失败 主要从两个方面找原因,一个是阿里云的安全组和服务器的防火墙是否 ...
- django -xadmin 详解 功能实现及orm 的复习
django 在xadmin中自定义内容的变量及优化汇总 一: 首先下载xadmin pip install git+git://github.com/sshwsfc/xadmin.git@djang ...
- 【转载】 LSTM构建步骤以及static_rnn与dynamic_rnn之间的区别
原文地址: https://blog.csdn.net/qq_23981335/article/details/89097757 --------------------- 作者:周卫林 来源:CSD ...
- 通过SOCKS代理渗透整个内网
https://blog.csdn.net/SouthWind0/article/details/83111044 通过SOCKS代理渗透整个内网 1.背景 经过前期的渗透工作,我们现在已经成功找到了 ...
- 转 Shell判断字符串包含关系的几种方法
https://blog.csdn.net/rznice/article/details/71086839 Shell中判断字符串包含关系的方法: 1.通过grep来判断:12str1="a ...
- Windows10不能进入睡眠
问题 有时候暂时不使用计算机(Windows10笔记本),既想省电,又想回来之后快速启动,一般会选择让计算机进入睡眠状态.睡眠状态下,基本上只有内存通电,保存着之前的工作状态,可以快速恢复. 但是最近 ...
- webbench源码学习笔记
学习内容 一共五百多行代码,其中包含了linux编程常用的API.可以通过学习源码,把不熟悉的API练习练习. 1 如何使用webbench (1)查看参数帮助 (2)运行方法 即以上模拟30个客户端 ...
- python实践项目四:猜数字游戏
题目要求:在1-20中随机生成一个数字,你来猜,只有6次机会. 举例一: #!/usr/bin/python # -*- coding: UTF-8 -*- import random secretN ...