自制轮播图（兼容IE8）

最新推荐文章于 2021-06-16 05:07:15 发布
最新推荐文章于 2021-06-16 05:07:15 发布
阅读量1.4k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41905935/article/details/81293505
版权

<!DOCTYPE html>

<html lang="en">

 

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<style>

* {

padding: 0;

margin: 0;

box-sizing: border-box;

list-style: none;

}

 

#box {

width: 496px;

height: 210px;

border: 1px solid #f00;

text-align: center;

margin: 0 auto;

overflow: hidden;

position: relative;

}

 

/* 图片 */

 

img {

float: left;

width: 100%;

display: none;

}

 

img:first-child {

display: block;

}

 

#littlecircle {

width: 100px;

height: 30px;

position: absolute;

bottom: 10px;

left: 50%;

margin-left: -50px;

}

 

#littlecircle #ul {

overflow: hidden;

width: 100px;

height: 30px;

line-height: 30px;

}

 

ul li {

width: 15px;

height: 15px;

cursor: pointer;

border-radius: 50%;

behavior: url(./PIE.htc);

position: relative;

background: #f00;

float: left;

border-radius: 50%;

margin-left: 4px;

margin-top: 5px;

overflow: hidden;

}

 

/* 默认的样式 */

 

.changecolor {

cursor: pointer;

background: #0094ff;

float: left;

margin-left: 4px;

margin-top: 5px;

 

}

 

#left {

width: 40px;

height: 70px;

background: url("./img/arr.png") 0px 0px no-repeat;

position: absolute;

left: 0;

top: 50%;

margin-top: -35px;

border: 1px solid #f00;

}

 

#right {

width: 40px;

height: 70px;

background: url("./img/arr.png") -44px 0px no-repeat;

position: absolute;

right: 0;

top: 50%;

margin-top: -35px;

border: 1px solid #f00;

}

</style>

 

<body>

<div id="box">

 

<img src="./img/1.jpg" id="img1" data-index="0">

<img src="./img/2.jpg" id="img2" data-index="1">

<img src="./img/3.jpg" id="img3" data-index="2">

<img src="./img/4.jpg" id="img4" data-index="3">

<img src="./img/5.jpg" id="img5" data-index="4">

<img src="./img/1.jpg" id="img6" data-index="5">

<div id="littlecircle">

<ul id="ul">

<li class="changecolor"></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</div>

<div id="left"></div>

<div id="right"></div>

</div>

</body>

<script src="./jquery-1.12.2.js"></script>

<script>

var left = document.getElementById("left");

var right = document.getElementById("right");

var img = document.getElementsByTagName("img");

var li = document.getElementsByTagName("li");

var index = 0;

var changeindex = 0;

var changeindex1 = 0;

left.onclick = function () {

for (var i = 0; i < 5; i++) {

if (i == index) {

changeindex = index - 1;

$("li").eq(changeindex).addClass("changecolor");

$("li").eq(index).removeClass("changecolor");

if (changeindex < 0) {

changeindex = 4;

$("img").eq(index).css("display", "none");

$("img").eq(changeindex).css("display", "block");

}

$("img").eq(index).css("display", "none");

$("img").eq(changeindex).css("display", "block");

}

}

index = changeindex;

}

 

right.onclick = function () {

move();

}

 

// 鼠标点击圆圈引发的图片改变逻辑，点击那张图片就到那张图片的

// for (let i = 0; i < li.length; i++) {

// li[i].onclick = function () {

// // 点击当前索引变成i

// index = i;

// // 当前索引对应的图片显示,其他隐藏

// $("img").eq(i).css("display", "block").siblings("img").css("display", "none");

// // 将所有圆圈的样式移除

// $("li").removeClass("changecolor");

// // 让点击的圆圈样式显示

// $("li").eq(index).addClass("changecolor");

 

// }

// }


 

// ie8时点击圆圈出现相对的页面则使用这个这段代码(上面是用ES6的let方法进行的，IE8不支持，又是IE8)，IE8可以使用

function b(i) {

return function c() {

index = i;

$("img").eq(i).css("display", "block").siblings("img").css("display", "none");

$("li").removeClass("changecolor");

$("li").eq(index).addClass("changecolor");

}

}

for (var i = 0; i < li.length; i++) {

li[i].onclick = b(i);

}


 

function move() {

for (var i = 0; i < 5; i++) {

if (i == index) {

changeindex1 = index + 1;

$("li").eq(changeindex1).addClass("changecolor");

$("li").eq(index).removeClass("changecolor");

$("img").eq(index).css("display", "none");

$("img").eq(changeindex1).css("display", "block");

if (changeindex1 > 4) {

$("img").eq(index).css("display", "none");

$("img").eq(changeindex1).css("display", "block");

changeindex1 = 0;

$("li").eq(changeindex1).addClass("changecolor");

}

}

}

index = changeindex1;

}

setInterval(function () {

move();

}, 2000);

// IE浏览器上要使用上面这种格式，我去

// setInterval(()=>{

// move();

// },2000);

</script>

 

</html>

<!-- 还有一种思路就是通过改变width来实现 -->

迷途明
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
兼容IE7、IE8的轮播图
weixin_48195664的博客
06-12 203
兼容IE7、IE8轮播图
兼容IE8图片轮播
wanglufei_1992的博客
12-19 3885
最近在做一个活动，其中产品给的需求是：一共是8张图片，开始显示2张，点击第3张，这时候页面显示3张。中间为大图，两边是小图。好了，直接贴代码了;//轮播JS /*未元素的首尾添加补白*/ var $panels = $('#slider .scrollContainer > li'); var $parent=$panels.parent();//或许当前li的最近一级的父
兼容IE8的高级jQuery轮播图插件
04-17
在网上搜集到的兼容IE8的jQuery轮播图插件代码，里面有五种样式选择非常实用。
兼容ie8的轮播图
qq_41893686的博客
05-12 369
JS插件：http://www.superslide2.com/param.html 效果图： 示例代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e.
html轮播图兼容ie8,兼容IE8的高级jQuery轮播图插件
weixin_33168819的博客
06-16 536
jSlider是一款兼容IE8的高级jQuery轮播图插件。jSlider轮播图插件的特点是轻量级，使用简单，跨平台。通过jSlider你可以非常容易的而在网页中实现任何轮播图效果。它的特点还有：速度快，使用简单。轻量级，压缩后的版本仅3.6KB。支持IE8+, Chrome, FireFox, Safari, Opera, Edge浏览器。支持iOS 和 Android等移动设备。支持5种动画效...
兼容IE8的带左右箭头的轮播图
lyl520_zyg1314的博客
07-12 1582
轮播图是我们网页上最常见到的效果，尤其要兼容IE8,这时就的考虑兼容了，下面就是我们PC端项目上用到的一个demo,整理了一下，以便择日使用，话不多说，直接上代码。html&lt;&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name=&quo
Android ViewPager等自制图片轮播器
11-05
在Android开发中，图片轮播器是一种常见的组件，用于展示多张图片并自动进行滚动切换，常用于应用启动页、广告栏或者商品展示等场景。本篇将详细讲解如何使用Android的ViewPager组件来构建一个自定义的图片轮播器。 ...
自制思维绘图软件方便下载
09-12
在文件名“edrawmax_16121.rar”中，我们可以推测这可能是“Edraw Max”的一个版本，Edraw Max是一款知名的多用途绘图软件，它支持绘制思维导图、组织结构图、流程图等多种图形，且具有丰富的模板和强大的自定义功能...
WD_prac2103_Carousel:自制轮播图套件
03-08
《自制轮播图套件WD_prac2103_Carousel详解》 在Web开发领域，轮播图（Carousel）是一种常见的交互式组件，它用于展示一组图片或内容，并以循环滑动的方式呈现，为用户带来动态的浏览体验。WD_prac2103_Carousel是...
自制PLC MCU图纸
07-30
自制PLC MCU图纸 STM8S MCU
UGUI学习笔记（九）自制3D轮播图
最新发布
09-12
UGUI学习笔记（九）自制3D轮播图
兼容IE8的jQuery图片宽屏幻灯片轮播插件
08-24
兼容IE8的jQuery宽屏幻灯片轮播插件
兼容ie8的响应式jquery轮播图插件.zip
07-04
这是一款兼容ie8的响应式jquery轮播图插件。该jquery轮播图插件使用简单，浏览器兼容性良好。
精美html+css上下滚动,轮播(兼容ie8)
01-06
jquery实现图图片或者文本轮播，上下或者左右可配置，文件中为图片上传循环轮播，拿来即可使用，主要可以兼容ie7及以上版本，可以使用，亲测
兼容IE8的jQuery轮播图插件
06-24
兼容IE8的jQuery轮播图插件是一款兼容性很好的，使用非常简单的网站焦点图代码。
兼容ie8的响应式jquery轮播图插件
12-11
这是一款兼容ie8的响应式jquery轮播图插件。该jquery轮播图插件使用简单，浏览器兼容性良好。
html轮播图兼容ie8,多功能响应式兼容IE8图片轮播
weixin_39634898的博客
06-16 361
2016-09-27 10:02:56前段时间在写一个官网，官网中很多地方都用到了图片轮播，但是需求中要求网站适配到IE8同时具有自适应的特点，适配各种尺寸的浏览器和移动端浏览器。于是我尝试了在网上查找相关的代码，但遗憾的是很多插件要么兼容IE8，但是不支持响应式，要么支持响应式不支持IE8，万恶的IE8很是让人头疼。于是，自己就写了一个响应式的轮播插件，并兼容IE8浏览器。先来看一下程序的htm...
轮播实现
weshouldhelp的博客
09-11 331
jquery-3.1.1.min.js版本，图片大小为1080px*432px &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;jQuery焦点图蓝色箭头按钮切换代码 - 站长素材&lt;/title&gt;     
Slide图片轮播03-兼容IE8和Chrome浏览器
zyytaiyame的博客
12-23 589
在线测试打包下载 Slide图片轮播03-兼容IE8和Chrome浏览器
使用Global Mapper与OziExplorer自制等高线地形图教程
"这篇文章主要介绍了如何使用Google Earth和Global Mapper以及OziExplorer软件来自制地形图，特别是针对梅花山地区的示例。通过SRTM3文件获取地形数据，结合交通图，实现等高线地图的制作。" 在IT领域，自制地形图...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值