图片轮播图_点击左右按钮切换_轮播自由控制效果jq实现
管理员 发布于 7年前 398
<style type="text/css">
.img-scroll { position:relative; margin:20px auto; width:100%;}
.img-scroll .prev,.img-scroll .next { position:absolute;top: 200px;color: #999;font-size: 60px;}
.img-scroll .prev { left:0;cursor:pointer;}
.img-scroll .next { right:0;cursor:pointer;}
.img-list { position:relative; width:320px;height: 635px; margin-left:75px; overflow:hidden}
.img-list ul { width:100%;}
.img-list li { float:left; display:inline; width:100%;height:100%; margin-right:10px; background-color:#BDBDDF; text-align:center;}
</style>
<div class="img-scroll">
<span class="prev"><</span>
<span class="next">></span>
<div class="img-list">
<ul>
<li><img style="width:100%;" src="images/005-1.png"></li>
<li><img style="width:100%;" src="images/005-2.png"></li>
<li><img style="width:100%;" src="images/005-3.png"></li>
<li><img style="width:100%;" src="images/005-4.png"></li>
</ul>
</div>
</div>
<script type="text/javascript">
function DY_scroll(wraper,prev,next,img,speed,or)
{
var wraper = $(wraper);
var prev = $(prev);
var next = $(next);
var img = $(img).find('ul');
var w = img.find('li').outerWidth(true);
var s = speed;
next.click(function()
{
img.animate({'margin-left':-w},function()
{
img.find('li').eq(0).appendTo(img);
img.css({'margin-left':0});
});
});
prev.click(function()
{
img.find('li:last').prependTo(img);
img.css({'margin-left':-w});
img.animate({'margin-left':0});
});
if (or == true)
{
ad = setInterval(function() { next.click();},s*1000);
wraper.hover(function(){clearInterval(ad);},function(){ad = setInterval(function() { next.click();},s*1000);});
}
}
DY_scroll('.img-scroll','.prev','.next','.img-list',3,false);// true为自动播放，不加此参数或false就默认不自动
</script>效果图就不贴了 需要的自己试试 改改就能用
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
该博客于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
友情链接
