html实现图片轮播切换箭头,最简单jquery实现带左右箭头和数字焦点的图片轮播...
直接上代码(请自行引入jquery):
轮播
body{font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:#666666;margin:0px;padding:0px;background:#fff;}
p,from,h1,h2,h3,h4,h5,h6{margin:0px;padding:0px;}
ul,ol,li{margin:0px;padding:0px;list-style:none;}
img{border:none;}
a{color:#333333;text-decoration:none;}
a:hover{color:#666666;text-decoration:none;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-table}
.main {
position: relative;
width: 500px; height: 350px;
}
.myslide {
float: left; position: absolute; overflow: hidden;
width: 500px; height: 350px;
}
.myslidetwo {
position: absolute;
overflow: hidden;
width: 2000px;
}
.myslidetwo li {
position:relative;
float: left; background:#ccc; text-align:center; line-height:350px; width: 500px; height: 350px;
}
.label{
position: absolute;
bottom: 15px;
left: 210px;
width: 200px;
}
.label li {
float: left;
width:20px;height:20px;line-height:20px;text-align: center;
margin-right: 5px;
border:1px solid #3F8AE3;
font-size: 14px;
background: #fff;
cursor: pointer;
}
.label li.current {
color:#fff;
background: #3F8AE3;
}
.arrows{
position: absolute;
left:0px; top:0px;
color:#666; font-size: 40px;font-weight: bold;
}
.arrows a{
cursor:pointer;
background: rgba(0,0,0,0.2);
display: inline-block;width:30px;height: 70px;text-align: center;line-height: 70px;
}
.arrows a:hover{
background: #3F8AE3;
color:#fff;
}
.arrows .pre{
margin-right: 429px;
}
$(document).ready(function () {
var _now=0;
var oul = $(".myslidetwo");
var numl = $(".label li");
var wid = $(".myslide").eq(0).width();
//数字图标实现
numl.click(function () {
var index = $(this).index();
$(this).addClass("current").siblings().removeClass();
oul.animate({'left': -wid * index}, 500);
})
//左右箭头轮播
$(".pre").click(function () {
if (_now>=1) _now--;
else _now=3;
ani();
});
$(".next").click(function () {
if (_now == numl.size() - 1) {
_now = 0;
}
else _now++;
ani();
});
//动画函数
function ani(){
numl.eq(_now).addClass("current").siblings().removeClass();
oul.animate({'left': -wid * _now}, 500);
}
//以下代码如果不需要自动轮播可删除
//自动动画
var _interval=setInterval(showTime,5000);
function showTime() {
if (_now == numl.size() - 1) {
_now = 0;
}
else _now++;
ani();
}
//鼠标停留在画面时停止自动动画,离开恢复
$(".myslide").mouseover(function(){
clearTimeout(_interval);
});
$(".myslide").mouseout(function(){
_interval=setInterval(showTime,2000);
});
})
- 1
<
>
- 2
<
>
- 3
<
>
- 4
<
>
- 1
- 2
- 3
- 4
html实现图片轮播切换箭头,最简单jquery实现带左右箭头和数字焦点的图片轮播...相关推荐
- Python tkinter的简单使用,在绘布上播放GIF和图片
Python tkinter的简单使用,在绘布上播放GIF和图片 文章目录 Python tkinter的简单使用,在绘布上播放GIF和图片 前言 一.tkinter 的简单组件以及pack(),gr ...
- 一个仿微信朋友圈的图片查看器,使用超级简单!
PhotoViewer 项目地址:wanglu1209/PhotoViewer 简介:一个仿微信朋友圈的图片查看器,使用超级简单! 更多:作者 提 Bug 标签: 该图片查看器是模 ...
- Jquery 广告图片轮播切换
要点: 1.鼠标移至图片上出现左右箭头,鼠标移出图片时,左右箭头消失 2.单击左右箭头时,显示上一个/下一个图片,当前数字背景为橙色,其他数字背景为#333333,第一个/最后一个图片显示时,单击箭 ...
- 横向全屏滑动插件_【案例】JQuery横向手风琴图片轮播切换代码
点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源 哈喽大家好,又到了每周二经典案例环节啦~同学们还想了解哪些网页知识 今天段老师给同学们带来的是JQuery横向手 ...
- 详解用backgroundImage解决图片轮播切换
详解用backgroundImage解决图片轮播切换 css媒体查询有一个 宽高比很方便,aspect-ratio ,可以直接使用宽/高 来进行页面适配 使用样例如下: 单dom节点实现轮播 利用ba ...
- 使用jQuery快速高效制作网页交互特效 第五章 上机练习四 制作广告图片轮播切换效果
轮播应有的功能大致都有,分享给一些在学的朋友参考学习. <!DOCTYPE html> <html> <head lang="en"><m ...
- jQuery实现广告图片轮播切换
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
- dw html5中怎么设置图片自动切换,DW制作九宫格全屏亮灯轮播图片且自动切换图片教程...
本文介绍的是利用DW制作九宫格全屏亮灯轮播图片并且可以自动切换图片,而且点击图片时还会亮灯,推荐过来,大家一起来学习吧! 软件名称:Adobe Dreamweaver CS3 官方中文安装版软件大小: ...
- css33d图片轮播_通过html+css3实现图片轮播切换
摘要:图片轮播切换是网站banner图常用的功能,很多网站的这个功能都是通过js来实现的,自从css3新增动画功能后,图片轮播切换不需要js也可以实现了. 图片轮播切换是网站banner图常用的功能, ...
- html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
最新文章
- [UE4蓝图教程]蓝图入门之蓝图通信机制入门
- angular moment 倒计时_Moment 推出多款适用苹果 iPhone 12 的 MagSafe 配件:包括快速安装外接镜头保护壳 - iPhone 12...
- 如何用cocoapods 来管理项目中的第三方框架?
- session每次请求都是新建的吗_每次去火车站都是提心吊胆,感觉就像进了贼窝一样,有同感的吗?...
- HiveQL与SQL区别
- Java集合之HashSet源码分析
- mac os android连接wifi密码,Mac使用小技巧:找回WiFi密码
- 大型网站技术架构(读书笔记)
- Debian sequeeze编译coreavc 2.0+mplayer
- Go语言圣经阅读-第八周
- Python人脸识别 Python3.7+OpenCV+Dlib+罗技C920摄像头 实现离线实时摄像头画面人脸检测+识别
- 卸载 mysql 2008_强力卸载SQL Server 2008图文详解
- Go语言【ftm库】
- 关于isalpha——计算英文单词的个数
- 京东app秒杀接口sk参数分析
- 【Paper】毕业论文免费查重网站平台汇总
- 移动光猫改桥接,开启telnet
- 学习笔记-频率域滤波(2)-取样函数
- R语言cowplot介绍——把不同的图像拼接到一起
- 2022河海大学物联网工程学院电子信息(计算机与软件方向)890上岸经验帖(毕业2年后,双非三跨211成功)
热门文章
- catalina java opts_tomcat catalina.sh JAVA_OPTS参数说明与配置
- javascript中数组的22种方法 (转载)
- Mac上挂载移动硬盘出现“Read-only file system“问题
- 如何选择关键词以及关键词分析优化
- html的特殊符号五角星,五角星怎么打出来?打出五角星符号的方法
- 植物病虫害识别方法主要研究思路
- xp系统服务器找不到打印机无法连接失败,xp系统打印机共享提示连接失败的解决方法...
- Excel如何冻结多行多列
- ID卡介绍和工作原理
- 如何控制局域网网速_Windows系统如何远程访问控制MAC系统(局域网)