图片切换.----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.傲游.搜 ...

随机推荐

如何利用wx.login方法获取openid和sessionKey
1, wx.login(Object object) 调用接口获取登录凭证(code).通过凭证进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key) ...
Codeforces Round #622 (Div. 2) A. Fast Food Restaurant
Tired of boring office work, Denis decided to open a fast food restaurant. On the first day he made ...
牛客小白赛4 C题
乘法逆元: 一个数a 乘上 b,在mod之后再还原成本来的数 a 这里就要用到乘法逆元,(a*b)%mod*inv(b,mod)==a ll exgcd(ll a,ll b,ll &x,ll ...
iOS 开发之提取图片的主色调用于更换应用主题颜色
从刷爆 IT 圈的一个事件说起: 新闻:某互联网公司产品经理提出一个需求--要求APP开发人员做到软件根据用户的手机壳改变软件的主题颜色. What Fuck!还有这操作,PM,你过来,保证不打屎你. ...
Vue-项目搭建时的常用配置
1.Vue静态资源存放的选择 assets: 编译过程中会被webpack处理理解为模块依赖,只支持相对路径的形式,assets放可能会变动的文件.static: 存放第三方文件的地方,不会被webp ...
跨域-JSONP
jsonp跨域 - 前端适配,后台配合说明:前后台同时改造 cnpm i jsonp --save-dev 在App.vue里 import jsonp from 'jsonp' let url = ...
思科AP-什么是COS AP？
COS:Click OS 所有新的wave 2 AP都带有COS.它建立在IOS之上,但behaves 不同. COS APs是Click OS APs(较新的AP型号,Wave 2等) 例如:18x ...
js 匀速运动到100和到300
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
lc 0219
目录 ✅ 463. 岛屿的周长描述解答 cpp py ✅ 1122. 数组的相对排序描述解答 cpp py ✅ 876. 链表的中间结点描述解答 cpp ✅ 1160. 拼写单词描述解 ...
codeforces Round #611
这种凌晨场真的折寿就过了四题,8wa结尾心态炸裂,求别被hack,再hack就要爬了 A2 B8 C38(1) E1:58(7) D题感觉可以写,但是没有时间看了.幸好E最后发现了自己的 ...

图片切换.----so屌

图片切换.----so屌的更多相关文章

随机推荐

热门专题