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>
运行代码
查看全文
相关阅读:
(9)ASP.NET Core2.2 中的MVC路由二
(8)ASP.NET Core2.2 中的MVC路由一
(7)ASP.NET Core2.2 中的错误处理
(6)ASP.NET Core2.2 中使用IHttpClientFactory发出HTTP请求
(5)ASP.NET Core2.2 中的静态文件
(4)ASP.NET Core2.2 中间件
蒲公英 · JELLY技术周刊 Vol.05: Rust & Electron 的高性能实践 -- Finda
Taro 2.2 全面插件化,支持拓展和定制个性化功能
使用 Taro 快速开发京东小程序
技术周刊 · 0202 年了,你还不学一下 WASM 么?
原文地址:https://www.cnblogs.com/jikey/p/3053902.html
最新文章
Spring系列.事务管理
Spring系列.AOP原理简析
Spring系列.AOP使用
MyBatis常见面试题整理
Spring系列.ApplicationContext接口
Spring系列.依赖注入配置
Spring系列.IOC容器简介
MyBatis整合双数据源
MyBatis缓存特性详解
MySQL 整体架构一览
热门文章
关于 InnoDB 锁的超全总结
幻读在 InnoDB 中是被如何解决的?
查询数据不多,但却很慢的原因
通过 DockerFile 打包镜像
Docker 代理脱坑指南
事务究竟有没有被隔离
(13)ASP.NET Core2.2 中的选项模式(Options)
(12)ASP.NET Core2.2 中的配置二(Configuration)
(11)ASP.NET Core2.2 中的配置一(Configuration)
(10)ASP.NET Core2.2 中的环境(Environments:dev, stage, prod)
Copyright © 2011-2022 走看看