jquery插件实现轮播图效果


Posted in jQuery onOctober 19, 2020

本文实例为大家分享了jquery插件实现轮播图的具体代码,供大家参考,具体内容如下

轮播图的实现(jquery插件)
需要引入jquery插件,去jquery官网搜索

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 list-style: none;
 }

 img {
 display: block;
 }

 .slider {
 height: 340px;
 width: 790px;
 margin: 100px auto;
 position: relative;
 overflow: hidden;
 }

 .slider li {
 position: absolute;
 display: none;
 }

 .slider li:first-child {
 display: block;
 }

 /*文字部分的样式*/

 .slider li p {
 position: absolute;
 width: 100%;
 padding: 10px 0;
 text-indent: 2em;
 background-color: rgba(0, 0, 0, .6);
 bottom: 0;
 left: 0;
 font-size: 18px;

 /*给文字设置位移到底部去*/
 transform: translate3d(0, 100%, 0);
 /*添加过渡*/
 transition: all .8s;
 }

 /*当前展示li 下的文字样式*/

 .slider li.current p {
 /*文字位移到0的位置,正常显示*/
 transform: translate3d(0, 0, 0);
 }

 .slider li a {
 color: #fff;
 }

 .arrow {
 display: none;
 }

 .slider:hover .arrow {
 display: block;
 }

 .arrow-left,
 .arrow-right {
 font-family: "SimSun", "宋体";
 width: 30px;
 height: 60px;
 background-color: rgba(0, 0, 0, 0.1);
 position: absolute;
 top: 50%;
 margin-top: -30px;
 cursor: pointer;
 text-align: center;
 line-height: 60px;
 color: #fff;
 font-weight: 700;
 font-size: 30px;
 }

 .arrow-left:hover,
 .arrow-right:hover {
 background-color: rgba(0, 0, 0, .5);
 }

 .arrow-left {
 left: 0;
 }

 .arrow-right {
 right: 0;
 }
 </style>
</head>
<body>
 <div class="slider">
 <ul>
 <li>
 <a href="#" >
  <img src="image/1.jpg" alt="">
  <p>这是第1张图片的文字说明</p>
 </a>
 </li>
 <li>
 <a href="#" >
  <img src="image/2.jpg" alt="">
  <p>这是第2张图片的文字说明</p>
 </a>
 </li>
 <li>
 <a href="#" >
  <img src="image/3.jpg" alt="">
  <p>这是第3张图片的文字说明</p>
 </a>
 </li>
 <li>
 <a href="#" >
  <img src="image/4.jpg" alt="">
  <p>这是第4张图片的文字说明</p>
 </a>
 </li>
 <li>
 <a href="#" >
  <img src="image/5.jpg" alt="">
  <p>这是第5张图片的文字说明</p>
 </a>
 </li>
 <li>
 <a href="#" >
  <img src="image/6.jpg" alt="">
  <p>这是第6张图片的文字说明</p>
 </a>
 </li>
 <li>
 <a href="#" >
  <img src="image/7.jpg" alt="">
  <p>这是第7张图片的文字说明</p>
 </a>
 </li>
 <li>
 <a href="#" >
  <img src="image/8.jpg" alt="">
  <p>这是第8张图片的文字说明</p>
 </a>
 </li>
 </ul>
 <!--箭头-->
 <div class="arrow">
 <span class="arrow-left"><</span>
 <span class="arrow-right">></span>
 </div>
 </div>
 <script src="../jquery-2.2.4.js"></script> //jquery插件
 <script>
 //1、定义一个索引,且设置第一张图片为默认
 var index = 0;
 $('ul>li').eq(index).addClass('current').siblings().removeClass('current');
 //2、右边按钮的点击
 $('.arrow-right').click(function(){
 index++;
 //判断图片是否超过最后一张,则重新赋值
 if(index == $('ul>li').length){
 index = 0;
 }
 showImage();
 })
 左边按钮的实现
 $('.arrow-left').click(function(){
 index--;
 if(index < 0) index = $('ul>li').length - 1;
 showImage()
 });
 function showImage(){
 $('ul>li').eq(index).addClass('current').fadeIn().siblings().removeClass('current').fadeOut();
 }

 //实现自动轮播
 var times = '';
 //鼠标移入停止播放
 $('.slider').mouseover(function(){
 clearInterval(times)
 })
 //鼠标移出,停止
 $('.slider').mouseout(function(){
 times = setInterval(function(){
 $('.arrow-right').click();
 },3000)
 });
 $('.slider').mouseout();

 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery遮罩层实例讲解
May 11 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 #jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 #jQuery
jquery简易手风琴插件的封装
Oct 13 #jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 #jQuery
jQuery实现二级导航菜单的示例
Sep 30 #jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 #jQuery
jQuery实现带进度条的轮播图
Sep 13 #jQuery
You might like
常见php数据文件缓存类汇总
2014/12/05 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
Django models filter筛选条件详解
2020/03/16 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
JAVA高级程序员面试题
2013/09/06 面试题
个人简历中的自我评价范例
2013/10/29 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏