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 相关文章推荐
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
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
德生PL550的电路分析
2021/03/02 无线电
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
substr()函数中文版
2006/10/09 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
node 版本切换的实现
2020/02/02 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Django 使用logging打印日志的实例
2018/04/28 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
python实现简单五子棋游戏
2019/06/18 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
骨干教师个人总结
2015/02/11 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers