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实现全选、全不选以及单选功能
Mar 23 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jQuery实现颜色打字机的完整代码
Mar 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怎样调用MSSQL的存储过程
2006/10/09 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
php curl基本操作详解
2013/07/23 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
微信access_token的获取开发示例
2015/04/16 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
Webpack之tree-starking 解析
2018/09/11 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
进一步探究Python中的正则表达式
2015/04/28 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
python获取本机所有IP地址的方法
2018/12/26 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
思想作风纪律整顿心得体会
2014/09/04 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
2014年评职称工作总结
2014/11/20 职场文书
首席执行官观后感
2015/06/03 职场文书
导游词之天津古文化街
2019/11/09 职场文书