<!--
布局思路:一个大的div,中有一个ul.和一个箭头的div
css样似描述:
整个盒子距离顶部100px,又水平居中 盒子的宽高为图片的实际宽高
由于每次都是看见了一张图片:有两种方式:
第一种:要么li用了浮动,然后结合overflow:hidden。让超出的部分消失
第二种:li绝对定位==》则父级元素ul,或者li的爷级元素 相对定位 (子绝父相)
默认显示第一张图片,所以其他的li应该隐藏起来。
按钮默认是隐藏起来的,光标放上去,按钮显示出来,用了hover属性
按钮的样式修饰:
有宽高,分别靠在最左边和最右边,垂直方向居中;==>因此有绝对定位,left:0;right:0;top:50%;
-->
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.slider {
height: 340px;
width: 790px;
margin: 100px auto;
position: relative;
}
.slider li {
position: absolute;
/* display: none; */
}
.slider li:first-child {
display: block;
}
.arrow {
display: none;
}
.slider:hover .arrow {
display: block;
}
.arrow-left,
.arrow-right {
font-family: "SimSun", "宋体";
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
/* margin-top: -30px;*/
cursor: pointer;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: 700;
font-size: 30px;
}
.arrow-left:hover,
.arrow-right:hover {
background-color: rgba(0, 0, 0, .5);
}
.arrow-left {
left: 0;
}
.arrow-right {
right: 0;
}
</style>
布局的部分
<div class="slider">
<ul>
<li><a href="#"><img src="data:images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/6.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/7.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/8.jpg" alt=""></a></li>
</ul>
<!--箭头-->
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</div>
</div>
JS部分
var count = 0;
$(".arrow-right").click(function () {
count++;
if(count == $(".slider li").length){
count = 0;
}
console.log(count);
//让count渐渐的显示,其他兄弟渐渐的隐藏
$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
});
$(".arrow-left").click(function () {
count--;
if(count == -1){
count = $(".slider li").length - 1;
}
console.log(count);
//让count渐渐的显示,其他兄弟渐渐的隐藏
$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
});
});
</script>
<!-- 图片轮播的思路是:
点击右边的按钮,图片向前移动一张:分析==》
(1)给右边的按钮注册事件----(2)点击一下,索引加1----(3)判断是否是最后一张---(4)若果是,索引值为0.---(5)对应图片的索引值显示出来,其他的兄弟元素消失。
点击左边边的按钮,图片向后移动一张:分析==》
(1)给右边的按钮注册点击事件--(2)点击一下,索引减1---(3)判断是否是负1,----(4)若是,索引值为图片的长度减1---(5)对应图片的索引值显示出来,其他的兄弟元素消失。
注意点:索引值最初为0,但是它表示第一张图片哦; 当它为leng-1时,表示的是最后一张图片; 所以索引值为length时,重新将索引值赋值为0;
因此当点击左边的按钮时,索引为0时,表示第一张图片哦 所以索引值为-1时,重新将索引值赋值为length-1.
-->
- javascript 实现图片轮播和点击切换功能
图片轮播是网页上一个比较常见的功能,下面我们来实现他吧 原理很简单: 1:固定的区域,所有的图片重叠,一次只能显示一张图片 2:通过改变图片的zIndex属性改变显示的图片,就可以达到切换的效果了 & ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- JavaScript实现图片轮播组件
效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供 ...
- 基于面向对象的图片轮播(js原生代码)
无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...
- jquery 图片轮播demo实现
转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...
- 图片轮播图插件的使用 unslider!!!
1.百度图片轮播图unslider,第一个就会出现jquery unslider轮播图,点击进去,下载网站提供的文件,解压,内部有我们需要使用的各种js,图片等. 2.在自己的eclipse或者int ...
- JQuery slidebox实现图片轮播
jQuery图片轮播(焦点图)插件jquery.slideBox,简单设置下参数就可以多个多种动画效果,左右,上下,速度,还可指定默认显示第N张,点击的按钮在现代浏览中可以实现圆形或圆角效果,插件代码 ...
- JQ图片轮播
<script src="{staticurl action="jquery.js" type="js"}"></scri ...
随机推荐
- 用函数模拟简单的购物车(Python)
""" 购物车功能: a.引导用户输入金额 b.给用户展示所有的商品 c.引导用户输入需要进行的操作[添加 删除 结算购物车 退出] d.引导用户选择商品 e.引导用户输 ...
- layUI学习第五日:layUI布局系列二
6.列偏移 列偏移可针对不同屏幕的标准进行设定,只会在桌面屏幕下有效,当低于桌面屏幕的规定的临界值,就会堆叠排列. <div class="layui-col-md4 layui-co ...
- Go 字符串 (string)
字符串类型为 string,使用双引号或者反引号包起来 字符串形式 反引号 当使用反引号时不会对字符串进行转义,并可以包含多行文本 示例: package main import "fmt& ...
- php strlen和mb_strlen
结果: 结论:如果没有中文,尽量使用strlen
- python做中学(五)多线程的用法
多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进度条 ...
- Spring MVC整合FreeMarker
什么是Freemarker? FreeMarker是一个用Java语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或 ...
- C++ delete 和 delete []的区别
转载自https://blog.csdn.net/cbNotes/article/details/38900799 1.我们通常从教科书上看到这样的说明:delete 释放new分配的单个对象指针指向 ...
- idea整合svn
如果遇到找不到svn.exe的情况.可以重新运行svn的安装程序.勾选上svn的安装.
- c# winfrom 更新控件时停止刷新,解决闪烁问题
static Dictionary<Control, bool> m_lstFreezeControl = new Dictionary<Control, bool>(); / ...
- go-GUI-代码
直接看网址吧,所有的GO-GUI代码!~~~~ 网址