Jquery+css实现图片无缝滚动轮播
Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简。为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享一下
最终实现界面如下:
页面加载时,自动轮播,轮播鼠标悬停在整个banner容器的时候,两边会显示向左,向右按钮,鼠标悬停在中下方索引圆圈的上面,自动跳转到相应的图片。
banner容器里面包含了图片列表img,索引圆圈 num,还有按钮两个btn
<div class="banner">
<ul class="img">
<li><img src="data:image/1.jpg" alt=""/></li>
<li><img src="data:image/2.jpg" alt="" /></li>
<li><img src="data:image/3.jpg" alt="" /></li>
<li><img src="data:image/4.jpg" alt="" /></li>
</ul>
<ul class="num"> </ul>
<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>
</div>
以下是CSS样式表,直接拷贝,可看到效果,只是没有使用JS实现轮播事件而已,
<style type="text/css">
*{ padding:0px; margin:0px;list-style:none;}
.banner { width:500px; height:300px; margin:100px auto; border:1px solid #; position:relative; overflow:hidden;}
.banner .img{width:5000px; position:absolute; left:0px;top:0px;}
.banner .img img{width:500px; height:300px;}
.banner .img li{float:left;}
.banner .num { position:absolute; width:%; bottom:10px; left:0px; text-align:center; font-size:0px;}
.banner .num li { width:10px; height:10px; background-color:#; border-radius:%;display:inline-block; margin:0px 3px; cursor:pointer;}
.banner .num li.on {background-color: #ff6a00;}
.banner .btn {width: 30px;height: 50px;background-color: #;opacity: 0.5; filter:alpha(opacity:0.5); position:absolute;top:%; margin-top:-25px;
cursor:pointer;
text-align:center;
line-height:50px;
font-size:40px;
color:#fff;
font-family:"宋体";
display:none;
}
.banner .btn_l { left:0px;}
.banner .btn_r { right:0px;}
.banner:hover .btn { display:block;}
</style>
以下是JS各个事件的调用,使用前别忘记引用jquery文件,我这里引用的是 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript"> $(document).ready(function () { var i = ; var clone = $(".banner .img li").first().clone();//克隆第一张图片
$(".banner .img").append(clone);//复制到列表最后
var size = $(".banner .img li").size(); for (var j = ; j < size-; j++) {
$(".banner .num").append("<li></li>");
} $(".banner .num li").first().addClass("on"); /*自动轮播*/ var t = setInterval(function () { i++; move();},); /*鼠标悬停事件*/ $(".banner").hover(function () {
clearInterval(t);//鼠标悬停时清除定时器
}, function () {
t = setInterval(function () { i++; move(); }, ); //鼠标移出时清除定时器
}); /*鼠标滑入原点事件*/ $(".banner .num li").hover(function () { var index = $(this).index();//获取当前索引值
i = index;
$(".banner .img").stop().animate({ left: -index * }, );
$(this).addClass("on").siblings().removeClass("on");
}); /*向左按钮*/
$(".banner .btn_l").click(function () {
i++;
move();
}) /*向右按钮*/
$(".banner .btn_r").click(function () {
i--;
move();
}) /*移动事件*/
function move() {
if (i == size) {
$(".banner .img").css({ left: });
i = ;
}
if (i == -) {
$(".banner .img").css({ left: -(size - ) * });
i = size - ;
}
$(".banner .img").stop().animate({ left: -i * }, ); if (i == size - ) {
$(".banner .num li").eq().addClass("on").siblings().removeClass("on");
} else {
$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
}
}
}); </script>
拷贝起来很方便即用。
Jquery+css实现图片无缝滚动轮播的更多相关文章
- 3、js无缝滚动轮播
另一个无缝滚动轮播,带暂停,由于js是异步,用C面向过程的思想开始会很怪异很怪异,因为当你定时器里面需要执行的函数时间比较长或是有一段延时时,异步的代码会完全不同,但习惯就好了. 这个代码有几个问题, ...
- jQuery仿淘宝图片无缝滚动轮播
自己前天,也就是1月8日的时候早上自己写了一个图片滚动轮播(基于jQuery). 其实几个月以前就有朋友问过我怎么做出和淘宝上面一样的滚动轮播,一直到现在也没有真正的写好,这次写得差不多了. 但是还有 ...
- JS实现文字向上无缝滚动轮播
效果图: 全部代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- CSS和jQuery分别实现图片无缝滚动效果
一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- jQuery实际案例①——淘宝精品广告(鼠标触碰切换图片、自动轮播图片)
遇到的问题:自动轮播的实现,实质与轮播图一样儿一样儿的,不要被不同的外表所欺骗,具体的js代码如下:
- jquery左右切换的无缝滚动轮播图
1.HTML结构: <head> <script type="text/javascript" src="../jquery-1.8.3/jquery. ...
- 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)
项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...
- JQuery 滚动轮播
css: *{margin: 0;padding: 0;}body{font-size: 12px;line-height: 24px;text-algin: center; }a{color: #f ...
- 原生JS简单的无缝自动轮播
最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了 ...
随机推荐
- 配置was7、并部署发布项目!
1:进入服务器,选择WebSphere Application Server,进入server1,右侧进入服务器基础结构,进入java和进程管理,进入进程定义 2:在页面左边菜单中选择java虚拟机, ...
- LIKE匹配关键字
1.% 匹配任意数目字符(包括零个字符) SELECT * FROM edo_user WHERE true_name LIKE '王%' 应用:关键字查询 WHERE u.true_name lik ...
- thinkphp G方法的华丽升级
ThinkPHP长期以来需要通过debug_start.debug_end方法甚至Debug类才能完成的功能,3.1版本中被一个简单的G方法取代了,不可不谓是一次华丽升级. G方法的作用包括标记位置和 ...
- 周赛F题 POJ 1458(最长公共子序列)
F - F Time Limit:1000MS Memory Limit:10000KB 64bit IO Format:%I64d & %I64u Description ...
- Sublime Text 3 中文汉化绿色破解特别版下载
Sublime Text是一款代码编辑器,几乎支持所有语言的编写.sublime给人们的印象不外乎小巧.速度快.并且快捷键丰富而强大.不知繁多的插件. sublime一般被应用到前端的开发.Subli ...
- codeforces 232D Fence
John Doe has a crooked fence, consisting of n rectangular planks, lined up from the left to the righ ...
- Java文件末尾追加字符串
Java进行文件输出时,有时候想直接向已有文件末尾追加字符,而不是从头开始写,可以采用以下三种方式实现: package test; import java.io.File; import java. ...
- 用于 Visual Studio 和 ASP.NET 的 Web 应用程序项目部署常见问题
https://msdn.microsoft.com/zh-cn/library/ee942158(v=vs.110).aspx#can_i_exclude_specific_files_or_fol ...
- maven下载jta失败,自己本地安装jta库
mvn install:install-file -Dfile=./jta-1_0_1B-classes.zip -DgroupId=javax.transaction -DartifactId=jt ...
- sqlserver查看索引使用情况以及建立丢失的索引
--查看表的索引使用情况SELECT TOP 1000o.name AS 表名, i.name AS 索引名, i.index_id AS 索引id, dm_ius.user_seeks AS 搜索次 ...