html图片实现左右滑动,jquery实现左右滑动式轮播图
本文实例为大家分享了jquery左右滑动轮播图的具体代码,供大家参考,具体内容如下
图片轮播jq(左右切换)
*{margin: 0;padding:0; }
ul{list-style: none;}
.banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;z-index: 1;}
.img{position: absolute;top: 0;left: 0;}
.des{position: absolute;bottom: 0;left: 0;z-index: -2;background: #ccc}
.des li{float: left;width: 600px;}
.img li{float: left;}
.num{position: absolute;bottom: 10px;width: 100%;text-align: center;font-size: 0;}
.num li{width: 10px;height: 10px;background:rgba(0,0,0,0.5);display: block;border-radius: 100%;display: inline-block;margin: 0 5px;cursor: pointer;}
.btn{display: none;}
.btn span{display: block;width: 50px;height: 100px;background: rgba(0,0,0,0.6);color: #fff;font-size: 40px;line-height: 100px;text-align: center;cursor:pointer;}
.btn .prev{position: absolute;left: 0;top: 50%;margin-top: -50px;}
.btn .next{position: absolute;right: 0;top: 50%;margin-top: -50px;}
.num .active{background-color: #fff;}
.hide{display: none;}
- 第一个
- 第二个
- 第三个
- 第四个
- 第五个
- 第一个
<
>
$(function(){
var i=0;
var timer=null;
for (var j = 0; j < $('.img li').length; j++) { //创建圆点
$('.num').append('
')
}
$('.num li').first().addClass('active'); //给第一个圆点添加样式
var firstimg=$('.img li').first().clone(); //复制第一张图片
$('.img').append(firstimg).width($('.img li').length*($('.img img').width()));
//第一张图片放到最后一张图片后,设置ul的宽度为图片张数*图片宽度
$('.des').width($('.img li').length*($('.img img').width()));
// 下一个按钮
$('.next').click(function(){
i++;
if (i==$('.img li').length) {
i=1; //这里不是i=0
$('.img').css({left:0}); //保证无缝轮播,设置left值
};
$('.img').stop().animate({left:-i*600},300);
if (i==$('.img li').length-1) { //设置小圆点指示
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
$('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
$('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
}
})
// 上一个按钮
$('.prev').click(function(){
i--;
if (i==-1) {
i=$('.img li').length-2;
$('.img').css({left:-($('.img li').length-1)*600});
}
$('.img').stop().animate({left:-i*600},300);
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
$('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
})
//设置按钮的显示和隐藏
$('.banner').hover(function(){
$('.btn').show();
},function(){
$('.btn').hide();
})
//鼠标划入圆点
$('.num li').mouseover(function(){
var _index=$(this).index();
$('.img').stop().animate({left:-_index*600},150);
$('.num li').eq(_index).addClass('active').siblings().removeClass('active');
$('.des li').eq(_index).removeClass('hide').siblings().addClass('hide');
})
//定时器自动播放
timer=setInterval(function(){
i++;
if (i==$('.img li').length) {
i=1;
$('.img').css({left:0});
};
$('.img').stop().animate({left:-i*600},300);
if (i==$('.img li').length-1) {
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
$('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
$('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
}
},1000)
//鼠标移入,暂停自动播放,移出,开始自动播放
$('.banner').hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(function(){
i++;
if (i==$('.img li').length) {
i=1;
$('.img').css({left:0});
};
$('.img').stop().animate({left:-i*600},300);
if (i==$('.img li').length-1) {
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
$('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
$('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
}
},1000)
})
})
更多关于滑动效果的专题,请点击下方链接查看:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html图片实现左右滑动,jquery实现左右滑动式轮播图相关推荐
- php 轮播图插件下载,jquery全屏响应式轮播图插件jquery.flexslider.js
在zblogPHP主题 yunduan 上使用这个轮播幻灯片插件jquery.flexslider.js,分享下使用方法: 这是一款jquery全屏响应式淡入淡出效果轮播图插件.该轮播图插件简单实用, ...
- html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法 在页面中引入jquery. ...
- html 图片轮播渐变,jQuery渐变式轮播图(原创)
插件描述:仿京东渐变式轮播图,自动轮播,左右按钮切换及圆点切换. 1.html代码: < > 2.js代码:$(function() { var index = 0; var timer ...
- 前端性能优化之jQuery按需加载轮播图
引言 关于幻灯轮播图,想必大家都不陌生,尤其是基于 jQuery 的,插件.代码网上一搜一大堆,但是真正符合自己需求的几乎没有,所以我要打造一个符合自身需求,经得起广大网民考验的 jQuery 轮播图 ...
- html轮播图速度加快,jQuery按需加载轮播图(web前端性能优化)
引言 关于幻灯轮播图,想必大家都不陌生,尤其是基于 jQuery 的,插件.代码网上一搜一大堆,但是真正符合自己需求的几乎没有,所以我要打造一个符合自身需求,经得起广大网民考验的 jQuery 轮播图 ...
- html5图片无限循环播放,原生js实现无限循环轮播图效果
知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张 也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offs ...
- jquery实现动态左右无缝轮播图
JQ代码实现动态无缝轮播图功能 相比之下 运用jquery比js原生代码 书写更为方便 简介 通俗易懂 以下为代码: <!DOCTYPE html> <html><hea ...
- jQuery之制作简单的轮播图效果
[源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...
- layui的轮播图片自适应大小_如何使用LayUI实现网页轮播图
详细内容 本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参考价值,希望对学习Layui的朋友有帮助!想要用layui写出来轮播图,需要先下载layui的文档,下载到电脑上就可以了,随便保 ...
- 使用jQuery写一个简单的轮播图(笔记)
html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
最新文章
- 不懂编程的产品经理如何不被程序员吊打?
- 数组的几种排序算法的实现(1)
- Arduino笔记-使用独立电源给Arduino供电并闪灯
- java中的 =运算符_(二十七)、java中的运算符
- 服务器上使用mysql_在服务器上安装、使用MySQL的注意事项
- 敏捷开发智慧敏捷系列之四:每日立会开多久?
- oracle影响性能,影响Oracle性能的几个重要参数
- 【java笔记】成员内部类 局部内部类 匿名内部类
- java总结一:JSON转对象
- python免安装版使用
- CodeVS 1359 数字计数 51nod 1042 数字0-9的数量 Pascal
- 代码维护服务器,维护服务器的利器-pubwin 2009程序代码
- 2017百度之星资格赛—1003度度熊与邪恶大魔王
- 哈工大软件过程与工具----UML图
- [转]int转string string转int
- 一个使用python和TUShare进行股票分析的例子
- ERP工程师做什么?
- 火山PC百集基础教程(火山视窗)
- 【精品,你所不知道的IT高薪】【转贴】清华生7天猎头生活的发现!
- 工具分享 | linemap-快速绘制山峦地图的R可视化包介绍
热门文章
- Python sys模块参考手册
- Mysql_多表查询练习
- Python3爬虫(六) 解析库的使用之Beautiful Soup
- JwPlayer播放器【去除Logo、去除版本信息】
- spring的路径匹配问题
- 关于mount nfs时-o nolock的问题
- MFC中 CArray(template)的应用
- 通过驱动向Excle中写入数据
- ES11新特性_String.prototype.matchAll方法---JavaScript_ECMAScript_ES6-ES11新特性工作笔记063
- 大数据_MapperReduce_Hbase的优化_高可用 预分区_防止数据倾斜_JAVAAPI创建预分区---Hbase工作笔记0026