zoukankan
html css js c++ java
单张图片轮换
单独图片轮换,点击左右按钮,实现翻页效果。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>单独图片轮换 - 豪情</title> <style type="text/css"> *{margin:0;padding:0;} body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#000;} table{border-collapse:collapse;border-spacing:0;} li{list-style:none;} fieldset,img{border:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} a:focus,input,textarea{outline-style:none;} textarea{resize:none} a{color:#0a8cd2;text-decoration:none;} a:hover{color:#f60;text-decoration:underline;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;} .none{display:none} .demo{180px;height:210px;margin:40px auto;background:#fff;padding:25px;border:2px solid #ccc;border-radius:5px;} .scrollBox{display:inline;float:left;height:223px;position:relative;180px;overflow:hidden;} .prev,.next{background:url(//images0.cnblogs.com/blog/100150/201305/01234427-d9c492e118d040ffb59ec9d80955edbb.png) 0 0 no-repeat;} .prev{background-position:0 0;bottom:7px;cursor:pointer;display:inline-block;height:13px;position:absolute;right:20px;15px;z-index:99;} .next{background-position:-22px 0;bottom:7px;cursor:pointer;display:inline-block;height:13px;position:absolute;right:0;15px;z-index:99;} .control{display:inline;float:left;margin:0 auto;180px;} .control div{float:left;} #control_scroll{height:223px;overflow:hidden;position:relative;180px;} .pic{position:absolute;float:left;} .pic li{display:inline;float:left;text-align:left;180px;} .pic li img.lbimg{height:190px;margin:0 auto 12px;overflow:hidden;180px;} </style> </head> <body> <!--http://sports.qq.com/photo/?pgv_ref=aio2012&ptlang=2052--> <!--http://news.qq.com/base2011/ued_scroll.js--> <div class="demo"> <div class="scrollBox"> <div id="prev" class="prev"></div> <div class="control" id="container"> <ul class="pic"> <li><a href="#"><img class="lbimg" alt="张蓝心登杂志秀美腿" src="http://img1.gtimg.com/sports/pics/hv1/235/122/1287/83718520.jpg" /><br /> 张蓝心登杂志秀美腿</a> </li> <li><a href="#"><img class="lbimg" alt="潘晓婷蕾丝装身姿动人" src="http://img1.gtimg.com/sports/pics/hv1/242/122/1287/83718527.jpg" /><br /> 潘晓婷蕾丝装身姿动人</a> </li> <li><a href="#"><img class="lbimg" alt="泛珠赛车宝贝清丽登场" src="http://img1.gtimg.com/sports/pics/hv1/249/122/1287/83718534.jpg" /><br /> 泛珠赛车宝贝清丽登场</a> </li> <li><a href="#"><img class="lbimg" alt="CBA宝贝热舞助阵" src="http://img1.gtimg.com/sports/pics/hv1/24/188/1286/83670114.jpg" /><br /> CBA宝贝热舞助阵</a> </li> <li><a href="#"><img class="lbimg" alt="徐冬冬写真姿态优雅" src="http://img1.gtimg.com/sports/pics/hv1/237/122/1287/83718522.jpg" /><br /> 徐冬冬写真姿态优雅</a> </li> </ul> </div> <div id="next" class="next"></div> </div> </div> <script type="text/javascript"> (function(window){ function id(node){ return typeof node == 'string' ? document.getElementById(node) : node; } function SingleSlide(obj){ for(var p in obj){ this[p] = id(obj[p]); } this.init.apply(this, arguments); } SingleSlide.prototype = { init : function(){ var that = this, timer = null; this.oUl = this.container.getElementsByTagName('ul')[0]; this.aLi = this.oUl.getElementsByTagName('li'); this.iMaxWidth = this.aLi[0].offsetWidth; this.iNow = 0; // 当前标记 var bigBox = this.container.parentNode; this.oUl.innerHTML += this.oUl.innerHTML; this.oUl.style.width = this.aLi[0].offsetWidth * this.aLi.length + 'px'; timer = setInterval(function(){ that.auto(that, that.oUl); }, 2000); this.prevBtn.onclick = function(){ that.prev(that, that.oUl); } this.nextBtn.onclick = function(){ that.auto(that, that.oUl); } bigBox.onmouseover = function(){ clearInterval(timer); } bigBox.onmouseout = function(){ timer = setInterval(function(){ that.auto(that, that.oUl); }, 2000); } }, auto : function(obj, ul){ obj.iNow++; if(obj.iNow >= obj.aLi.length){ obj.iNow = 0; } obj.move(ul, -obj.iNow * obj.iMaxWidth); }, prev : function(obj, ul){ obj.iNow--; if(obj.iNow <= -1){ obj.iNow = obj.aLi.length - 1; } obj.move(ul, -obj.iNow * obj.iMaxWidth); }, move : function(obj, end){ var that = this, iSpeed = 0; clearInterval(obj.timer); obj.timer = setInterval(function(){ iSpeed = (end - obj.offsetLeft) / 5; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); obj.style.left = obj.offsetLeft + iSpeed + 'px'; }, 30); } } new SingleSlide({ container : 'container', prevBtn : 'prev', nextBtn : 'next' }); }(window)); </script> </body> </html>
运行代码
查看全文
相关阅读:
Anltr 规格严格
非结构文本分析 规格严格
获取32R的图像的直方图的一个算法
NetBeans 6.5 开发计划
Java中国象棋博弈程序探秘[6]——游戏与界面
NetBeans 时事通讯(刊号 # 14 Jul 01, 2008 )
Download NetBeans IDE 6.5 Milestone 1!
Java中国象棋博弈程序探秘[5]——搜索算法
100本顶尖软件开发书籍
Java中国象棋博弈程序探秘[4]——生成有效着法
原文地址:https://www.cnblogs.com/jikey/p/3053902.html
最新文章
Android 搜索 把软键盘上的回车键改为搜索
个人网络兼职打码有前途吗
Android MediaPlayer 字幕同步
Google Analytics in IOS(四)—— 高级配置
file结构体介绍
iOS网络编程ASIHTTPRequest框架安装和配置图文解说
php读取数据后转换成json输出
php开发微信支付获取用户地址
phpstudy php5.4以上版本伪静态设置 thinkphp
GitHub上传文件不能超过100M的解决办法
热门文章
关于PHP程序员技术职业生涯规划
php网站判断用户是否是手机访问的方法
Tomcat、Weblogic、Websphere 规格严格
binutils和其他工具网址 规格严格
SmartArt 规格严格
今天看的网页,记录一下 规格严格
Programmatically dumping heap from Java applications 规格严格
HTTP_referrer 规格严格
JSP上传文件 规格严格
Oracle case使用 规格严格
Copyright © 2011-2022 走看看