jquery实现京东淘宝首页的轮番效果图
主要是绑定事件以及实现自动滚轮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer{
height:650px;
width: 500px;
border: dashed cadetblue 5px;
margin: 0 auto;
position: relative;
}
/*.num{*/
/*position: absolute;*/
/*left:0;*/
/*top:0;*/
/*}*/
.num li{
height:24px;
width: 24px;
background-color: grey;
border-radius:80%;
/*使每个数字在圈圈之内显示*/
text-align: center;
display: inline-block;
font-size: 20px;
margin: 5px;
cursor: pointer;
} ul li{
list-style: none;
}
.outer .img li{
position: absolute;
left:0;
top:0; }
.num{
position: absolute;
left:0;
/*top:0;*/
bottom: 10px;
font-size: 0;
/*情况num下面文本内容*/
text-align: center;
width: 100%; /*告诉按照宽度的100%来居中*/
}
.button{
height: 60px;
width: 40px;
background-color: darkgoldenrod;
position: absolute;
/*left:0;*/
top:50%;
margin-top: -30px;
/*移动正中间*/
opacity: 0.6;
font-size: 40px;
text-align: center;
line-height:60px;
display: none;
/*默认隐藏起来这个框框*/
}
.btn_right{
right:0;
/*把另外一个标签移动到右边*/
}
.outer:hover .button{
display: block;
}
.outer .num li.current{
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><img src="11.jpg"></li>
<li><img src="22.jpg"></li>
<li><img src="33.jpg"></li>
<li><img src="44.jpg"></li>
<li><img src="55.jpg"></li>
<!--会先显示最后一张,因为在加载中,后面的内容可以理解为离我们更近,就先显示出来了-->
</ul>
<ul class="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li> </ul>
<div class="btn_left button" ><</div>
<div class="btn_right button">></div>
</div> <script src="jquery-3.1.1.js"></script>
<script>
$(function () {
$('.num li').first().addClass('current');
$('.num li').mouseover(function () {
$(this).addClass('current').siblings().removeClass('current');
// 当鼠标悬浮上去就触发该事件
var index = $(this).index();
i=index;
//根据索引值取到对应图片的索引值,fadein后面的参数表示过1秒显示出来,fadeout表示隐藏
$('.img li').eq(index).fadeIn(1000).siblings().fadeOut(1000)
}); // 自动播放图片
i = 0;
var time = setInterval(move, 1500); function move() {
i++;
if (i == 5) {
i = 0;
}
$('.num li').eq(i).addClass('current').siblings().removeClass('current');
$('.img li').eq(i).fadeIn(1000).siblings().fadeOut(1000);
//每1.5秒执行一次,改变数字框框的颜色以及控制图片的显示以及隐藏
} $('.outer').hover(function () {
clearInterval(time)
}, function () {
time = setInterval(move, 1500);
}); $('.btn_right').click(function(){
move()
});
//点击有边框直接往右边走
$('.btn_left').click(function(){
if(i==0){
i=3
}else {i=i-2;} move();
});
});
//触碰div则接触自动更换图片,鼠标离开则继续自动滚动图片 </script>
</body>
</html>
效果如图
jquery实现京东淘宝首页的轮番效果图的更多相关文章
- Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
- 淘宝首页源码藏美女彩蛋(下)(UED新作2013egg)
我们已经知道,执行美女会得到"彩蛋",而正是彩蛋做到了taobaoUED展现给大家的神奇的前端魅力.今天我们来看看FP.egg&&FP.egg("%cjo ...
- js实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
- Android之仿京东淘宝的自动无限轮播控件
在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于Re ...
- 【angularjs】使用angularjs模拟淘宝首页-淘宝头条滚动效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 模仿淘宝首页写的高仿页面,脚本全用的原生JS,菜鸟一枚高手看了勿喷哈
自己仿照淘宝首页写的页面,仿真度自己感觉可以.JS脚本全是用原生JavaScript写得,没用框架.高手看了勿喷,请多多指正哈!先上网页截图看看效果,然后上源码: 上源码,先JavaScript : ...
- Android高仿京东淘宝自动无限循环轮播控件的实现思路和过程
在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的实现思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于 ...
- javascript实现 京东淘宝等商城的商品图片大图预览功能
在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理 当鼠标移入某一图片内部时,图片上部会出现一 ...
- 浅谈android中只使用一个TextView实现高仿京东,淘宝各种倒计时
今天给大家带来的是只使用一个TextView实现一个高仿京东.淘宝.唯品会等各种电商APP的活动倒计时.近期公司一直加班也没来得及时间去整理,今天难得歇息想把这个分享给大家.只求共同学习,以及自己兴许 ...
随机推荐
- matlab 大块注释和取消注释的快捷键
matlab 大块注释和取消注释的快捷键 注释:Ctrl+R 取消注释:Ctrl +T
- logistic regression (逻辑回归) 概述
:http://hi.baidu.com/hehehehello/blog/item/0b59cd803bf15ece9023d96e.html#send http://en.wikipedia.or ...
- Ajax的学习笔记(一)
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),ajax并不是一门单独的语言,而是一种技术,是指一种创建交互式网页应用的网页开发技术. ...
- 旧文备份:安装cygwin及在console下输入和显示中文
1.下载Cygwin.exe文件,双击安装,首先在"Choose A Download Source"的时候选择"Download Without Installing& ...
- springMVC-基本认识
MVC设计模式 Controller Model View SpringMVC 1. 实现MVC设计模式的框架 2. 基于springIOC,是spring的一个子模块,不需要整合 核心组件 1. ...
- Linux入门篇(五)——Shell(一)
这一系列的Linux入门都是本人在<鸟哥的Linux私房菜>的基础上总结的基本内容,主要是记录下自己的学习过程,也方便大家简要的了解 Linux Distribution是Ubuntu而不 ...
- 分析setup/hold电气特性从D触发器内部结构角度
上图是用与非门实现的D触发器的逻辑结构图,CP是时钟信号输入端,S和R分别是置位和清零信号,低有效; D是信号输入端,Q信号输出端; 这里先说一下D触发器实现的原理:(假设S和R信号均为高,不进行置位 ...
- 【HTML】placeholder中换行
表示回车 表示换行 案例 <textarea rows="10" placeholder="测试换行 新的一行"></textarea>
- mysql 安装常用命令,卸载不干净等
安装mysql apt-get install mysql-server apt-get install mysql-client sudo apt-get install libmysqlclien ...
- [BZOJ1009][HNOI2008]GT考试(KMP+DP)
[不稳定的传送门 Solution dp[i][j]表示前i个字符当前匹配到不吉利串的第j个,即当前方案的后缀等于不吉利串前缀 然而由于n过大,不能直接转移,用矩阵优化 Code #include & ...