建站资讯

小程序的七大功能_jquery插件完成轮播图效果

作者:admin 发布时间:2021-01-05
jquery插件实现轮播图效果       这篇文章主要为大家详细介绍了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 
 a href="#" 
 img src="image/1.jpg" alt="" 
 p 这是第1张图片的文字说明 /p 
 /li 
 a href="#" 
 img src="image/2.jpg" alt="" 
 p 这是第2张图片的文字说明 /p 
 /li 
 a href="#" 
 img src="image/3.jpg" alt="" 
 p 这是第3张图片的文字说明 /p 
 /li 
 a href="#" 
 img src="image/4.jpg" alt="" 
 p 这是第4张图片的文字说明 /p 
 /li 
 a href="#" 
 img src="image/5.jpg" alt="" 
 p 这是第5张图片的文字说明 /p 
 /li 
 a href="#" 
 img src="image/6.jpg" alt="" 
 p 这是第6张图片的文字说明 /p 
 /li 
 a href="#" 
 img src="image/7.jpg" alt="" 
 p 这是第7张图片的文字说明 /p 
 /li 
 a href="#" 
 img src="image/8.jpg" alt="" 
 p 这是第8张图片的文字说明 /p 
 /li 
 /ul 
 !--箭头-- 
 div 
 span /span 
 span /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 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。



收缩