jQuery图片轮播功能实例代码


Posted in Javascript onJanuary 29, 2017

jquery 轮播图代码如下所示:

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片轮播</title>
<style>
*{margin:0px;padding:0px;}
.one{
float:left;
position:relative;
left:0px;
top:0px;
margin-left:10px;
width:790px;
height:340px;
overflow:hidden;
}
.one ul li{
list-style:none;
}
.photo ul{
float:left;
position:absolute;
height:490px;
left:0px;
top:0px;
}
.photo ul li{
float:left;
padding:0px;
margin:0px;
}
.arrow span{
display:block;
position:absolute;
width:30px;
height:60px;
line-height:60px;
text-align:center;
background:rgba(0,0,0,0.2);
z-index:1;
font-size:20px;
color:#fff;
top:40%;
cursor:pointer;
display:none;
}
.arrow span:hover{
background:rgba(0,0,0,0.7);
}
.arrow .right{
right:0px;
}
.dot{
position:absolute;
z-index:!;
background:rgba(255,255,255,0.2);
font-size:26px;
bottom:15px;
left:300px;
border-radius:22px;
}
.dot ul{
margin:0px;
padding:0px;
}
.dot ul li{
float:left;
padding:0px;
margin:0px;
margin:0 5px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="one">
<div>
<div class="photo">
<ul>
<li><img src="image/1.png" alt="1" /></li>
<li><img src="image/2.png" alt="2" /></li>
<li><img src="image/3.png" alt="3" /></li>
<li><img src="image/4.png" alt="4" /></li>
<li><img src="image/5.png" alt="5" /></li>
<li><img src="image/6.png" alt="6" /></li>
</ul>
</div>
<div class="arrow"><span class="iconfont left">?</span> <span class="iconfont right">?</span></div>
<div class="dot">
<ul>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" ></script>
<script>
$(document).ready(function(){
var ulWidth=$('.photo ul li').length*$('.photo ul li').eq(1).width();
$('.dot ul li').first().css('color','#db192a');
$('.photo ul').width(ulWidth);
$('.photo,.arrow span').hover(function(){$('.arrow span').toggle()})
function jdshow(){
var index=-$('.photo ul').position().left/$('.photo ul li').eq(1).width();
$('.dot ul li').css('color','#fff');
if(index==$('.photo ul li').length-1){index=-1}
$('.dot ul li').eq(index+1).css('color','#db192a');
if($('.photo ul').position().left==-(ulWidth-790)){
$('.photo ul').css('left','790px');//图片宽度
$('.photo ul').clone().appendTo('.photo');
$('.photo ul:first').remove(); 
}
$('.photo ul').animate({
left:'-=790px', 
},10);
}
setInterval(jdshow,2000);
$('.arrow .right').click(function(){
jdshow();
});
$('.arrow .left').click(function(){
/*alert($('.jd-photo ul').position().left);*/
var index=-$('.photo ul').position().left/$('.photo ul li').eq(1).width();
$('.dot ul li').css('color','#fff');
$('.dot ul li').eq(index-1).css('color','#db192a');
if($('.photo ul').position().left==0){
$('.photo ul').css('left',-ulWidth);
$('.photo ul').clone().appendTo('.photo');
$('.photo ul:first').remove(); 
}
$('.photo ul').animate({
left:'+=790px', 
},10);
});
$('.dot ul li').click(function(){
var index=$('.dot ul li').index(this); 
$('.photo ul').animate({
left:-index*790, 
},10);
$('.dot ul li').css('color','#fff');
$(this).css('color','#db192a');
});
})
</script>
</body>
</html>

以上所述是小编给大家介绍的jQuery图片轮播功能实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
javascript Array数组对象的扩展函数代码
May 22 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
jQuery代码实现实时获取时间
Jan 29 #Javascript
用director.js实现前端路由使用实例
Jan 27 #Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 #Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 #Javascript
js监听input输入框值的实时变化实例
Jan 26 #Javascript
jquery实现input框获取焦点的简单实例
Jan 26 #Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 #Javascript
You might like
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
python时间整形转标准格式的示例分享
2014/02/14 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
python实现验证码识别功能
2018/06/07 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
Python3运算符常见用法分析
2020/02/14 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
css3中transition属性详解
2014/09/02 HTML / CSS
24岁生日感言
2014/01/13 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
感恩教育观后感
2015/06/17 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书