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 相关文章推荐
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
动态添加js事件实现代码
2009/03/12 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Flask-Mail用法实例分析
2018/07/21 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
如何通过python实现全排列
2020/02/11 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
文员个人的求职信范文
2013/09/26 职场文书
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
用Python爬取某乎手机APP数据
2021/06/15 Python
详解Spring事件发布与监听机制
2021/06/30 Java/Android
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技