html5 js php,html5·css·php·js简单代码

迈不过友情╰ 2022-10-11 15:59 210阅读 0赞

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

这是一个图片左右滚动的代码

123

$(document).ready(function()\{

var totalLiNum=$(\*\#slide ul\*).children(\*li\*).length;

var trueWidth=totalLiNum\*1010;

for(var i=1;i<=totalLiNum;i++)\{

$(\*.icon\*).append(\*

![s\_off.png][s_off.png]\*);

\}

$toLeft=function()\{

var currentLeft=parseInt($(\*\#slide ul\*).css(\*left\*).replace(\*px\*,\*\*));

currentLeft=currentLeft-1010;

$(\*\#errorinfo\*).text(currentLeft);

if((Math.abs(currentLeft))>=(trueWidth-1000))\{

$(\*\#slide ul\*).animate(\{left:0\},1000);

\}else\{

$(\*\#slide ul\*).animate(\{left:currentLeft\},1000);

\}

\}

$(".toleft").click($toLeft);

$toRight=function()\{

var currentLeft=parseInt($(\*\#slide ul\*).css(\*left\*).replace(\*px\*,\*\*));

currentLeft=currentLeft+1010;

$(\*\#errorinfo\*).text(currentLeft +"++++"+trueWidth);

if(Math.abs(currentLeft)>=(trueWidth-1000))\{

$(\*\#slide ul\*).animate(\{left:currentLeft\},1000);

\}else\{

$(\*\#slide ul\*).animate(\{left:0\},1000);

\}

\}

$(".toright").click($toRight);

$selectPic=function()\{

var toLeft=$(this).attr(\*index\*)\*1010-1010;

toLeft=toLeft\*(-1);

$(\*\#slide ul\*).animate(\{left:(toLeft+"px")\},1000);

$(this).parent().find(\*img\*).attr(\*src\*,\*images/s\_off.png\*);

$(this).find(\*img\*).attr(\*src\*,\*images/s\_on.png\*);

\}

$(".icon li").click($selectPic);

\});

.warp\{width:1000px;margin:0 auto;border: 1px solid \#ccc;\}

\#slide\{width:1000px;border:2px solid \#ccc;margin:0 auto;overflow:hidden;\}

\#slide ul\{list-style:none;width:9000px;position:relative;left:0px;margin:0;padding:0;\}

\#slide ul li\{float:left;\}

\#slide ul li img\{margin:30px;width:1000px;\}

/\*按钮\*/

.btn-action\{ position:relative;width:35px;height:50px;top: -130px; cursor: pointer;opacity:0.5;\}

.btn-action:hover\{opacity:1; \}

.btn-action span\{ text-indent: -99999px;display: block;\}

.toleft\{left:0; background:url(images/left.png);float: left;\}

.toright\{right:0;background:url(images/right.png);float: right;\}

ul.icon\{list-style:none;float:left;display:block;\}

ul.icon li \{width:32px;float:left;\}

*  ![s01.jpg][s_off.png]
 *  ![s02.jpg][s_off.png]
 *  ![s03.jpg][s_off.png]

左移

右移

[s_off.png]:

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关随机数生成器代码HTML5

代码如下 -------------------- <!DOCTYPE html> <html> <head> <title>随机数生成器</title>

小咪咪/ 2024年03月01日 08:00/ 0 赞/ 45 阅读

相关 html5 js php,html5·css·php·js简单代码

该楼层疑似违规已被系统折叠隐藏此楼查看此楼这是一个图片左右滚动的代码 123 $(document).ready(function()\{ var totalLiN

迈不过友情╰/ 2022年10月11日 15:59/ 0 赞/ 211 阅读

相关 flv支持html5,flv.js - HTML5 FLV Player

flv.js - HTML5 FLV Player 1480 This project relies on Media Source Extensions to work.

向右看齐/ 2022年10月10日 09:43/ 0 赞/ 190 阅读

相关 html5 电流效果,HTML5 – 渲染简单的电路

对不起已经有一段时间了,但我已经完成了我答应你的图书馆了.使用它,我可以创建这样的电路：我已经在javascript中创建了一个简化的绘图系统,您可以通过构建一个简短的库来

今天药忘吃喽~/ 2022年10月06日 13:52/ 0 赞/ 177 阅读

相关 html5 js 正则校验,js浏览器html5表单验证

html5表单添加了很多类型的表单，而且还自带验证的功能。在移动端，手机等设备能够根据不同的input类型弹出不同的键盘，例如iphone弹的键盘 ![c9651079f08

桃扇骨/ 2022年10月05日 15:58/ 0 赞/ 239 阅读

相关 HTML5 WebSocket 简单实例

什么是WebSocket WebSocket 简单实例什么是WebSocket WebSocket是HTML5开始提供的一种在单个 TCP

男娘i/ 2022年07月19日 05:30/ 0 赞/ 214 阅读

相关 HTML5文档结构代码

<!DOCTYPE html>  <html lang="en">

谁借莪１个温暖的怀抱￠/ 2022年07月03日 14:28/ 0 赞/ 235 阅读

相关 HTML5 placeholder JS模拟

支持HTML5 的浏览器：IE9+，FF4,chrome可以直接使用文本元素的placeholder来确定提示文案，但是IE8以下等浏览器却没有这个选项，下面通过JS来

秒速五厘米/ 2022年05月22日 07:05/ 0 赞/ 165 阅读

相关 html5，实例开发代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</

布满荆棘的人生/ 2022年01月08日 19:51/ 0 赞/ 295 阅读

相关 HTML5 的 JS 接口

1. 移动端 H5 哪些地方支持 JS 注：目前文档内容还是 FR9.0 的，待 10.0 适配好之后再进行更新。 <table style="width:600

妖狐艹你老母/ 2021年12月16日 07:51/ 0 赞/ 225 阅读