最近用到了图片轮播,经过测试后找到个不错的轮播代码。
推荐两个网址:http://www.jq22.com/jquery-info13688
www.jq22.com/jquery-info13688
在这里分享下:其实原理就是一系列的大小相等的图片平铺,利用CSS布局显示若干图片,其余隐藏。通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片,控制点击事件时的宽度变化
这里我写下手动点击轮播:
首先父容器container存放所有内容,子容器list存在图片
<div id="container"> <div id="list" style="left: -600px;"> <img src="img/5.jpg" alt="1" /> <img src="img/1.jpg" alt="1" /> <img src="img/2.jpg" alt="2" /> <img src="img/3.jpg" alt="3" /> <img src="img/4.jpg" alt="4" /> <img src="img/5.jpg" alt="5" /> <img src="img/1.jpg" alt="5" /> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div>
CSS:
* {margin: 0;padding: 0;text-decoration: none;} body {padding: 20px;} #container {position: relative;width: 600px;height: 400px; border: 3px solid #333;overflow: hidden;} #list {position: absolute;z-index: 1;width: 4200px;height: 400px;} #list img {float: left;width: 600px;height: 400px;} #buttons {position: absolute;left: 250px;bottom: 20px;z-index: 2; height: 10px;width: 100px;} #buttons span {float: left;margin-right: 5px;width: 10px;height: 10px; border: 1px solid #fff; border-radius: 50%;background: #333;cursor: pointer;} #buttons .on {background: orangered; } .arrow { position: absolute; top: 180px; z-index: 2; display: none; width: 40px; height: 40px; font-size: 36px; font-weight: bold; line-height: 39px; text-align: center; color: #fff; background-color: RGBA(0, 0, 0, .3); cursor: pointer;} .arrow:hover { background-color: RGBA(0, 0, 0, .7); } #container:hover .arrow { display: block;} #prev { left: 20px;} #next { right: 20px;}
window.onload = function() { var list = document.getElementById('list'); var prev = document.getElementById('prev'); var next = document.getElementById('next'); function animate(offset) { //获取的是style.left,是相对左边获取距离,所以第一张图后style.left都为负值, //且style.left获取的是字符串,需要用parseInt()取整转化为数字。 var newLeft = parseInt(list.style.left) + offset; list.style.left = newLeft + 'px'; } prev.onclick = function() { animate(600); } next.onclick = function() { animate(-600); } }
我们利用偏移量left来获取图片,当看到left值小于3600时,因为没有第8张图片就出现空白,所以这里我们需要对偏移量做一个判断。
在animate函数里加上一段:
if(newLeft<-3000){ list.style.left = -600 + 'px'; } if(newLeft>-600){ list.style.left = -3000 + 'px'; }
解释:这里控制当翻到最后一张时,从头开始。也可以设置下距离,让其到最后一张时无法往下翻页
相关推荐
基于jQuery的对象切换插件,JQuery图片切换,图片切换
可以直接使用的轮播图资源 带图片 CSS Jquery Html完整的信息 在页面中可直接打开
基于jquery的图片切换插件,下载解压zip包,浏览器打开index.html,此为演示代码。使用方便。
这个图片轮播是基于jQuery开发的一个无缝衔接,可以点击左右进行滑动、可以点击下标进行滑动、也可以进行自动轮播
基于jQuery carousel图片叠加旋转木马轮播切换效果,只要引入就可以 使用非常简单,基于jQuery carousel图片叠加旋转木马轮播切换效果,只要引入就可以 使用非常简单,
jquery焦点图片轮播滚动
jQuery图片轮播旋转切换效果代码基于jquery-1.7.2.min.js制作,点击左右箭头,切换图片显示,鼠标离开时自动播放,代码有详细中文注释,方便修改。
基于JQuery的大图片横向切换效果,自动切换,可以左右设置切换方式。
基于jquery实现的图片轮播器,可自动播放,淡入淡出效果
基于jQuery实现的图片轮播滚动切换特效源码.zip
这是一款基于jQuery的图片轮播组件,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片。当然,你也可以手动切换图片,只要点击缩略图即可,这款jQuery轮播切换组件...
基于jQuery实现图片自动轮播切换展示特效源码.zip
基于JQuery的Banner大图片横向切换效果,jquery.cycle.all.min这个插件
基于JQuery的Banner大图片横向切换效果
} /* get y Year m Month total days */ function getTDays( y, m ) { return (new Date基于jquery实现轮播图效果 本文实例为大家分享了jquery实现轮播图效果的具体代码,供大家参考,具体内容如下 黄色的...
基于jQuery图片缩放tab切换效果.zip
基于Jquery实现的图片预览插件,支持图片手动和鼠标滚轮滑动放大缩小、支持图片旋转转和多图片切换、支持图片分组预览,下载后即可快速使用。