轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器
项目源代码下载地址：轮播图
以下为项目实现效果：（由于gif太大，所以只上传一张图片，但效果完全能实现，经测试，在ie各版本浏览器及chrome，firefox等浏览器中均能实现效果，可以实现点击切换图片，无缝滚动和非无缝滚动两种效果）
页面源代码：index.html(以下注释自行切换，为了项目清晰，所以用了四个js文件，分别实现不同的效果)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轮播图</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="slider">
<div class="slider-inner" id="slider_inner">
<button class="btn-left" id="btn_left"><</button>
<button class="btn-right" id="btn_right">></button>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery1.js"></script>
<!--<script src="js/jquery2.js"></script>-->
<!--<script src="js/js1.js"></script>-->
<!--<script src="js/js2.js"></script>-->
</body>
</html>
index.css（以下为项目css文件，解决了ie低版本浏览器的兼容问题，不然的话会出现一些问题）
/**
*Created by xxc on 2019/4/28
*/
*{
margin:;
padding:;
}
a{
display: block;
}
li{
list-style: none;
vertical-align: middle;
}
img{
display: block;//兼容ie
border-width:;//兼容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:;
top:;
}
.slider .slider-inner ul li{
float: left;
display: block;
}
.slider .slider-indicator{
position: absolute;
right: 50px;
bottom: 20px;
z-index:;
}
.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:;
border: none;
outline: none;
color: #fff;
cursor: pointer;
}
.slider .slider-inner button.btn-right{
right:;
}
以下为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<images.length;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<images.length;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<-(images.length-1)){
i=0;
}
$("slider_list").style.left = i*imgWidth+"px";
for(var j = 0;j<isquares.length;j++){
isquares[j].removeAttribute('class','');
}
isquares[-i].setAttribute('class','current');
}
timer = setInterval(animate,speed); for(var k = 0;k<isquares.length;k++){
isquares[k].index = k+1;
isquares[k].onmouseover = function () {
clearInterval(timer);
for(var j = 0;j<isquares.length;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.length;j++){
isquares[j].removeAttribute('class','');
}
isquares[-i].setAttribute('class','current');
$("slider_list").style.left = i*imgWidth+"px";
}
$("btn_right").onclick = function () {
i--;
if(i<-(images.length-1)){
i=0;
}
for(var j = 0;j<isquares.length;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<length;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<images.length;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<length;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.length;k++){
isquares[k].index = k+1;
isquares[k].onmouseover = function () {
clearInterval(timer);
for(var j = 0;j<isquares.length;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.length;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.length;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("<ul id='slider_list'></ul><div id='slider_indicator' class='slider-indicator'></div>");
for(var i = 0;i<images.length;i++){
$("#slider_inner #slider_list").append("<li><a href='#'><img src='"+images[i]+"'></a></li>")
$("#slider_indicator").append("<i>"+(i+1)+"</i>");
}
$("#slider_indicator i:eq(0)").addClass("current"); var timer = null,k=0;
function autoPlay(){
k--;
if(k<-(length-1)){
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<-(length-1)){
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("<ul id='slider_list'></ul><div id='slider_indicator' class='slider-indicator'></div>");
for(var i = 0;i<images.length;i++){
$("#slider_inner #slider_list").append("<li><a href='#'><img src='"+images[i]+"'></a></li>")
$("#slider_indicator").append("<i>"+(i+1)+"</i>");
}
$("#slider_indicator i:eq(0)").addClass("current");
$("#slider_inner #slider_list").append("<li><a href='#'><img src='"+images[0]+"'></a></li>") 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);
})
轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器的更多相关文章
- 高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...
- 轮播图原生js实现和jquery实现和js面向对象方式实现
原生JS实现 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 简单介绍无限轮播图，js源代码
无限轮播图js源代码,今天介绍一下用js简单的编写无限轮播图 <!DOCTYPE html> <html> <head> <meta charse ...
- 无限循环轮播图之JS部分（原生JS）
JS逻辑与框架调用, <script type="text/javascript"> var oBox = document.getElementById('box') ...
- jquery里面的attr和css来设置轮播图竟然效果不一致
/*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document: ...
- 原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图
轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...
- 移动web——bootstrap响应式轮播图
基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...
- 第124天：移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
- Bootstrap中轮播图
Bootstrap中轮播图插件叫作Carousel,为了清晰的表明每个标签在这里是什么意思,我把解释写在了下面的代码中. <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 cla ...
随机推荐
- B+树和LSM比较（转）
出处:https://blog.csdn.net/u013928917/article/details/75912045 B+树和LSM比较 在关系型数据库mysql中普遍使用B+树作为索引,在实际中 ...
- mysql学习之路_基础知识
Mysql php阶段将数据库分为三个阶 基础阶段: mysql数据库的基本操作(增删改查),以及一些高级操作(视图,触发器,函数,存储过程等),PHP操作没有sql数 ...
- php 微信登录 公众号 获取用户信息 微信网页授权
php 微信登录 公众号 获取用户信息 微信网页授权 先自己建立两个文件: index.php 和 getUserInfo.php index.php <?php //scope=snsap ...
- HDU-3608 最长回文
HDU-3608 最长回文 题面 Problem Description 给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度. 回文就是正反读都是一样的字符串,如ab ...
- Zookeeper C++编程实战之主备切换
默认zookeeper日志输出到stderr,可以调用zoo_set_log_stream(FILE*)设置输出到文件中还可以调用zoo_set_debug_level(ZooLogLevel)控制日 ...
- FPGA之初认识
什么是FPGA FPGA(Field-Programmable Gate Array),即现场可编程门阵列 .看到编程两个字码农就笑了,不就是编程嘛,那可是我们的强项 .且慢,此编程非彼编程 .一定要 ...
- bzoj2004(矩阵快速幂，状压DP)
每个长度为p的区间都必须出现k次1,数据又很小,我们使用状压. dp[i][j]->dp[i+1][j'],dp[i][j]表示当前考虑到了第i个车站,包括第i个其后的p个的状态(有车停或没车停 ...
- Job Interview: Why Only 3 Questions Really Matter
Even for the most fearless amongst us, job interviews can be nerve wracking. In order to give us the ...
- kepware http接口 c语言 ruby
读取某变量的值 require 'uri' require 'net/http' url = URI("http://127.0.0.1:39321/iotgateway/read?ids= ...
- 20155326刘美岑 2016-2017-2 《Java程序设计》第二周学习总结
20155326刘美岑 2016-2017-2 <Java程序设计>第二周学习总结 教材学习内容总结 教材第三章主要讲解的是基础语法,主要包括认识类型与变量.学习运算符的基本使用.了解类型 ...