jquery插件实现轮播图效果

2024-12-03 16:57:15

本文实例为大家分享了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">&lt;</span>
 <span class="arrow-right">&gt;</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和html+css实现带小圆点和左右按钮的轮播图实例

是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图左右按钮小白点*/ #second_div{ margin-top: 160px; } .img_box{ overflow: hidden; width:100%; height:420px; border:1px solid; position:relative; } .img_box img{ width:100%; position:absolute; } .ul5{ list-style: none;
jQuery插件slides实现无缝轮播图特效

初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 $(".slideInner").slide({ slideContainer: $('.slideInner a'), effect: 'easeOutCirc',//动画类型 autoRunTime: 5000,//自动轮播时间 slideSpeed: 1000,//速度 nav: true,//是否显示左右导航 autoRun: true,//是否自动滚动 prevBtn: $(
jQuery实现轮播图及其原理详解

本文实例为大家分享了jQuery实现轮播图及其原理的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalabl
利用jquery写的左右轮播图特效

最近不是很忙,练习写了一个轮播图效果,虽然效果跟功能上貌似是没问题,但是我认为在许多东西上面都有待改进,在前端这个职位上我还有很远的路要走,当然要学的东西还有很多,这里仅仅对自己最近研究js的一个记录,我相信以后能写出更好的将jquery框架的链接跟图片替换就可以看到效果了源代码如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or
jQuery自适应轮播图插件Swiper用法示例

本文实例讲述了jQuery自适应轮播图插件Swiper用法.分享给大家供大家参考,具体如下: 运行效果截图如下: 示例代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca
jquery实现的简单轮播图功能【适合新手】

本文实例讲述了jquery实现的轮播图功能.分享给大家供大家参考,具体如下: 前面介绍了原生js实现的轮播图,今天就试着用jquery做了个轮播图,方法都一样,但jquery实现却比js方便了许多 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="
jquery实现左右滑动式轮播图

本文实例为大家分享了jquery左右滑动轮播图的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.10.2.min.js"><
基于jQuery实现淡入淡出效果轮播图

用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: <div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="DSC01627.jpg"
jquery 实现轮播图详解及实例代码

轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较.轮播图的效果可以点击如下链接查看:http://sandbox.runjs.cn/show/t07kscph jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <hea
jquery实现左右无缝轮播图

本文实例为大家分享了jquery无缝轮播图的实现代码,供大家参考,具体内容如下 <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{p

jquery插件实现轮播图效果

相关推荐

随机推荐