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用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jquery实现穿梭框功能
Jan 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
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
js实现日期级联效果
2014/01/23 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
Python中的__SLOTS__属性使用示例
2015/02/18 Python
基于Python的关键字监控及告警
2017/07/06 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
Python模块的制作方法实例分析
2019/12/21 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
关于环保的建议书400字
2014/03/12 职场文书
青蓝工程实施方案
2014/03/27 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
小学主题班会教案
2015/08/17 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
Python循环之while无限迭代
2022/04/30 Python
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL