jquery学习之自动轮播
jquery学习之自动轮播
效果图 请看本站首页轮播图,本人较懒没有写图片轮播的动画效果,需要更多动画效果的可以自己写! 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>博客轮播</title> </head> <style> #ad{ width:100%; display: flex; height: 260px; z-index: 1; box-shadow: #ddd 1px 1px 5px; } .lb{ display: none; width: 100%; height: 260px; } .li{ width: 15px; height: 15px; line-height: 15px; list-style: none; text-align: center; color:rgb(8, 152, 212); border: paleturquoise 1px solid; border-radius: 50%; padding: 3px; z-index: 2; margin-right: 5px; } .id{ background: paleturquoise; } .ceng{ display: flex; float: right; margin-top: -40px; margin-right: 20px; } </style> <body> <div id="ad"> <img class="lb" src="http://hkiii.cn/content/uploadfile/tpl_options//lunbo.jpg"/> <img class="lb" src="http://hkiii.cn/content/uploadfile/tpl_options//lunboii.jpg"/> <img class="lb" src="http://hkiii.cn/content/uploadfile/tpl_options//lunboiiii.jpg"/> </div> <div class="ad"> <ol class="ceng"> <li class="li">1</li> <li class="li">2</li> <li class="li">3</li> </ol> </div> </body> <script src="../jquery.min.js"></script>//这里引入jquery文件,自己去官网下载引入! <script> $('#ad .lb').eq(0).show();//显示第一张图 $('.ad .li').eq(0).addClass('id');//显示第一个指示点 for(var i=0;i<$('.ad li').length;i++){ $('.ad .li').eq(i).attr('abc',i); } var runs = setInterval(run,3000);//设置轮播时长 var num = 0;//初始化 function run(){ $('#ad .lb').eq(num).hide(); //隐藏上一张图片 $('.ad .li').removeClass('id'); //删除一个指示点样式 num++; $('.ad .li').eq(num).addClass('id');//添加一个指示点样式 $('#ad .lb').eq(num).slideDown(1000);//显示下一张图片 if(num>=$('.ad .li').length-1){ num=-1; } } $('.ad .li').mouseover(function(){ $('.ad li').removeClass('id'); //添加一个指示点样式 $(this).addClass('id'); //删除一个指示点样式 $('#ad .lb').hide(); $('#ad .lb').eq($(this).attr('abc')).show(); clearInterval(runs); //停止轮播 }) $('.ad .li').mouseout(function(){ runs = setInterval(run,3000); //重新设置轮播时长 num = $(this).attr('abc'); //获取列表的排序 }) </script> </html>
 2021-11-7
     跳转到第 页,共 1 页
    页面
    js
    铭记国耻
    编程
    轮播图
    nodejs
    HTML
    css
    弹性布局
    robots
    QQx
    下载
    node
    安装
    心情
    图形
    uniapp
    墨菲定律
    说说
    Es6
    Emlog小程序
    javaScript
    PhotoShop
    爬虫
    QQ
    SSM
    axios
    Mac
    九一八事变
    事件
    微信小程序
    Mybatis
    软件
    Vue脚手架
    内容安全
    VUE
    递归算法
    新拟态效果
    emlog
    系统
    小程序
    表单提交
    Java
    Vuex
    笔记
    缓存
    模板
    PS
    微信
    自动化测试
    工具
    源码
    空间
    web
    铭记
    教学
    QQ小程序
    Brief
    电脑
    测试
    Downie4
    名片赞助手
    IO流
    SQL
    JSP
    晚安心语
    教程
    jQuery
    代码
    代码高亮
    邮箱验证
    服务端
    SEO
    表白墙
    插件
    ajax
    Servlet
    Spring
    Json
    文章
    Python
    封装
    正则表达式
    PHP
    Fabric
    图片上传
    三层架构
    伪静态
    promise
    前端
    数据库
    箭头函数
    MYSQL
    Spring-MVC

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

标签