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.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jQuery实现回到顶部效果
Oct 19 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
文章推荐系统(二)
2006/10/09 PHP
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
python 根据pid杀死相应进程的方法
2017/01/16 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
Tensorflow 多线程设置方式
2020/02/06 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
瑜伽国际:Yoga International
2018/04/18 全球购物
护理专业推荐信
2013/11/07 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
超市活动计划书
2014/04/24 职场文书
文明班级申报材料
2014/12/24 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
父亲去世追悼词
2015/06/23 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
Python实现归一化算法详情
2022/03/18 Python
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL