JQuery实现图片轮播无缝滚动

图片轮播无缝滚动实例

实现效果展示预览：

思路：

1.设置当前索引curIndex,和前一张索引prevIndex。(curIndex为下一次要显示的图片索引，prevIndex为现在看见的图片)

2.点击下一张按钮，图片向左移动；点击前一张按钮，图片向右移动

3.滑动前将要滑入的图片放指定位置，现在的照片prevIndex划走，要滑入的照片curIndex进入

css样式

     <style type="text/css">* {margin: 0;padding: 0;}.box {width: 800px;height: 550px;border: 1px solid #000;margin: 50px auto;position: relative;overflow: hidden;}li {list-style: none;}.imgList {width: 800px;height: 550px;position: relative;overflow: hidden;}.imgList li {position: absolute;left: 800px;}.box img {width: 800px;height: 550px;position: absolute;left: 800px;}.btn {font-size: 40px;color: #fff;width: 50px;height: 80px;box-shadow: 0 0 18px #fff;position: absolute;top: 230px;text-align: center;line-height: 80px;border-radius: 50%;cursor: pointer;}#prev {left: 50px;}#next {right: 50px;}.nav {height: 50px;text-align: center;position: absolute;width: 100%;bottom: 30px;}.nav li {display: inline-block;width: 30px;height: 30px;background: #ccc;}.nav .on {background: #333;}</style>

html主体部分

     <div class="box"><img style="left: 0px;" src="./img/images/show/9/1.jpg" /><img src="./img/images/show/9/2.jpg"/><img src="./img/images/show/9/3.jpg" /><img src="./img/images/show/9/4.jpg" /><img src="./img/images/show/9/5.jpg" /><div id="prev" class="btn"><</div><div id="next" class="btn">></div><ul class="nav"><li class="on"></li><li></li><li></li><li></li><li></li></ul></div>

js部分（使用Jquery实现）

     <script src="js/jquery-1.11.3.js"></script><script>var prevIndex = 0;var curIndex = 0;$("#next").click(function() {//.is(":animated"):正在执行动画返回true，没在执行动画返回falseif ($(".box>img").eq(curIndex).is(":animated")) {return;}if (curIndex >= $(".box>img").length - 1) {curIndex = 0;} else {curIndex++}tab();prevIndex = curIndex;})$("#prev").click(function() {if ($(".box>img").eq(curIndex).is(":animated")) {return;}if (curIndex <= 0) {curIndex = $(".box>img").length - 1;} else {curIndex--;}tab();prevIndex = curIndex;})$(".nav li").click(function() {curIndex = $(this).index();if (curIndex == prevIndex) {return;}tab();prevIndex = curIndex;})//左边按钮：向右边滑动；function tab() {//切大图；if (curIndex == 0 && prevIndex == 4) {//边界2，当前在最后一张，点击next//向左滑动：前一张向左滑动，当前那一张摆放在右边，滑动到当前位置；$(".box>img").eq(prevIndex).animate({left: -800}, 1000)$(".box>img").eq(curIndex).css("left", "800px").animate({left: 0}, 1000)} else if (prevIndex == 0 && curIndex == 4  ) {//边界1，当前在第一张，点击prev//向右滑动：前一张向右滑动，当前那一张摆放在左边，滑动到当前位置$(".box>img").eq(prevIndex).animate({left: 800}, 1000)$(".box>img").eq(curIndex).css("left", "-800px").animate({left: 0}, 1000)} else if (curIndex > prevIndex) {$(".box>img").eq(prevIndex).animate({left: -800}, 1000)$(".box>img").eq(curIndex).css("left", "800px").animate({left: 0}, 1000)} else {$(".box>img").eq(prevIndex).animate({left: 800}, 1000)$(".box>img").eq(curIndex).css("left", "-800px").animate({left: 0}, 1000)}//切小点；$(".nav li").eq(curIndex).addClass("on").siblings().removeClass()}</script>
``

JQuery实现图片轮播无缝滚动相关推荐

jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
利用jQuery实现图片轮播
利用jQuery实现图片轮播需求实现步骤一.获取相关对象二.设置切换按钮三.设置图片首尾相接效果四.随图片切换更新小圆点五.点击小圆点切换图片六.鼠标无操作时图片自动轮播示例需求 ...
jquery:手风琴图片轮播
jquery:手风琴图片轮播 html部分: <!DOCTYPE html> <html> <head lang="en"><meta c ...
html5图片轮播在线制作教程,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
使用jQuery实现图片轮播与切换功能
使用jQuery实现图片轮播与切换功能文章目录使用jQuery实现图片轮播与切换功能效果图一.body 二.jQuery 三.css 四.小结效果图一.body <body>& ...
html鼠标滚动图片渐渐淡出,原生js和jquery实现图片轮播淡入淡出效果
图片轮播有很多种方式,这里采用其中的淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管 ...
jQuery实现图片轮播效果
图片轮播效果 : 在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接; 点击图片左下的标签(或中间的小圆点)切换到对应的图片; 点击图片的左右切换标签; 整体思路 : 自动轮播: 将一个 ...

JQuery实现图片轮播无缝滚动

图片轮播无缝滚动实例

JQuery实现图片轮播无缝滚动相关推荐

最新文章

热门文章