用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客
代码部分:
点击(此处)折叠或打开
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>实用的图片切换</title>
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
- <!--<script type="text/javascript" src="jquery_change.js"></script>-->
- <style type="text/css">
- body,ul,li { padding:0; margin:0}
- ul,li { list-style:none}
- .img-scroll { position:relative; margin:20px auto; width:440px;}
- .img-scroll .prev,.img-scroll .next { position:absolute; display:block; width:50px; height:100px; background-color:#000;
- top:0; color:#FFF; text-align:center; line-height:100px}
- .img-scroll .prev { left:0;cursor:pointer;}
- .img-scroll .next { right:0;cursor:pointer;}
- .img-list { position:relative; width:320px; height:100px; margin-left:60px; overflow:hidden}
- .img-list ul { width:9999px;}
- .img-list li { float:left; display:inline; width:100px; margin-right:10px; height:100px; background-color:#BDBDDF; text-align:center; line-height:100px;}
- </style>
- </head>
- <body>
- <div class="img-scroll">
- <span class="prev">prev</span>
- <span class="next">next</span>
- <div class="img-list">
- <ul>
- <li><img style="width:100px;height:100px;" src="./img/cat.jpg"></li>
- <li><img style="width:100px;height:100px;" src="./img/katong.jpg"></li>
- <li><img style="width:100px;height:100px;" src="./img/meinv.jpg"></li>
- <li><img style="width:100px;height:100px;" src="./img/mm.jpg"></li>
- <li><img style="width:100px;height:100px;" src="./img/慢慢.jpg"></li>
- <li><img style="width:100px;height:100px;" src="./img/美食杰-糖糖.jpg"></li>
- <li><img style="width:100px;height:100px;" src="./img/未命名44.jpg"></li>
- </ul>
- </div>
- </div>
- <script type="text/javascript">
- function DY_scroll(wraper,prev,next,img,speed,or)
- {
- var wraper = $(wraper);
- var prev = $(prev);
- var next = $(next);
- var img = $(img).find('ul');
- var w = img.find('li').outerWidth(true);
- var s = speed;
- next.click(function()
- {
- img.animate({'margin-left':-w},function()
- {
- img.find('li').eq(0).appendTo(img);
- img.css({'margin-left':0});
- });
- });
- prev.click(function()
- {
- img.find('li:last').prependTo(img);
- img.css({'margin-left':-w});
- img.animate({'margin-left':0});
- });
- if (or == true)
- {
- ad = setInterval(function() { next.click();},s*1000);
- wraper.hover(function(){clearInterval(ad);},function(){ad = setInterval(function() { next.click();},s*1000);});
- }
- }
- DY_scroll('.img-scroll','.prev','.next','.img-list',3,false);// true为自动播放,不加此参数或false就默认不自动
- </script>
- </body>
- </html>
转载于:https://www.cnblogs.com/wang3680/p/17119339b6af59da31ca48deb62c6157.html
用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客相关推荐
- PHP——0128练习相关2——js点击button按钮跳转到另一个新页面
js点击button按钮跳转到另一个新页面 投稿:whsnow 字体:[增加 减小] 类型:转载 时间:2014-10-10 我要评论 点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎 ...
- 十分钟教会你原生JS压缩图片,极其精简版
十分钟教会你原生JS压缩图片,极其精简版 原文链接:https://blog.csdn.net/yasha97/article/details/83629510 (一)实现思路 先通过input标签获 ...
- html5滚动文字切换效果代码,js+div实现文字滚动和图片切换效果代码
本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了 ...
- 对“科大讯飞2021丨广告点击率预估挑战赛 Top1方案(附完整代码)_Jack_Yang的博客-CSDN博客”的补充。
这篇文章的初衷是针对科大讯飞2021丨广告点击率预估挑战赛 Top1方案(附完整代码)_Jack_Yang的博客-CSDN博客进行补充. 博客的信息量很少,对任务背景的介绍也不太对,说实话令人费解.我 ...
- js实现点击按钮图片自动切换_☆往事随風☆的博客
文章目录 前言 一.基本思路 二.代码分析 1.创建数组保存图片的存储路径 2.获取按钮对象 3.调用定时器 4.关闭定时器 三.整体代码 四.效果展示 前言 利用js实现一个图片自动切换的功能. 一 ...
- js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录 前言 一.DOM是什么? 二.对象的HTML DOM 树 三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...
- 轮播图切换圆点html,图片轮播器,点击小圆点按钮实现图片切换。别的都对。哪里错了呀!...
按照阿安老师的<焦点图轮播特效>这部教程,5-1课.一步一步做的.检查了好几遍都没有错呀?为什么就是不执行呢?别的都好了,就是点击小圆点切换到相应的图片不行,代码见69-76行,哪里错了呢 ...
- js点击取消按钮关闭当前弹框_js关闭当前页面(窗口)的几种方式总结
1. 不带任何提示关闭窗口的js代码 代码如下: 关闭 2.自定义提示关闭 代码如下: // 这个脚本是 ie6和ie7 通用的脚本 function custom_close(){ if (conf ...
- html图片切换动画,js实现图片切换(动画版)
学习了妙味课堂的图片切换(动画版) 这个小效果相对简单一点. 知识预备: [1]background-position-x background-position属性设置背景原图像(由 backgro ...
最新文章
- 【Flutter】StatefulWidget 组件 ( FloatingActionButton 组件 | RefreshIndicator 组件 )
- 小米手机怎么获取 ROOT 权限
- mysql读取和写入的峰值_计算MySQL的内存峰值公式
- python全部语法_python基本语法
- matlab标定工具箱 参数,使用MATLAB标定工具箱求出内外参数后怎样求实物的两点间......
- CodeForces 706A Beru-taxi
- 详情和 PoC 发布后,谷歌匆忙修复严重的 Gmail 漏洞
- xp系统qq安装不上网络连接服务器,windows xp系统不能登录qq的解决方法
- 自然语言处理python代码_《自然语言处理入门 Python/Java双代码实现(图灵出品)》(何晗)【摘要 书评 试读】- 京东图书...
- C++ Interesting卡常数
- mysql堆溢出_MySQL错误1436:线程堆栈溢出,带有简单查询
- 台式计算机能不能安装蓝牙驱动,台式电脑蓝牙驱动安装失败怎么办?台式电脑蓝牙驱动安装失败解决办法...
- 什么是领导能力?如何提高领导能力?
- ElementUI ===> 表单 rules 规则
- CMD的打开方式以及一些常用的Dos命令
- 小博老师收集Java经典面试题 ——Servlet和JSP常见面试题
- Python生成英文大小写和数字的随机数
- 1. Linux命令之ps:查看进程状态
- 华为TE10一体化视频会议终端
- 如何给深度学习加速——模型压缩、推理加速
热门文章
- S参数三要素无源性(Passive),互易性(Reciprocoty)和因果性(Causality)
- java调起本地摄像头,利用openCV进行人脸识别(一)
- 精心收集的95个超实用的JavaScript代码片段(ES6 +编写)
- 2019年第十届蓝桥杯真题解析 | 特殊数【Python】
- 刚刚!腾讯荣升Linux基金会白金会员
- maven复习 (进阶+高级)
- java-php-python-ssm新生报到管理计算机毕业设计
- 华为matebook14摄像头无法启动问题
- 弟子规python编程游戏_弟子规入则孝_读后感
- CANopen协议中文文档