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实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jquery实现轮播图特效
Apr 12 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中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
js验证表单大全
2006/11/25 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
JS中Location使用详解
2015/05/12 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
python中的字典详细介绍
2014/09/18 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
python 处理string到hex脚本的方法
2018/10/26 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
Python新手学习raise用法
2020/06/03 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
超市5.1促销活动
2014/01/15 职场文书
学校课外活动总结
2014/05/08 职场文书
2014年销售工作总结
2014/12/01 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
MYSQL如何查看操作日志详解
2022/05/30 MySQL