用js和jQuery做轮播图
Javascript或jQuery做轮播图
css样式
<style>
a{
text-decoration:none;
}
.naver{
width: 100%;
position:relative;
}
.images{
position:relative;
width: 100%;
height: 400px;
}
.images img{
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 400px;
opacity: 0;
filter:alpha(opacity=0);
transition:opacity .5s;
}
/*图片切换之前有渐变的效果*/
.images img.current{
opacity:1;
filter:alpha(opacity=100);
}
.icon-list{
position:absolute;
left:43%;
bottom:30px;
z-index:1;
width: 200px;
border-radius:30px;
height:35px;
background-color:hsla(0,0%,100%,.4);
}
.icon-list span{
display:inline-block;
width: 20px;
height: 20px;
background-color:#fff;
border-radius:50%;
margin:8px 12px;
}
.icon-list span.current{
background:pink;
}
.icon a{
position:absolute;
top:50%;
display:block;
width: 40px;
height: 40px;
line-height:40px;
text-align:center;
color:rgba(255,255,255,.4);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66ffffff,endcolorstr=#66ffffff);
background:rgba(0,0,0,.4);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66000000,endcolorstr=#66000000);
font-size:36px;
font-weight:bold;
}
.icon a:hover{
color:rgba(255,255,255,.8);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#c8ffffff,endcolorstr=#c8ffffff);
background:rgba(0,0,0,.8);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#c8000000,endcolorstr=#c8000000);
/*为了让IE兼容rgba*/
}
.icon a#prev{
left:10px;
}
.icon a#next{
right:10px;
}
HTML部分
<div class="naver clear">
<div class="images">
<img src="./images/01.jpg" class="current" >
<img src="./images/02.jpg" alt="" >
<img src="./images/03.jpg" alt="" >
<img src="./images/04.png" alt="" >
</div>
<div class="icon-list">
<span class="current" index="0"></span>
<span index="1"></span>
<span index="2"></span>
<span index="3"></span>
</div>
<div class="icon">
<a href="#" id="prev"><</a>
<a href="#" id="next">></a>
</div>
</div>
JavaScript设置
<script>
//获取响应的元素
var naver = document.querySelector(".naver");
var iconList = document.querySelectorAll(".icon-list span");
var prev = document.querySelector("#prev");
var next = document.querySelector("#next");
//定义循环变量
var m = 1;
//定时函数
function runPlay(){
if (m > 3) {
m = 0;
}
controlImage(m)
m ++;
}
var timer = setInterval(runPlay, 3000);
//滑过轮播图,定时停止
naver.onmouseover = function(){
clearInterval(timer);
//显示按钮
prev.style.display = "block";
next.style.display = "block";
}
naver.onmouseout = function(){
timer = setInterval(runPlay, 3000);
//隐藏按钮
prev.style.display = "none";
next.style.display = "none";
}
//被每一个 控制按钮绑定 鼠标滑过 事件
for (var i = 0; i < iconList.length; i ++) {
iconList[i].onmouseover = function(){
var index = parseInt(this.getAttribute("index"));
controlImage(index);
m = index + 1;
}
}
//点击向右的按钮
next.onclick = function(){
if (m > 3) {
m = 0;
}
controlImage(m);
m ++;
}
//点击向左的按钮
prev.onclick = function(){
m -= 2;
if (m < 0) {
m = 3;
}
controlImage(m);
m ++;
}
//控制图片的变化
function controlImage(n){
//获取所有a的集合
var aImgs = document.querySelectorAll(".images img");
//所有的a删除类, 第n个添加类
for (var i = 0; i < aImgs.length; i ++) {
aImgs[i].className = "";
iconList[i].className = "";
}
aImgs[n].className = "current";
iconList[n].className = "current";
}
</script>
jQuery部分
<!-- 兼容IE8以上的 -->
<!--[if gt IE 8]><!-->
<script src="./js/jquery-3.2.1.min.js"></script>
<!--<![endif]-->
<!-- 兼容包括IE8以下的浏览器 -->
<!--[if lte IE 8]>
<script src="./js/jquery-1.12.4.min.js"></script>
<![endif]-->
<script>
// 设置轮播图样式
$(function(){
//定义循环变量
var m=1;
//定时函数
function runPlay(){
if(m > 3){
m=0;
}
controlImage(m);
m++;
}
var timer=setInterval(runPlay,3000);
//滑过轮播图,定时停止,离开定时继续
$(".naver").mouseenter(function(){
clearInterval(timer);
//显示按钮
prev.style.display="block";
next.style.display="block";
}).mouseleave(function(){
timer=setInterval(runPlay,3000);
//隐藏按钮
prev.style.display="none";
next.style.display="none";
})
//点击向下的按钮
$("#next").click(function(){
if(m > 3){
m=0;
}
controlImage(m);
m++;
})
//点击向上的按钮
$("#prev").click(function(){
m-=2;
if(m < 0){
m=3;
}
controlImage(m);
m++;
})
$(".icon-list span").mouseenter(function(){
controlImage($(this).index());
m = $(this).index() + 1;
})
//控制图片的变化
function controlImage(n){
$(".images img").removeClass("current").eq(n).addClass("current");
$(".icon-list span").removeClass("current").eq(n).addClass("current");
}
})
</script>
用js和jQuery做轮播图的更多相关文章
- jQuery做轮播图
这是我自己做的一个简单的轮播图,效果图如下: 我觉得轮播图中最主要的是要理解到图片为什么会滑动,是怎么控制的.上面这个我自己做的,是搭好的一个结构,在无序列表中插入需要的图片.然后在插入图片的后面添加 ...
- 用jQuery实现轮播图效果,js中的排他思想
---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- 自实现PC端jQuery版轮播图
最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...
- Jquery无缝轮播图的制作
轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...
- jQuery无缝轮播图思路详解-唯品会
效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- 用 CSS 做轮播图
对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
随机推荐
- [leetcode-655-Print Binary Tree]
Print a binary tree in an m*n 2D string array following these rules: The row number m should be equa ...
- mysql初始(6)
随着mysql的运用不断加深,一些更复杂点的用法又需要总结起来. 1.将一个表中的数据插入到另一个表中: a.两张表字段相同,并且数据全部插入,命令如下: INSERT INTO 目标表 SELEC ...
- 【工具学习】——教你读懂Maven的配置文件
[前言] 最近在项目中用到了maven工具,相信很多第一次接触maven的人都有这样的困惑,maven的文件很简单,就像下图中的结构一样,但是它的功能十分强大,那是怎么做到的呢?配置文件!配置文件里是 ...
- Maven中mirrors和repository的关系
一.前言 之前没有搞清楚pom.xml里面配置的repositorys节点配置的仓库和mirrors里面配置的仓库的“镜像”间的关系,特意去搜索了相关内容,这边有篇文章讲得透彻,所以这边转载一下~ 二 ...
- Win10上部署Apollo配置中心
基于Docker在Win10上部署Apollo配置中心 https://www.jianshu.com/p/a1215056ce75 http://nobodyiam.com/2016/07/09/i ...
- 【bzoj4813】[Cqoi2017]小Q的棋盘 树上dfs+贪心
题目描述 小Q正在设计一种棋类游戏.在小Q设计的游戏中,棋子可以放在棋盘上的格点中.某些格点之间有连线,棋子只能在有连线的格点之间移动.整个棋盘上共有V个格点,编号为0,1,2…,V-1,它们是连通的 ...
- 【题解】MUTC2013idiots
我是先知道的这题是FFT然后再做的,知道是FFT其实就是个套路题啦.首先,我们容易发现 \(P = \frac{a}{b}\) 其中a表示合法的方案数,而b表示全部的方案数. b的值即为\(C\lef ...
- jsp电子商务 购物车实现之二 登录和分页篇
登录页面核心代码 <div id="login"> <h2>用户登陆</h2> <form method="post" ...
- 【BZOJ4325】NOIP2015 斗地主 搜索+贪心
这个东西考试的时候一眼以为状压就压炸了考试又了一下午.....最后我打出来发现后几个点10min都过不去,我大概算了一下,可能是吧.......最后一脸懵逼的我去怂了正解,我们发现只要确定了顺子就可以 ...
- 关于 WizTools.org RESTClient的使用
今天分享一个很好用的测试service的工具,很好用 提供两种方法使用这个东东. 第一种方法 通过cmd命令窗口. (1)cd C:\Users\li_weifeng\Desktop\c4d2(文件存 ...