轮播图默认轮播点击原点显示图片
管理员 发布于 6年前 351
<div id="sb_yd">
<div class="lbt">
<div class="lbt_a"><a href=""><img src="xxx1.jpg" alt=""></a></div>
<div class="lbt_a"><a href=""><img src="xxx2.jpg" alt=""></a></div>
</div>
<ul>
<li class="dj_yd" style="position: absolute;width: 5px;height: 5px;z-index: 999;
background: #666;top: 10px;left:48%;padding: 5px 5px;"></li>
<li class="dj_yd" style="position: absolute;width: 5px;height: 5px;z-index: 999;
background: #666;top: 10px;left:50%;padding: 5px 5px;"></li>
</ul>
</div>
<script type="text/javascript">
//轮播图
var num=0;
function run(){
$(".lbt_a").eq(num).fadeIn().siblings().fadeOut();
$(".dj_yd").eq(num).css("background","red").siblings().css("background","#fff");
num++;
if (num==$(".lbt_a").length) {
num=0;
}
}
time = setInterval(run,3000);
//选中圆点
$(".dj_yd").stop().click(function(event){
num=$(this).index();
run();
clearInterval(time);
});
//移进/出图片
$('#sb_yd').stop().hover(function() {
clearInterval(time);
}, function() {
time = setInterval(run,3000);
}
);
</script>效果图就不贴了；
最近在做一个手机版公益网站，现在在写前端模版跟效果，blog更新这类的功能案例比较多
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
该博客于2020-12-7日，后端基于go语言的beego框架开发
前端页面使用Bootstrap可视化布局系统自动生成
是我仿的原来我的TP5框架写的博客，比较粗糙，底下是入口
侯体宗的博客
文章标签
- test 三种扣减库存方案 Hyperf2.1启动报错端口占用 上外网神器Ghelper 上外网神器集装箱 laravel中HMVC模式 Hyperf框架验证器 Hyperf自定义函数编写 Hyperf对象转成数组 PHP2021面试题集 centos7系统上挂载 Hyperf框架 秒杀系统的设计 Laravel Octane PHP数组底层实现原理 php7垃圾回收机制 Laravel中类型转换 mysql事务特征及隔离级别 Linux-awk命令 mysql编码 JWT源码实现 Laravel内核分析 Laravel中的用法 centos7+go环境+beego框架 go+beego框架开发博客 go+beego开发博客首页 go+beego自定义公共函数 beego注册_登录_查询 beego控制器创建 Beego框架安装 go语言环境安装 laravel+Elasticsearc laravel运行原理 windows7搭建Vuejs环境 Laravel分块 laravel去重(distinct() laravel集合 laravel+mysql读写分离 laravel5+复杂原生sql laravel+MissMyCat/al lnmp sessio laravel自定义数组分页 laravel中.env配置 laravel8队列发邮件 码云仓库常用操作 laravel8配置163SMTP laravel8配置全局函数 laravel/jetstream之认证 laravel/jetstream
友情链接
