jQuery无缝滚动轮播图

//html部分<div class="lunbo right">    <div class="show">        <a href="#"><img src="images/cbda425ea72ec5013b8388ae982e9a52.jpg" alt=""/></a>        <a href="#"><img src="images/5fe7763e7458e23e6ebeaa682e25a472.jpg" alt=""/></a>        <a href="#"><img src="images/9e5d942d12063976efcfff0c6c0d1f52.jpg" alt=""/></a>        <a href="#"><img src="images/45a94c6843a097d5984cabbf2489e41f.jpg" alt=""/></a>        <a href="#"><img src="images/748072bc51445e5c2c1f0a2184e95142.jpg" alt=""/></a>        <a href="#"><img src="images/230289326a4063dee5e4b7d0cb5c4c81.jpg" alt=""/></a>        <a href="#"><img src="images/f2c22e6ec669000ba5765971005b53aa.jpg" alt=""/></a>        <a href="#"><img src="images/d139797b6e1ecd8185f0f7ca771cf9be.jpg" alt=""/></a>    </div>    <div class="point">        <span>1</span><span>2</span><span>3</span><span>4</span>        <span>5</span><span>6</span><span>7</span><span>8</span>    </div>    <div class="btn btn_l">&lt;</div>    <div class="btn btn_r">&gt;</div></div>

//css部分
.banner{width: 100%;height: 480px;}.banner1{width: 1200px;height: 100%;margin: 0 auto;}.lunbo{width: 1000px;height: 100%;position: relative;overflow: hidden;}.show{width: 10000px;height: 100%;position: absolute;top: 0;left: 0;}.show a{float: left;}.point{position: absolute;left: 400px;bottom: 10px;}.point span{float: left;width: 25px;height: 25px;margin:0 5px;cursor: pointer; border-radius: 100%;color: #fff;text-align: center;line-height: 25px; background: #555;opacity: 0.8;filter: alpha(opacity=80);}.point .on{background-color: #ff6a00;}.btn {width: 40px;height: 70px;background-color: #808080;opacity: 0.7; filter:alpha(opacity=70); position:absolute;top:50%;margin-top:-35px;cursor:pointer;text-align:center;line-height:70px;font-size:60px;color:#fff;font-family:simsun;display:none;}.btn_l { left:0;}.btn_r { right:260px;}.lunbo:hover .btn {display:block;}

//js部分
function lunbo(oshow,olunbo,opoint,obtl,obtr,oleft) {    var i = 0;    var clone = $("a",oshow).first() .clone();//克隆第一张图片    $(oshow).append(clone);//复制到列表最后    var size = $("a",oshow).size();    $("span",opoint).first().addClass("on");    /*自动轮播*/    var t = setInterval(function () { i++; move();},3000);    /*鼠标悬停事件*/    $(olunbo).hover(function () {        clearInterval(t);//鼠标悬停时清除定时器    }, function () {        t = setInterval(function () { i++; move(); }, 3000); //鼠标移出时清除定时器    });    /*鼠标滑入圆点事件*/    $("span",opoint).hover(function () {        var index = $(this).index();//获取当前索引值        i = index;        $(oshow).stop().animate({ left: -index * oleft }, 500);        $(this).addClass("on").siblings().removeClass("on");    });    /*左右按钮*/    $(obtl).click(function () {i++;move();});    $(obtr).click(function () {i--;move();});    /*滚动事件*/    function move() {        if (i == size) {            $(oshow).css({ left: 0 });            i = 1;        }        if (i == -1) {            $(oshow).css({ left: -(size - 1) * oleft });            i = size - 2;        }        $(oshow).stop().animate({ left: -i * oleft }, 500);        if (i == size - 1) {            $("span",opoint).eq(0).addClass("on").siblings().removeClass("on");        } else {            $("span",opoint).eq(i).addClass("on").siblings().removeClass("on");        }    }}
lunbo(".show",".lunbo",".point",".btn_l",".btn_r",1000);
 
				
时间: 2024-12-14 23:06:42

jQuery无缝滚动轮播图的相关文章

js原生选项(自动播放无缝滚动轮播图)二

今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走的代码,也可以放向左走的代码,然后在js加载的时候先执行一次,保证页面加载的时候轮播图是自动播放的,当然在鼠标悬停在遮罩层的时候我们需要清除这个定时器,让自动播放功能关闭,然后在鼠标再次移出遮罩层的时候再次开启定时器,这样就实现了自动播放的功能.然后今天的轮播图中我添加了开关的功能,这个开关是为了避

js原生选项(包含无缝滚动轮播图)一

原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添加,注意this的指向和自定义属性的应用 html代码: <div id="tab"> <input class="on" type="button" value="aaa"> <input type

无缝滚动轮播图

代码: 1 $(function() { 2 var index = 1; 3 var index1 = 0; 4 $('.right').click(function() {// 点击显示下一张 5 index++; 6 index1++; 7 if (index1 > 4) { 8 index1 = 0; 9 } 10 // console.log(-100*index+'%'); 11 $('#img').animate({ 12 left: -100 * index + '%' 13 }

JS纯生实现无缝滚动轮播图

1.定时器加上以后需要进入一次才能引用,所以在上面提前调用一次定时器: 2.当在实现下标小按钮的时候一定要给第三部的num赋值: 3.切记谁做动画谁加定位

jQuery淡入淡出轮播图实现

大家好我是QD小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果明显感觉好了许多.现在我就来分享下自己写轮播图的思路和方法. HTML部分: <div id="img-box" style="width:700px; height:350px;"> <img style="opacity: 1;" wid

Jquery淡入淡出轮播图

Jquery淡入淡出轮播图 因为代码不多所以我就写一个html文件里了 html代码 <div class="banner"> <ul> <li><a href="javascript:;"><img src="./1 (1).png" /></a></li> <li><a href="javascript:;"><

基于Jquery实现的轮播图

前阵子我用js写了一个轮播图,现在的话换成jQuery来实现,先看看效果图 首先是html结构,如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery版图片轮播</title> <link rel="stylesheet" href="css/index.css" /> &l

简单的左右滚动轮播图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .slide { width: 100%; height: 100%; } .slider{ width: 100%; height: 100%; position: relative; cursor:

jQuery实现简易轮播图的效果

(图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue angular中,加油~~~) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &