基于jQuery实现淡入淡出效果轮播图

用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div。

html结构如下:

<div id="container">
 <ul class="pic">
 <li><a href="javascript:;"><img src="DSC01627.jpg" alt="pic1"></a></li>
 <li><a href="javascript:;"><img src="DSC01628.jpg" alt="pic2"></a></li>
 <li><a href="javascript:;"><img src="DSC02637.jpg" alt="pic3"></a></li>
 </ul>
 <ul id="position">
 <li class="cur"></li>
 <li class=""></li>
 <li class=""></li>
 </ul>
 <a href="javascript:;" id="prev" class="arrow"><</a>
 <a href="javascript:;" id="next" class="arrow">></a>

 </div>

css设置:

*{
 margin: 0;
 padding: 0;
 text-decoration: none;
 }
 ul{
 list-style: none;
 }
 #container{
 position: relative;
 width: 400px;
 height: 200px;
 margin: 20px auto;
 }

 .pic li {
 position: absolute;
 top: 0;
 left: 0;
 display: none;
 }
 .pic li img {
 width: 400px;
 height: 200px;
 }
 #position{
 position: absolute;
 bottom: 0;
 right:0;
 margin: 0;
 background: #000;
 opacity: 0.4;
 width: 400px;
 text-align: center;
 }
 #position li{
 width: 10px;
 height: 10px;
 margin:0 2px;
 display: inline-block;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 background-color: #afafaf;
 }
 #position .cur{
 background-color: #ff0000;
 }

 .arrow {
 cursor: pointer;
 display: none;
 line-height: 39px;
 text-align: center;
 font-size: 36px;
 font-weight: bold;
 width: 40px;
 height: 40px;
 position: absolute;
 z-index: 2;
 top: 50%;
 margin-top: -20px; /*width的一半*/
 background-color: RGBA(0,0,0,.3);
 color: #fff;
 }
 .arrow:hover {
 background-color: RGBA(0,0,0,.7);
 }
 #container:hover .arrow {
 display: block;
 }
 #prev {
 left: 20px;
 }
 #next {
 right: 20px;
 }

JavaScript代码:

$(function(){
 //第一张显示
 $(".pic li").eq(0).show();
 //鼠标滑过手动切换,淡入淡出
 $("#position li").mouseover(function() {
 $(this).addClass('cur').siblings().removeClass("cur");
 var index = $(this).index();
 i = index;//不加这句有个bug,鼠标移出小圆点后,自动轮播不是小圆点的后一个
 // $(".pic li").eq(index).show().siblings().hide();
 $(".pic li").eq(index).fadeIn(500).siblings().fadeOut(500);
 });
 //自动轮播
 var i=0;
 var timer=setInterval(play,2000);
 //向右切换
 var play=function(){
 i++;
 i = i > 2 ? 0 : i ;
 $("#position li").eq(i).addClass('cur').siblings().removeClass("cur");
 $(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500);
 }
 //向左切换
 var playLeft=function(){
 i--;
 i = i < 0 ? 2 : i ;
 $("#position li").eq(i).addClass('cur').siblings().removeClass("cur");
 $(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500);
 }
 //鼠标移入移出效果
 $("#container").hover(function() {
 clearInterval(timer);
 }, function() {
 timer=setInterval(play,2000);
 });
 //左右点击切换
 $("#prev").click(function(){
 playLeft();
 })
 $("#next").click(function(){
 play();
 })
 })

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

(0)

相关推荐

  • jquery实现左右轮播图效果

    我们经常看到购物网站上首页有轮播图,比如某东某京 如图我们打开网页就看到京东的轮播图 接下来,这个小案例就是要介绍如何实现这种效果,即这张轮播图上所有的事件. 首先 我们看到轮播图上的有1.左右的小按钮(图片会随着左右的点击移动) 2**重点内容.还有位于中间的小圆点(点击小圆点会跳转到那个图片) 3重点内容**轮播图会自己向左滑动(里面有一个定时器自动播放) 分析完之后就是我们写代码(这个是仿京东的轮播图) HTML的内容 代码片 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多

  • 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无缝轮播图的实现代码,供大家参考,具体内容如下 <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无缝轮播图代码

    本文实例为大家分享了jQuery无缝轮播图的具体代码,供大家参考,具体内容如下 html 代码 <div class="banner"> <ul class="img"> <li><a href="#"><img src="image/1.jpg"></a></li> <li><a href="#">

  • jQuery插件slides实现无缝轮播图特效

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

  • 利用jquery写的左右轮播图特效

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

  • 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 实现轮播图详解及实例代码

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

  • 原生Javascript和jQuery做轮播图简单例子

    接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较. jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮

  • jQuery按需加载轮播图(web前端性能优化)

    引言 关于幻灯轮播图,想必大家都不陌生,尤其是基于 jQuery 的,插件.代码网上一搜一大堆,但是真正符合自己需求的几乎没有,所以我要打造一个符合自身需求,经得起广大网民考验的 jQuery 轮播图! 思路 为什么说网上其他一些轮播图不符合我的要求?我的需求又是什么呢? 现在网上可以找到的多数幻灯轮播图的 jQuery 插件的作法是,先把图片和链接的 HTML 写好,然后控制隐藏和显示来轮流展示当前的幻灯图片.但是对用户而言,我们始终只是看到当前的一张图片,那其他几张隐藏的图片为什么要事先加载

随机推荐