图片轮播html1001无标题,轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器...
项目源代码下载地址：
以下为项目实现效果：(由于gif太大，所以只上传一张图片，但效果完全能实现，经测试，在ie各版本浏览器及chrome，firefox等浏览器中均能实现效果，可以实现点击切换图片，无缝滚动和非无缝滚动两种效果)
页面源代码：index.html(以下注释自行切换，为了项目清晰，所以用了四个js文件，分别实现不同的效果)
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
轮播图
<
>
index.css(以下为项目css文件，解决了ie低版本浏览器的兼容问题，不然的话会出现一些问题)
/**
*Created by xxc on 2019/4/28
*/
*{
margin: 0;
padding: 0;
}
a{
display: block;
}
li{
list-style: none;
vertical-align: middle;
}
img{
display: block;//兼容ie
border-width: 0;//兼容ie
}
.slider{
width: 730px;
height: 454px;
margin: 20px auto;
border: 1px solid #ccc;
padding: 5px;
}
.slider .slider-inner{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.slider .slider-inner ul{
width: 800%;
position: absolute;
left: 0;
top: 0;
}
.slider .slider-inner ul li{
float: left;
display: block;
}
.slider .slider-indicator{
position: absolute;
right: 50px;
bottom: 20px;
z-index: 1001;
}
.slider .slider-indicator i{
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
background-color: #fff;
cursor: pointer;
font-style: normal;
margin-left: 5px;
}
.slider .slider-indicator i.current,
.slider .slider-indicator i:hover{
background-color: orange;
}
.slider .slider-inner button{
width: 20px;
height: 40px;
background-color: #aeb5ad;
background-color: rgba(0,0,0,.3);
position: absolute;
top: 50%;
margin-top: -20px;
z-index: 1;
border: none;
outline: none;
color: #fff;
cursor: pointer;
}
.slider .slider-inner button.btn-right{
right: 0;
}
以下为js的四种实现方法：
js1.js代码：
/**
*Created by xxc on 2019/4/28
*/
var images = [
"images/1.jpg",
"images/2.jpg",
"images/3.jpg",
"images/4.jpg",
"images/5.jpg",
"images/6.jpg"]
function $(id) {
return document.getElementById(id);
}
function getFirstElementByParent(parent) {
if(parent.firstElementChild){
return parent.firstElementChild;
}else{
var ele=parent.firstChild;
while (ele&&ele.nodeType!==1){
ele=ele.nextSibling;
}
return ele;
}
}
window.onload = function () {
function slider(images,speed,imgWidth) {
var ul = document.createElement('ul');
ul.setAttribute('id','slider_list');
for(var j = 0;j
var li = document.createElement('li');
var a = document.createElement('a');
var img = document.createElement('img');
img.setAttribute('src',images[j]);
a.appendChild(img);
li.appendChild(a);
ul.appendChild(li);
}
$("slider_inner").appendChild(ul);
var div = document.createElement('div');
div.setAttribute('class','slider-indicator');
div.setAttribute('id','slider_indicator');
for(var j = 0;j
var i = document.createElement('i');
i.innerHTML = j+1;
div.appendChild(i);
}
getFirstElementByParent(div).setAttribute('class','current');
$("slider_inner").appendChild(div);
var isquares = $("slider_indicator").getElementsByTagName("i");
var timer=null,i=0;
function animate(){
i--;
if(i
i=0;
}
$("slider_list").style.left = i*imgWidth+"px";
for(var j = 0;j
isquares[j].removeAttribute('class','');
}
isquares[-i].setAttribute('class','current');
}
timer = setInterval(animate,speed);
for(var k = 0;k
isquares[k].index = k+1;
isquares[k].onmouseover = function () {
clearInterval(timer);
for(var j = 0;j
isquares[j].removeAttribute('class','');
}
this.setAttribute('class','current');
i=-(this.index-1);
$("slider_list").style.left = i*imgWidth+"px";
timer = setInterval(animate,speed);
}
}
$("btn_left").onclick = function () {
i++;
if(i>0){
i=-(images.length-1);
}
for(var j = 0;j
isquares[j].removeAttribute('class','');
}
isquares[-i].setAttribute('class','current');
$("slider_list").style.left = i*imgWidth+"px";
}
$("btn_right").onclick = function () {
i--;
if(i
i=0;
}
for(var j = 0;j
isquares[j].removeAttribute('class','');
}
isquares[-i].setAttribute('class','current');
$("slider_list").style.left = i*imgWidth+"px";
}
$("slider_inner").onmouseover = function () {
clearInterval(timer);
}
$("slider_inner").onmouseout = function () {
timer = setInterval(animate,speed);
}
}
//images:图片数据
//2000：轮播速度
//730：图片宽度
slider(images,2000,730);
}
js2.js代码：
/**
*Created by xxc on 2019/4/28
*/
var images = [
"images/1.jpg",
"images/2.jpg",
"images/3.jpg",
"images/4.jpg",
"images/5.jpg",
"images/6.jpg"]
function $(id) {
return document.getElementById(id);
}
function getFirstElementByParent(parent) {
if(parent.firstElementChild){
return parent.firstElementChild;
}else{
var ele=parent.firstChild;
while (ele&&ele.nodeType!==1){
ele=ele.nextSibling;
}
return ele;
}
}
window.onload = function () {
var length = images.length
function animate(element,target) {
var now = element.offsetLeft;
var step = now > target ? -10 : 10;
var timers = setInterval(function () {
now += step;
if(Math.abs(now-target)<=Math.abs(step)){
clearInterval(timers);
element.style.left = target+"px";
}else {
element.style.left = now+"px";
}
},10)
}
function slider(images,speed,imgWidth) {
var ul = document.createElement('ul');
ul.setAttribute('id','slider_list');
for(var j = 0;j
var li = document.createElement('li');
var a = document.createElement('a');
var img = document.createElement('img');
img.setAttribute('src',images[j]);
a.appendChild(img);
li.appendChild(a);
ul.appendChild(li);
}
ul.appendChild(getFirstElementByParent(ul).cloneNode(true));
$("slider_inner").appendChild(ul);
var div = document.createElement('div');
div.setAttribute('class','slider-indicator');
div.setAttribute('id','slider_indicator');
for(var j = 0;j
var i = document.createElement('i');
i.innerHTML = j+1;
div.appendChild(i);
}
getFirstElementByParent(div).setAttribute('class','current');
$("slider_inner").appendChild(div);
var isquares = $("slider_indicator").getElementsByTagName("i");
var timer=null,i=0;
function autoPlay(){
if(i==-length){
$("slider_list").style.left = 0;
i=0;
}
i--;
animate($("slider_list"),i*imgWidth);
for(var j = 0;j
isquares[j].removeAttribute('class','');
}
if(i==-length){
isquares[0].setAttribute('class','current');
}else {
isquares[-i].setAttribute('class','current');
}
}
timer = setInterval(autoPlay,speed);
for(var k = 0;k
isquares[k].index = k+1;
isquares[k].onmouseover = function () {
clearInterval(timer);
for(var j = 0;j
isquares[j].removeAttribute('class','');
}
this.setAttribute('class','current');
i=-(this.index-1);
$("slider_list").style.left = i*imgWidth+"px";
timer = setInterval(autoPlay,speed);
}
}
$("btn_left").onclick = function () {
clearInterval(timer);
if(i==0){
i=-length;
$("slider_list").style.left = i*imgWidth+"px";
}
for(var j = 0;j
isquares[j].removeAttribute('class','');
}
i++;
isquares[-i].setAttribute('class','current');
animate($("slider_list"),i*imgWidth)
}
$("btn_right").onclick = function () {
clearInterval(timer);
if(i==-length){
i=0;
$("slider_list").style.left = 0;
}
for(var j = 0;j
isquares[j].removeAttribute('class','');
}
i--;
if(i==-length){
animate($("slider_list"),i*imgWidth)
isquares[0].setAttribute('class','current');
}else {
isquares[-i].setAttribute('class','current');
animate($("slider_list"),i*imgWidth)
}
}
$("slider_inner").onmouseover = function () {
clearInterval(timer);
}
$("slider_inner").onmouseout = function () {
timer = setInterval(autoPlay,speed);
}
}
//images:图片数据
//2000：轮播速度
//730：图片宽度
slider(images,2000,730);
}
jquery1.js代码：
/**
*Created by xxc on 2019/4/28
*/
var images = [
"images/1.jpg",
"images/2.jpg",
"images/3.jpg",
"images/4.jpg",
"images/5.jpg",
"images/6.jpg"];
$(function () {
function animate(images,speed,imgWidth) {
var length = images.length;
$("#slider_inner").append("
for(var i = 0;i
$("#slider_inner #slider_list").append("
")
$("#slider_indicator").append(""+(i+1)+"");
}
$("#slider_indicator i:eq(0)").addClass("current");
var timer = null,k=0;
function autoPlay(){
k--;
if(k
k=0;
}
$("#slider_list").css('left',k*imgWidth+'px');
$("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current");
}
timer = setInterval(autoPlay,speed)
$("#slider_indicator i").mouseover(function () {
clearInterval(timer);
var $this = $(this);
$("#slider_list").css('left',-($this.index())*imgWidth+'px');
k=-($this.index());
$this.addClass("current").siblings().removeClass("current");
timer = setInterval(autoPlay,speed)
})
$("#btn_left").click(function () {
k++;
if(k>0){
k=-(length-1);
}
$("#slider_list").css('left',k*imgWidth+'px');
$("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current");
})
$("#btn_right").click(function () {
k--;
if(k
k=0;
}
$("#slider_list").css('left',k*imgWidth+'px');
$("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current");
})
$("#slider_inner").mouseover(function () {
clearInterval(timer);
}).mouseout(function () {
timer = setInterval(autoPlay,speed)
})
}
animate(images,2000,730);
})
jquery2.js代码
/**
*Created by xxc on 2019/4/28
*/
var images = [
"images/1.jpg",
"images/2.jpg",
"images/3.jpg",
"images/4.jpg",
"images/5.jpg",
"images/6.jpg"];
$(function () {
function animates(images,speed,imgWidth) {
var length = images.length;
$("#slider_inner").append("
for(var i = 0;i
$("#slider_inner #slider_list").append("
")
$("#slider_indicator").append(""+(i+1)+"");
}
$("#slider_indicator i:eq(0)").addClass("current");
$("#slider_inner #slider_list").append("
")
var timer = null,k=0;
function autoPlay(){
k--;
$("#slider_list").animate({'left':k*imgWidth+'px'},1000);
if(k==-length){
$("#slider_indicator i:eq(0)").addClass("current").siblings("i").removeClass("current");
$("#slider_list").animate({'left':0},0);
k=0
}else {
$("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current");
}
}
timer = setInterval(autoPlay,speed)
$("#slider_inner").mouseover(function () {
clearInterval(timer);
}).mouseout(function () {
timer = setInterval(autoPlay,speed)
})
$("#slider_indicator i").mouseover(function () {
clearInterval(timer);
var $this = $(this);
$("#slider_list").css('left',-($this.index())*imgWidth+'px');
k=-($this.index());
$this.addClass("current").siblings().removeClass("current");
timer = setInterval(autoPlay,speed);
})
$("#btn_left").click(function () {
k++;
if(k==1){
$("#slider_list").animate({'left':-length*imgWidth+'px'},0);
$("#slider_list").animate({'left':-(length-1)*imgWidth+'px'},1000);
$("#slider_indicator i:eq("+(length-1)+")").addClass("current").siblings("i").removeClass("current");
k=-(length-1);
}else {
$("#slider_list").animate({'left':k*imgWidth+'px'},1000);
$("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current");
}
})
$("#btn_right").click(function () {
k--;
$("#slider_list").animate({'left':k*imgWidth+'px'},1000);
if(k==-length){
$("#slider_indicator i:eq(0)").addClass("current").siblings("i").removeClass("current");
$("#slider_list").animate({'left':0},0);
k=0
}else {
$("#slider_indicator i:eq("+(-k)+")").addClass("current").siblings("i").removeClass("current");
}
})
}
animates(images,2000,730);
})
来源：https://www.cnblogs.com/alex-xxc/p/10793277.html
图片轮播html1001无标题,轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器...相关推荐
- html1001无标题,QQ个性签名1001无标题
从小就怕黑.如今学习不好就是因为不敢看黑板.(QQ个性签名分类:校园) 喜欢一个人怎么会甘心做朋友(QQ个性签名分类:暗恋) 不要问我爱谁 我爱的人你攀附不起(QQ个性签名分类:心情) 自从认识了你就 ...
- 适用于各浏览器支持图片预览，无刷新异步批量上传js插件(2)
之前写的这个上传插件,同事们都觉得还不错,不过都觉得还不够完美,于是决定使用业余时间对此插件持续优化,可能你过段时间会发现,插件又增加了新功能什么的,请注意文章后面评论里的更新说明. 以前在上传的时候 ...
- 【无标题】前端工程师面试题手册-有点长但是很有用
不是原作者-想想要获取更多前端开发相关学习资料,请加微信1124692领取 前端工程师面试题手册 目录 1 | 前端基础........................................ ...
- 【无标题】铁路信号基础知识——信号部分
一. 信号 信号:是传递信息的符号. 铁路信号设备是一个总名称,概而言之为信号.联锁.闭塞 铁路信号:是向有关行车和调车作业人员发出的指示和命令: 联锁设备:用于保证站内行车和调车工作的安全和提高车站 ...
- js/jquery中实现图片轮播
一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery
1.swiper插件: 需要下载该插件到本地,并用link标签引用其swiper-bundle.min.css文件,用script引用其swiper-bundle.min.js文件,下载地址及官方文档 ...
- Vue项目中获取数据后使用swiper轮播，无法轮播且 autoplay 和 loop 失效问题！
Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题! 问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图.但是F12控制台切换屏幕后能正常轮播但无 ...
- 九宫图-图片轮播-兼容IE8和Chrome浏览器
在线测试 打包下载 九宫图-图片轮播-兼容IE8和Chrome浏览器
- html3d轮播图片效果,炫酷3D透视轮播图特效
这是一款炫酷js和CSS3 3D透视轮播图特效.该3D轮播图通过CSS3制作图片的3D透视效果,并使用js来使轮播图于用户进行交互,效果非常炫酷. 使用方法 在页面中引入style.css和index ...
- Swiper4.x使用之图片只有一张时不进行轮播，多张才进行轮播
回想初学JavaScript时,写一个图片的轮播:那是写得惨不忍睹.现在我们再去写图片轮播的话:用Swiper(官网:https://www.swiper.com.cn)分分钟就弄好了. 但是老大又提 ...
最新文章
- Jmeter 可视化监控
- 一个苏州IT人的5年挨踢经历-------面试篇(之三)
- 【原理+实战+视频+源码】java更新无法下载所需安装文件
- Java数据结构和算法( 二 ) ## 数组
- imx6 板卡移植官方yocto版本(2_定制系统)
- 【Unity】（转）游戏辅（外）助（挂）开发
- 时间复杂度、空间复杂度，如何”不复杂“地学？
- linux如何重置网络,Ubuntu 重新设置网络
- android map 底层实现原理,LinkedHashMap底层实现和原理（源码解析）
- 【教程】Edraw Max使用教程：Edraw Max快速入门指南
- 系统指定的路径不存在，怎么办
- 仿苹果桌面Android,iLauncher（仿苹果桌面）安卓版
- 2008-03-31 雨纷飞
- 利用Exchange服务同步iOS和android中的联系人
- vue-element-template模板
- 语音降噪论文“A Hybrid Approach for Speech Enhancement ...“的研读
- linux车机按键学习,linux就该这么学
- 内分泌6项检查费用_内分泌6项检查费用是多少 详解内分泌6项检查是什么
- “科林明伦杯”哈尔滨理工大学第十届程序设计竞赛部分题解
- java模拟国际象棋游戏_Javafx实现国际象棋游戏
热门文章
- 「学术放养」和「认真负责」并不冲突，芝大CS博士谈从导师身上学到的几件事...
- SVM支持向量机算法详解
- 增强for循环 泛型
- 【bzoj2654】tree（二分+MST）
- 查看oracle中的中文所占字节数
- 【转】恢复默认vs2005
- 【深度学习】损失函数记录
- ValueError: This model has not yet been built. Build the model first by calling `build()` or calling
- 《剑指offer》面试题5———从尾到头打印链表(C++ 实现)
- numpy.ndarray size changed, may indicate binary incompatibil