jquery 图片轮播demo实现
转载注明出处！！！
转载注明出处！！！
转载注明出处！！！
图片轮播demo，弄清楚过程其实是一个很简单的东西，看网上都没有什么实质性的代码，就自己把过程捋了一遍实现了。
这次因为随手写的，所以没有做什么通用性的修改，纯粹想到哪写到哪，大神们别说我就好了。
思路就是显示一张图片，其他图片隐藏掉，很简单吧。。。
由于用到了我博客里面的IcoMoon字体图标，还用到了bootscript的栅格系统用来居中（纯属多余）可以自己看下
废话不多说，直接上代码，还是一样的，注释很清楚了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="font/style.css">
<title>Document</title>
<style>
img{
width: 700px;
height:450px;
position: absolute;
}
.my_center{
text-align:center;
}
.none{
display: none;
}
ul{
padding: 0px;
}
li
{
list-style-type: none; }
.box{
position: relative;
width: 700px;
height:450px;
margin: 0 auto;
}
.left{
left: 0px;
}
.right{
right: 0px;
}
.pic_button{
position: absolute;
top: 0px;
bottom: 0px;
margin: auto 0;
width: 40px;
height: 60px;
display: none;
opacity: 0.3;
background-color: #888888;
border: 0px;
outline-style:none;
z-index: 100;
}
.lineList{
display: none;
position: absolute;
left: 0px;
right: 0px;
bottom: 10px;
margin: 0 auto;
z-index:100;
}
span{
color :#CCCCCC;
}
.lineList li{
display: inline;
margin: 5px;
</style>
<script type="text/javascript" src = "./js/jquery.js"></script>
</head>
<body class= "scrollbar">
<div class = "row">
<div class = "col-md-12 my_center">
<div id = "box" class = "box">
<button id = "Previous" class = "left pic_button">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
<ul>
<li>
<img class = "none" src="./img/1.jpg">
</li>
<li>
<img class = "none" src="./img/2.jpg">
</li>
<li>
<img class = "none" src="./img/3.jpg">
</li>
<li>
<img class = "none" src="./img/4.jpg">
</li>
<li>
<img class = "none" src="./img/5.jpg">
</li>
<li>
<img class = "none" src="./img/6.jpg">
</li>
<li>
<img class = "none" src="./img/7.jpg">
</li>
<li>
<img class = "none" src="./img/8.jpg">
</li>
</ul>
<button id = "next" class = "right pic_button">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div>
</div>
</body>
</html>
<script>
$(function(){
//初始化
var img_index = 0;
var img = $("#box img");
var img_len = img.length;
img.eq(0).show();
var id;
//开启定时器，设置轮播时间
id = setInterval(show_abs,1000);
//轮播函数
function show_abs(isPrevious){
//设置默认值是为了在不点击按钮的时候自动轮播
//这里为什么这么写？你试试用普通的写法就知道了。
var isNext = arguments[0] ? true : arguments[0];
//为什么判断是isPrevious而不是isNext，你试试就知道了。
var next = isPrevious?-1:1;
img.eq(img_index).fadeOut(1000);
img_index += next;
//判断范围
if(img_index == img_len)
img_index = 0;
if(img_index == -1)
img_index = img_len-1;
img.eq(img_index).fadeIn(1000);
$(".lineList li").eq(img_index).find("span").prop('class','icon-radio-checked');
$(".lineList li").eq(img_index).siblings().find("span").prop('class','icon-radio-unchecked');
}
//鼠标悬停的时候暂停轮播，并显示相关组件
$("#box").hover(function(){
$(".lineList").fadeIn(500);
$(".pic_button").fadeIn(500);
clearInterval(id);
},function(){
$(".lineList").fadeOut(500);
$(".pic_button").fadeOut(500);
id = setInterval(show_abs,1000);
});
$("#Previous").on('click',function(){
show_abs(true);
});
$("#next").on('click',function(){
show_abs(false);
});
//插入一行索引
var lineList = '<ul class = "lineList">';
for(var i = 0; i < img_len; i++)
{
lineList += "<li><span class = 'icon-radio-unchecked'></span></li>";
}
lineList += '</ul>';
$("#box").append(lineList);
//初始化索引显示
$(".lineList li").eq(0).find("span").prop('class','icon-radio-checked');
$(".lineList li").each(function(i){
$(this).click(function(){
//点击以后的效果
$(this).find("span").prop('class','icon-radio-checked');
$(this).siblings().find("span").prop('class','icon-radio-unchecked');
//点击以后图片的切换
if(i != img_index)
{
img.eq(img_index).fadeOut(1000);
img.eq(i).fadeIn(1000);
img_index=i;
}
});
});
});
</script>
jquery 图片轮播demo实现的更多相关文章
- Jquery 图片轮播实现原理总结
Jquery 图片轮播实现原理总结 以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下. 首先说下,我在网上找的例子全是用的UL ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
- jquery图片轮播插件slideBox
效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...
- jquery图片轮播效果(unslider)
今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...
- 面板支持单个，多个元素的jQuery图片轮播插件
一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- Jquery图片轮播和CSS图片轮播
学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...
- jQuery 图片轮播的代码分离
以前遇到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号. html代码,以及对应的css代码: <div id=&q ...
随机推荐
- Python的字节编译
1.什么是Python的.pyc文件 在python中 .pyc文件是指以.pyc为后缀名的这一类文件,在我们的python的安装目录里,找到模块所在的目录Lib会看到很多以.py结尾的模块文件,与之 ...
- bzoj3648: 寝室管理（环套树+点分治）
好题..写了两个半小时hh,省选的时候要一个半小时内调出这种题目还真是难= = 题目大意是给一棵树或环套树,求点距大于等于K的点对数 这里的树状数组做了一点变换.不是向上更新和向下求和,而是反过来,所 ...
- 基于 Jenkins 快速搭建持续集成环境
什么是持续集成 随着软件开发复杂度的不断提高,团队开发成员间如何更好地协同工作以确保软件开发的质量已经慢慢成为开发过程中不可回避的问题.尤其是近些年来,敏捷(Agile) 在软件工程领域越来越红火 ...
- 迷你MVVM框架 avalonjs 实现上的几个难点
经过两个星期的性能优化,avalon终于实现在一个页面绑定达到上万个的时候不卡顿的目标(angular的限制是2000).现在稍作休息,总结一下avalon遇到的一些难题. 首先是如何监控的问题.所有 ...
- android-plugmgr源代码分析
android-plugmgr是一个Android插件加载框架,它最大的特点就是对插件不需要进行任何约束.关于这个类库的介绍见作者博客,市面上也有一些插件加载框架,但是感觉没有这个好.在这篇文章中,我 ...
- 如何在没有域的环境中搭建AlwaysOn（一）
对DBA而言,不需要域就可以搭建SQL Server AlwaysOn是Windows Server 2016中最令人兴奋的功能了,它不仅可以降低搭建的成本,而且还减少了部署和运维的工作量. 该特性可 ...
- 开始研究web，mark一下
之前想要搞引擎,经过思考之后,定位为webgl方面的引擎,这个决定早就做了,只是没有写下来 做了一些调研之后,确定使用babylon.js 和typescript 和c# 来开发 Babylo ...
- MVC缓存
MVC入门系列教程-视频版本,已入驻51CTO学院,文本+视频学效果更好哦.视频链接地址如下: 点我查看视频.另外,针对该系列教程博主提供有偿技术支持,群号:226090960,群内会针对该教程的问题 ...
- C语言 · 2的次幂表示
问题描述 任何一个正整数都可以用2进制表示,例如:137的2进制表示为10001001. 将这种2进制表示写成2的次幂的和的形式,令次幂高的排在前面,可得到如下表达式:137=2^7+2^3+2^0 ...
- TODO：软件升级的那些事
TODO:软件升级的那些事 软件升级,指软件从低版本向高版本的更新.由于高版本常常修复低版本的部分BUG,所以经历了软件升级,一般都会比原版本的性能更好,得到优化的效果,用户也能有更好的体验. 最近常 ...