jquery插件实现轮播图效果
更新时间：2020年10月19日 10:18:46 作者：gyy520gyy
这篇文章主要为大家详细介绍了jquery插件实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery插件实现轮播图的具体代码，供大家参考，具体内容如下
轮播图的实现（jquery插件）
需要引入jquery插件，去jquery官网搜索
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
img {
display: block;
}
.slider {
height: 340px;
width: 790px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.slider li {
position: absolute;
display: none;
}
.slider li:first-child {
display: block;
}
/*文字部分的样式*/
.slider li p {
position: absolute;
width: 100%;
padding: 10px 0;
text-indent: 2em;
background-color: rgba(0, 0, 0, .6);
bottom: 0;
left: 0;
font-size: 18px;
/*给文字设置位移到底部去*/
transform: translate3d(0, 100%, 0);
/*添加过渡*/
transition: all .8s;
}
/*当前展示li 下的文字样式*/
.slider li.current p {
/*文字位移到0的位置，正常显示*/
transform: translate3d(0, 0, 0);
}
.slider li a {
color: #fff;
}
.arrow {
display: none;
}
.slider:hover .arrow {
display: block;
}
.arrow-left,
.arrow-right {
font-family: "SimSun", "宋体";
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
margin-top: -30px;
cursor: pointer;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: 700;
font-size: 30px;
}
.arrow-left:hover,
.arrow-right:hover {
background-color: rgba(0, 0, 0, .5);
}
.arrow-left {
left: 0;
}
.arrow-right {
right: 0;
}
</style>
</head>
<body>
<div class="slider">
<ul>
<li>
<a href="#" >
<img src="image/1.jpg" alt="">
<p>这是第1张图片的文字说明</p>
</a>
</li>
<li>
<a href="#" >
<img src="image/2.jpg" alt="">
<p>这是第2张图片的文字说明</p>
</a>
</li>
<li>
<a href="#" >
<img src="image/3.jpg" alt="">
<p>这是第3张图片的文字说明</p>
</a>
</li>
<li>
<a href="#" >
<img src="image/4.jpg" alt="">
<p>这是第4张图片的文字说明</p>
</a>
</li>
<li>
<a href="#" >
<img src="image/5.jpg" alt="">
<p>这是第5张图片的文字说明</p>
</a>
</li>
<li>
<a href="#" >
<img src="image/6.jpg" alt="">
<p>这是第6张图片的文字说明</p>
</a>
</li>
<li>
<a href="#" >
<img src="image/7.jpg" alt="">
<p>这是第7张图片的文字说明</p>
</a>
</li>
<li>
<a href="#" >
<img src="image/8.jpg" alt="">
<p>这是第8张图片的文字说明</p>
</a>
</li>
</ul>
<!--箭头-->
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</div>
</div>
<script src="../jquery-2.2.4.js"></script> //jquery插件
<script>
//1、定义一个索引，且设置第一张图片为默认
var index = 0;
$('ul>li').eq(index).addClass('current').siblings().removeClass('current');
//2、右边按钮的点击
$('.arrow-right').click(function(){
index++;
//判断图片是否超过最后一张，则重新赋值
if(index == $('ul>li').length){
index = 0;
}
showImage();
})
左边按钮的实现
$('.arrow-left').click(function(){
index--;
if(index < 0) index = $('ul>li').length - 1;
showImage()
});
function showImage(){
$('ul>li').eq(index).addClass('current').fadeIn().siblings().removeClass('current').fadeOut();
}
//实现自动轮播
var times = '';
//鼠标移入停止播放
$('.slider').mouseover(function(){
clearInterval(times)
})
//鼠标移出，停止
$('.slider').mouseout(function(){
times = setInterval(function(){
$('.arrow-right').click();
},3000)
});
$('.slider').mouseout();
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了基于jquery实现下拉框美化特效的示例代码，以一个完整的实例进行分析讲解，感兴趣的小伙伴们可以参考一下2016-02-02
本文给大家介绍jquery ui tabs的理解,包括属性、事件、方法和技巧等相关知识，对jquery ui tabs感兴趣的朋友一起学习吧2015-11-11
这篇文章主要介绍了jquery-file-upload 文件上传带进度条效果，代码分为html部分css部分和js部分，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-11-11
这篇文章主要展示了jQuery网页版打砖块小游戏源码，大家都一定玩过打砖块这款小游戏，今天我们不仅要玩转它，还要实现打砖块小游戏，感兴趣的小伙伴们可以参考一下2015-08-08
这篇文章主要介绍了jQuery实现的多张图无缝滚动效果,可实现自定义向左或向右滚动的功能,涉及jQuery结合时间函数动态操作页面元素属性的相关技巧,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了解决 jQuery 和其他库的冲突的方法，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-06-06
在做项目的时候，我们经常需要用到地址之类的省市区三级联动的，今天就给大家分享一个非常简洁的省市区三级联动的代码，基于jQuery，附上GIT地址，有需要的小伙伴可以直接拿走2015-04-04
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
我在为 Mozilla Developer Network(Mozilla开发者社区) 写代码时需要加载的一个普通的的脚本文件,以及一个JSON流。 因为我们使用jQuery,这意味着需要调用 jQuery.getScript 和 jQuery.getJSON 函数2014-04-04
这篇文章主要介绍了jQuery 获取多选框的值及多选框中文的函数的相关资料,需要的朋友可以参考下2016-05-05
jQuery 美元符冲突的解决方法，使用jquery与别的js库共同使用的时候需要注意的地方。2010-03-03
最新评论