图片切换.----so屌
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,div,ul,li {
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
a img {
border: none;
}
.wrap {
width: 100%;
overflow: hidden;
position: relative;
}
.wrap .prev,
.wrap .next {
height: 320px;
position: absolute;
left: -50%;
top: 0;
background-color: #999;
opacity: 0.7;
width: 100%;
}
.wrap .next {
left: auto;
right: -50%;
}
.wrap .prev:hover,
.wrap .next:hover {
opacity: 0.5;
}
.container {
width: 100%;
height: 320px;
}
.container ul {
height: 100%;
}
.container li {
width: 1000px;
height: 100%;
float: left;
}
.container li a,
.container li img {
display: block;
width: 100%;
height: 100%;
}
.page {
position: absolute;
left: 50%;
bottom: 10px;
display:none;
}
.page span {
float: left;
margin-right: 10px;
width: 20px;
height: 20px;
display: block;
cursor: pointer;
background: #999;
border-radius: 50%;
text-align: center;
color: #fff;
}
.page .select {
background: #f00;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container" id="container">
<ul>
<li><a href="1"><img src="http://www.hengqijy.com/uploadfile/2013/1031/20131031084228263.jpg"></a> </li>
<li><a href="2"><img src="http://www.hengqijy.com/uploadfile/2014/0315/20140315023711196.jpg"></a></li>
<li><a href="3"><img src="http://www.hengqijy.com/uploadfile/2014/0228/20140228091207797.jpg"></a></li>
<li><a href="4"><img src="http://www.hengqijy.com/statics/images/new_img/ksss.jpg"></a></li>
</ul>
</div>
<div class="prev" id="prev"></div>
<div class="next" id="next"></div>
<div id="page" class="page"></div>
</div>
<script type="text/javascript">
/*
* Slider constructor
* @param {Node} ele 容器节点
* @param {Int} index 默认显示第几张
*/
var Slider = function(ele, autoInterval){
autoInterval = parseInt(autoInterval, 10);
this.autoInterval = !isNaN(autoInterval) && Math.abs(autoInterval) || 3000;
this.ele = ele;
this.oList = ele.children[0];
this.items = this.oList.getElementsByTagName("li");
this.itemWidth = parseInt(this.items[0].offsetWidth, 10);
this.page = document.getElementById("page");
this.prevBtn = document.getElementById("prev");
this.nextBtn = document.getElementById("next");
this.init();
}
Slider.prototype = {
constructor: Slider,
init: function(){
this.oList.style.position = 'absolute';
this.oList.style.top = 0;
this.oList.style.left = 0; this.going = 0;
this.current = 1;
this.speed = 100;
this.timer = null;
this.inter = null;
this.lock = false;
this.wrapWidth = parseInt(this.ele.offsetWidth, 10);
this.pageCircles = null; this.prevBtn.style.marginLeft = -this.itemWidth/2 + 'px';
this.nextBtn.style.marginRight = -this.itemWidth/2 + 'px'; if(this.items.length > 2) {
this.setUp();
} else {
this.oList.style.left = (this.wrapWidth - this.itemWidth * this.items.length)/2 + 'px';
this.prevBtn.style.display = "none";
this.nextBtn.style.display = "none";
} this.oList.style.width = this.itemWidth * this.items.length + 'px'; },
setUp:function(){
var first1 = this.items[0].cloneNode();
first1.innerHTML = this.items[0].innerHTML; var first2 = this.items[1].cloneNode();
first2.innerHTML = this.items[1].innerHTML; var last1 = this.items[this.items.length-1].cloneNode();
last1.innerHTML = this.items[this.items.length-1].innerHTML; var last2 = this.items[this.items.length-2].cloneNode();
last2.innerHTML = this.items[this.items.length-2].innerHTML; this.oList.appendChild(first1);
this.oList.appendChild(first2);
this.oList.insertBefore(last1, this.items[0]);
this.oList.insertBefore(last2, this.items[0]); this.buildPage();
this.bindEvent();
this.slientGoTo();
this.doAnimate();
this.autoSlider();
},
autoSlider:function(){
var that = this;
if(this.autoInterval > 0) {
this.inter = setInterval(function(){
that.next();
}, this.autoInterval);
}
},
stopAutoSlider:function(){
clearInterval(this.inter);
},
buildPage:function(){
for(var i = 0,len = this.items.length - 4; i<len; i++) {
var circle = document.createElement('span');
circle.innerHTML = i + 1;
this.page.appendChild(circle);
}
this.pageCircles = this.page.getElementsByTagName('span');
this.addEvent(this.page, 'click', 'gotoIndex');
this.page.style.display = 'block';
},
bindEvent:function(){
this.addEvent(this.prevBtn, 'click', 'prev');
this.addEvent(this.nextBtn, 'click', 'next');
this.addEvent(this.ele, 'mouseover' , 'stopAutoSlider');
this.addEvent(this.ele, 'mouseout' , 'autoSlider');
},
addEvent:function(ele, type, fn, context) {
context = context || this;
var innerFun = function(event) {
var evt = event || window.event;
if(typeof fn === 'string'){
context[fn].call(context, this, evt);
} else {
fn.call(context, this, evt);
}
}
if(window.addEventListener) {
ele.addEventListener(type, innerFun, false);
} else {
ele.attachEvent('on'+type, innerFun);
}
},
index:function(ele){
var parentNode = ele.parentNode;
var eles = parentNode.getElementsByTagName(ele.tagName); for(var i = 0, len = eles.length; i<len; i++){
if(eles[i] == ele) {
return i;
}
}
},
hasClass: function(obj, cls) {
return !!obj.className && obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
},
addClass: function(obj, cls) {
if (!this.hasClass(obj, cls)) obj.className += " " + cls;
},
removeClass:function (obj, cls) {
if (this.hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
},
gotoIndex:function(eleContext, evt){
var ele = evt.target || evt.srcElement;
var index = this.index(ele);
if(this.lock){return false;}
if(this.current === this.items.length-4 && index === 0) {
this.current = 0;
this.slientGoTo();
} else if(this.current === 1 && index ===this.items.length-5) {
this.current = this.items.length-3;
this.slientGoTo();
}
this.current = index + 1;
this.doAnimate();
},
prev:function(eleContext, evt){
if(this.lock){return false;}
this.current--;
this.doAnimate();
},
next:function(eleContext, evt){
if(this.lock){return false;}
this.current++;
this.doAnimate();
},
doAnimate:function(){
this.distance = (this.wrapWidth-this.itemWidth*(2*this.current + 3))/2 - parseInt(this.oList.style.left, 10);
if(this.distance < 0){
this.speed = -Math.abs(this.speed);
} else {
this.speed = Math.abs(this.speed);
}
this.distance = Math.abs(this.distance);
this.lock = true;
this.animate();
},
animate:function(){
var that = this;
this.timer = setTimeout(function() {
var left = parseInt(that.oList.style.left, 10) || 0; if (that.going+Math.abs(that.speed) >= that.distance) {
if (that.speed > 0) {
that.oList.style.left = left + that.distance - that.going + 'px';
} else {
that.oList.style.left = left - that.distance + that.going + 'px';
}
clearTimeout(that.timer);
that.going = 0;
that.onceEnd();
} else {
that.going += Math.abs(that.speed);
that.oList.style.left = left + that.speed + 'px';
that.animate();
}
}, 25); },
slientGoTo:function(){
this.oList.style.left = (this.wrapWidth-this.itemWidth*(2*this.current + 3))/2 + 'px';
},
setCircleSelect:function(){
for(var i=0,len = this.pageCircles.length; i<len; i++) {
var ele= this.pageCircles[i];
if(this.hasClass(ele, 'select')) {
this.removeClass(ele, 'select');
}
}
this.addClass(this.pageCircles[this.current-1], 'select');
},
correctCurrent:function(){
if(this.current === 0) {
this.current = this.items.length - 4;
} else if(this.current === this.items.length - 3) {
this.current = 1;
} else {
return false;
}
this.slientGoTo();
},
onceEnd:function(){
this.lock = false;
this.correctCurrent();
this.setCircleSelect();
}
}
var con = document.getElementById("container");
var s = new Slider(con, 4000);
</script>
</body>
</html>
/*
*2
*/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,div,ul,li {
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
a img {
border: none;
}
.wrap {
width: 100%;
overflow: hidden;
position: relative;
}
.wrap .prev,
.wrap .next {
height: 320px;
position: absolute;
left: -50%;
top: 0;
background-color: #999;
opacity: 0.7;
width: 100%;
}
.wrap .next {
left: auto;
right: -50%;
}
.wrap .prev:hover,
.wrap .next:hover {
opacity: 0.5;
}
.container {
width: 100%;
height: 320px;
}
.container ul {
height: 100%;
}
.container li {
width: 1000px;
height: 100%;
float: left;
}
.container li a,
.container li img {
display: block;
width: 100%;
height: 100%;
}
.page {
position: absolute;
left: 50%;
bottom: 10px;
display:none;
}
.page span {
float: left;
margin-right: 10px;
width: 20px;
height: 20px;
display: block;
cursor: pointer;
background: #999;
border-radius: 50%;
text-align: center;
color: #fff;
}
.page .select {
background: #f00;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container" id="container">
<ul>
<li><a href="1"><img src="http://www.hengqijy.com/uploadfile/2013/1031/20131031084228263.jpg"></a> </li>
<li><a href="2"><img src="http://www.hengqijy.com/uploadfile/2014/0315/20140315023711196.jpg"></a></li>
<li><a href="3"><img src="http://www.hengqijy.com/uploadfile/2014/0228/20140228091207797.jpg"></a></li>
<li><a href="4"><img src="http://www.hengqijy.com/statics/images/new_img/ksss.jpg"></a></li>
</ul>
</div>
<div class="prev" id="prev"></div>
<div class="next" id="next"></div>
<div id="page" class="page"></div>
</div>
<script type="text/javascript">
/*
* Slider constructor
* @param {Node} ele 容器节点
* @param {Int} index 默认显示第几张
*/
var Slider = function(ele, autoInterval){
autoInterval = parseInt(autoInterval, 10);
this.autoInterval = !isNaN(autoInterval) && Math.abs(autoInterval) || 3000;
this.ele = ele;
this.oList = ele.children[0];
this.items = this.oList.getElementsByTagName("li");
this.itemWidth = parseInt(this.items[0].offsetWidth, 10);
this.page = document.getElementById("page");
this.prevBtn = document.getElementById("prev");
this.nextBtn = document.getElementById("next");
this.init();
}
Slider.prototype = {
constructor: Slider,
init: function(){
this.oList.style.position = 'absolute';
this.oList.style.top = 0;
this.oList.style.left = 0; this.going = 0;
this.current = 1;
this.speed = 100;
this.timer = null;
this.inter = null;
this.lock = false;
this.wrapWidth = parseInt(this.ele.offsetWidth, 10);
this.pageCircles = null; this.prevBtn.style.marginLeft = -this.itemWidth/2 + 'px';
this.nextBtn.style.marginRight = -this.itemWidth/2 + 'px'; if(this.items.length > 2) {
this.setUp();
} else {
this.oList.style.left = (this.wrapWidth - this.itemWidth * this.items.length)/2 + 'px';
this.prevBtn.style.display = "none";
this.nextBtn.style.display = "none";
} this.oList.style.width = this.itemWidth * this.items.length + 'px'; },
setUp:function(){
var first1 = this.items[0].cloneNode();
first1.innerHTML = this.items[0].innerHTML; var first2 = this.items[1].cloneNode();
first2.innerHTML = this.items[1].innerHTML; var last1 = this.items[this.items.length-1].cloneNode();
last1.innerHTML = this.items[this.items.length-1].innerHTML; var last2 = this.items[this.items.length-2].cloneNode();
last2.innerHTML = this.items[this.items.length-2].innerHTML; this.oList.appendChild(first1);
this.oList.appendChild(first2);
this.oList.insertBefore(last1, this.items[0]);
this.oList.insertBefore(last2, this.items[0]); this.buildPage();
this.bindEvent();
this.slientGoTo();
this.doAnimate();
this.autoSlider();
},
autoSlider:function(){
var that = this;
if(this.autoInterval > 0) {
this.inter = setInterval(function(){
that.next();
}, this.autoInterval);
}
},
stopAutoSlider:function(){
clearInterval(this.inter);
},
buildPage:function(){
for(var i = 0,len = this.items.length - 4; i<len; i++) {
var circle = document.createElement('span');
circle.innerHTML = i + 1;
this.page.appendChild(circle);
}
this.pageCircles = this.page.getElementsByTagName('span');
this.addEvent(this.page, 'click', 'gotoIndex');
this.page.style.display = 'block';
},
bindEvent:function(){
this.addEvent(this.prevBtn, 'click', 'prev');
this.addEvent(this.nextBtn, 'click', 'next');
this.addEvent(this.ele, 'mouseover' , 'stopAutoSlider');
this.addEvent(this.ele, 'mouseout' , 'autoSlider');
},
addEvent:function(ele, type, fn, context) {
context = context || this;
var innerFun = function(event) {
var evt = event || window.event;
if(typeof fn === 'string'){
context[fn].call(context, this, evt);
} else {
fn.call(context, this, evt);
}
}
if(window.addEventListener) {
ele.addEventListener(type, innerFun, false);
} else {
ele.attachEvent('on'+type, innerFun);
}
},
index:function(ele){
var parentNode = ele.parentNode;
var eles = parentNode.getElementsByTagName(ele.tagName); for(var i = 0, len = eles.length; i<len; i++){
if(eles[i] == ele) {
return i;
}
}
},
hasClass: function(obj, cls) {
return !!obj.className && obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
},
addClass: function(obj, cls) {
if (!this.hasClass(obj, cls)) obj.className += " " + cls;
},
removeClass:function (obj, cls) {
if (this.hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
},
gotoIndex:function(eleContext, evt){
var ele = evt.target || evt.srcElement;
var index = this.index(ele);
if(this.current === this.items.length-4 && index === 0) {
if(this.setCurrent(0)){
this.slientGoTo();
}
} else if(this.current === 1 && index ===this.items.length-5) {
if(this.setCurrent(this.items.length-3)){
this.slientGoTo();
}
}
if(this.setCurrent(index + 1)){
this.doAnimate();
}
},
prev:function(eleContext, evt){
if(this.setCurrent(this.current-1)){
this.doAnimate();
}
},
next:function(eleContext, evt){
if(this.setCurrent(this.current+1)){
this.doAnimate();
}
},
doAnimate:function(){
this.distance = (this.wrapWidth-this.itemWidth*(2*this.current + 3))/2 - parseInt(this.oList.style.left, 10);
if(this.distance < 0){
this.speed = -Math.abs(this.speed);
} else {
this.speed = Math.abs(this.speed);
}
this.distance = Math.abs(this.distance);
this.lock = true;
this.animate();
},
setCurrent:function(index){
if(this.lock){return false;}
this.current = index;
return true;
},
animate:function(){
var that = this;
this.timer = setTimeout(function() {
var left = parseInt(that.oList.style.left, 10) || 0; if (that.going+Math.abs(that.speed) >= that.distance) {
if (that.speed > 0) {
that.oList.style.left = left + that.distance - that.going + 'px';
} else {
that.oList.style.left = left - that.distance + that.going + 'px';
}
clearTimeout(that.timer);
that.going = 0;
that.onceEnd();
} else {
that.going += Math.abs(that.speed);
that.oList.style.left = left + that.speed + 'px';
that.animate();
}
}, 25); },
slientGoTo:function(){
this.oList.style.left = (this.wrapWidth-this.itemWidth*(2*this.current + 3))/2 + 'px';
},
setCircleSelect:function(){
for(var i=0,len = this.pageCircles.length; i<len; i++) {
var ele= this.pageCircles[i];
if(this.hasClass(ele, 'select')) {
this.removeClass(ele, 'select');
}
}
this.addClass(this.pageCircles[this.current-1], 'select');
},
correctCurrent:function(){
if(this.current === 0) {
this.current = this.items.length - 4;
} else if(this.current === this.items.length - 3) {
this.current = 1;
} else {
return false;
}
this.slientGoTo();
},
onceEnd:function(){
this.correctCurrent();
this.setCircleSelect();
this.lock = false;
}
}
var con = document.getElementById("container");
var s = new Slider(con);
</script>
</body>
</html>
- 不待续...
图片切换.----so屌的更多相关文章
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- Android中使用ImageViewSwitcher实现图片切换轮播导航效果
前面写过了使用ViewFlipper和ViewPager实现屏幕中视图切换的效果(ViewPager未实现轮播)附链接: Android中使用ViewFlipper实现屏幕切换 Android中使用V ...
- JavaScript 最简单的图片切换
使用前在文件外部要有1.jpg 2.jpg 只是简单的模仿flash图片切换,可在此基础上引申出各种不同的效果. 思路: 建立一个数组存放图片的src,然后调用setInterval周期性的调用cha ...
- JQuery图片切换动画效果
由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...
- uwp 图片切换动画
最近在学习安卓,LOL自定义战绩项目近乎停工,而且腾旭把界面全改了,好烦.刚好学习到安卓中的图片切换动画,我就想在LOL项目中实现一个.首先上百度查看一下,妈的,资料少的可怜. 还是自己来吧.自定义控 ...
- css3全屏背景图片切换特效
效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- javascript马赛克遮罩图片切换效果:XMosaic.js(转)
新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...
- jQuery旋转木马仿3D效果的图片切换特效代码
用jQuery实现的一款仿3D效果的图片切换特效代码,类似旋转木马一样,幻灯图片以三维视觉上下滑动切换,效果很酷炫,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜 ...
随机推荐
- 安装和配置Linux系统虚拟机
1.打开虚拟机软件 2.点击创建新的虚拟机,选择典型(推荐)类型的配置. 3.点击稍后安装操作系统. 4.客户机操作系统选择Linux,版本选择CentOS 7 64位. 5.虚拟机名称可自行更改,位 ...
- re模块、正则表达式
一.正则表达式 1.正则表达式不是Python独有的,它是一门独立的技术,所有的编程语言都可以使用正则表达式,在Python中使用正则表达式就要借助于re模块,或者是支持正则表达式书写的方法. 2.用 ...
- [Linux kali] Kali KDE桌面安装中文输入法 不能登录系统
#开始 第一次实体机上面安装kali的KDE桌面版本 结果就遇到了很多的BUG 比如这次就是安装中文输入法有问题 这次安装的是fcitx框架的 尝试了 谷歌输入法 还有搜狗输入法 都有这个问题 也就是 ...
- 吴裕雄 python 机器学习——模型选择参数优化暴力搜索寻优GridSearchCV模型
import scipy from sklearn.datasets import load_digits from sklearn.metrics import classification_rep ...
- 【PAT甲级】1090 Highest Price in Supply Chain (25 分)
题意: 输入一个正整数N(<=1e5),和两个小数r和f,表示树的结点总数和商品的原价以及每向下一层价格升高的幅度.下一行输入N个结点的父结点,-1表示为根节点.输出最深的叶子结点处购买商品的价 ...
- linux查看端口占用程序
netstat -apn 查看所有进程和端口的使用情况,看到9000端口和28080端口被java程序占用,PID分别为17607,1442 ps -aux|grep 17607 ps -aux|g ...
- 从QC到QA
QC遇到了什么无法逾越的障碍 我们公司的主要业务是项目外包,一般的项目都在2-3个月的周期,采用瀑布模式.这种模式本身是相对简单,且十分成熟的模式.但是在实际的工作中,我们还是遇到了前所未有的挑战. ...
- docker部署-windows环境
docker部署-windows环境 1. docker windows 1.1. 安装 win7或者win8需要利用docker toolbox来安装,其是一个docker工具集,w ...
- Python下opencv使用笔记（十一）（详解hough变换检测直线与圆）
http://blog.csdn.net/on2way/article/details/47028969 http://blog.csdn.net/mokeding/article/details/1 ...
- 微信跳一跳辅助JAVA 自动模拟点击
工具:ADB 原理: 开始游戏后,使用ADB工具让手机截屏发送到电脑 分析图像中小人与目标中心点间的距离,根据一定比例计算出需要触屏的时间 使用ADB进行模拟点击(触屏)相应的时间,完成精准跳跃 程序 ...