jquery轮播图详解,40行代码即可简单解决。

我在两个月以前没有接触过html,css,jquery,javascript。今天我却在这里分享一篇技术贴,可能在技术大牛面前我的文章漏洞百出,也请斧正。

可以看出来,无论是div+css布局还是jquery其实真的很简单,只要不停的练习就会有很大进步。每天150行代码,会帮助我们走的更远。对于编程对于脚本语言,我们这样的学生娃没有和比人一样初中,高中就开始研究,要想走在时代的前沿需要怎样的努力和毅力,是我们一类人需要思考的方向。

下面解释下焦点图,焦点图使用范围非常广,banner和animation很容易抓住用户的眼球,所以做好这个也就是一个网页一个app的关键之一。

焦点图实现的方式很多种,可以是css的jjq的甚至其他框架的,jq最近很火这里以此举例。

下面进一段html代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>横向滑动的悬停焦点图全代码</title>
<link href="css/slidepic8.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script>

</head>

<body>
<div class="slideBox">
    <ul>
    <li><img src="image/Lslide3.jpg" alt="" width="300" height="480"/></li>
    <li><img src="image/Lslide4.jpg" alt="" width="300" height="480"/></li>
    <li><img src="image/Lslide5.jpg" alt="" width="300" height="480"/></li>
    <li><img src="image/Lslide6.jpg" alt="" width="300" height="480"/></li>
    <li><img src="image/Lslide2.jpg" alt="" width="300" height="480"/></li>
    <li><img src="image/Lslide1.jpg" alt="" width="300" height="480"/></li>
    </ul>
    <div class="spanBox">
    <span class="active">q</span>
    <span>a</span>
    <span>z</span>
    <span>w</span>
    <span>s</span>
    <span>x</span>
    </div>
    <div class="prev"><img src="image/left_arrow.jpg" width="15" height="50" alt=""/></div>
    <div class="next"><img src="image/right_arrow.jpg" width="15" height="50" alt=""/></div>
</div>
</body>
</html>

上面是html代码,代码的结构比较简单,这里解释一下,ul标签是要左右移动的,所以怎么设置position属性?,然后span标签是提供索引和下标控制符,绑定动画的。prev和next类名的div标签是提供左右按钮,电机可以实现左右滑动。

下面附上css代码:

@charset "utf-8";
/* CSS Document */
*{
    padding:0px;
    border:0px;
    margin:0px;
}
ul {
    list-style:none;
}
.slideBox {
    margin:50px auto;
    width:300px;
    height:480px;
    box-shadow:2px 2px 10px #C38DD4;
    border-radius:20px;
    position:relative;
    overflow:hidden;
}
.slideBox ul {
    position:relative;
    width:2000px;}
.slideBox ul li {
    float:left;
    width:300px;
    height:480px;
    position:relative;

}
.spanBox {
    position:absolute;
    width:300px;
    height:20px;
    bottom:10px;
    left:80px;
}
.spanBox span {
    width:18px;
    height:18px;
    margin-left:5px;
    background-color:rgba(201,178,207,1.00);
    float:left;
    line-height:16px;
    text-align:center;
    text-shadow:2px 2px 2px #C5EBF0;
    font-family:cabin-sketch;
    font-size:15px;
}
.slideBox .spanBox .active {
    background-color:rgba(155,83,244,0.79);
    border:solid 1px #BEEBEC;
    border-radius:4px;
}
.prev {
    position:absolute;
    left:0px;
    top:320px;
    float:left;
    border-left:solid 1px rgba(251,245,246,1.00);
    opacity:0.5;
}
.next {
    width:15px;
    height:50px;
    position:absolute;
    right:0px;
    top:320px;
    float:right;
    border-right:solid 1px rgba(245,237,237,1.00);
    opacity:0.5
}

我是链接的外部css文件,然后请注意一下各种属性和值。电脑端的话,html是相当于文本结构常说的dom,解码的时候配合css属性进行渲染,具体的属性请大家自己测试,在四种常用的浏览器测试一下css属性,我这里就偷懒了没有加上-webkit-,-moz-等等,大家如果需要用可以hack。

下面附上jquery代码:

<script type="text/javascript">
$(document).ready(function(){
     var slideBox = $(".slideBox");
     var ul = slideBox.find("ul");
     var oneWidth = slideBox.find("ul li").eq(0).width();
     var number = slideBox.find(".spanBox span");            //注意分号 和逗号的用法
     var timer = null;
     var sw = 0;
     //每个span绑定click事件,完成切换颜色和动画,以及读取参数值
     number.on("click",function (){
     $(this).addClass("active").siblings("span").removeClass("active");
     sw=$(this).index();
     ul.animate({
            "right":oneWidth*sw,    //ul标签的动画为向左移动;
               });
     });
     //左右按钮的控制效果
     $(".next").stop(true,true).click(function (){
         sw++;
         if(sw==number.length){sw=0};
         number.eq(sw).trigger("click");
         });
    $(".prev").stop(true,true).click(function (){
        sw--;
        if(sw==number.length){sw=0};
        number.eq(sw).trigger("click");
        });
    //定时器的使用,自动开始
    timer = setInterval(function (){
        sw++;
        if(sw==number.length){sw=0};
        number.eq(sw).trigger("click");
        },2000);
    //hover事件完成悬停和,左右图标的动画效果
    slideBox.hover(function(){
        $(".next,.prev").animate({
            "opacity":1,
            },200);
        clearInterval(timer);
        },function(){
            $(".next,.prev").animate({
                "opacity":0.5,
                },500);
        timer = setInterval(function (){
        sw++;
        if(sw==number.length){sw=0};
        number.eq(sw).trigger("click");
        },2000);
            })

})
</script>

在代码中也分为几个部分,让大家清晰明了。其实很简单就是几个参数,几个函数,整个过程就click事件,hover时间,animate方法,setInterval()就可以轻松搞定。在网上看到很多朋友也有分享,后面我会附上很多的html5的新功能,还有w3c标准以及css3的各种新鲜玩意。大家一起交流学习,共同进步。

我是自学er,也没有啥子技术,只是爱好,兴趣使然,可以一步一步的走进去,发现web前端的更深层的东西,每天都在瞻仰大山,攀爬中,早晚有一天会登上高山,然后创造高山。

时间: 2024-11-03 05:32:14

jquery轮播图详解,40行代码即可简单解决。的相关文章

JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图

JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); var $banner_ul = $('.banner-img'); var $btn = $('.banner-btn'); var $btn_a = $btn.find('a') var v_width = $banner.width(); var page = 1; var timer = null;

jQuery轮播图鼠标移入停止,移出播放,点击小横条切换图片

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>banner</title> 7 </head> 8 <style> 9 .banner { 10 min-width: 1200px; 11 min-height: 350px; 12 position: r

《第31天:JQuery - 轮播图》

源码下载地址:链接:https://pan.baidu.com/s/16K9I... 提取码:0ua2 写这篇文章,当做是对自已这一天的一个总结.写轮播图要准备的东西:三张尺寸大小一样的图片.分为三个模块:HTML模块,CSS模块,Jquery模块 HTML模块: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQ轮播图</title> &l

jquery轮播图

咱们今天还是轮播图,今天说jquery的轮播图! 首先,要有个插件: 请无视Zepto插件,他没起到任何作用! 就是这两个啦! 然后就是代码! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--引入插件--> <script src="../上月插件/jquery-3.1.1.min.js&q

Jquery 轮播图简易框架

=====================基本结构===================== <div class="carousel" style="width: 800px;height: 378px;"> <ul class="carousel-imgs"> <li> <a href="#"><img src="picture.jpg" alt=&

支持触屏的jQuery轮播图插件

移动轮播图我看到两类, 一款是无线天猫的m.tmall.com和携程,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似天猫.不过功能上简单点,只实现支持触屏和无缝轮播. 1.页面代码 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8"> 3 <head> 4 <meta charset="U

首页大屏广告效果 jquery轮播图淡入淡出

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery个性化图片轮播效果</title> <script src="js/jquery.js" type="text/javascript"></script> <link rel=

jQuery轮播图函数封装

函数调用的时候,传递四个必要的参数就行了.参数1:要运动的ul:参数2:左边按钮:参数3:右边按钮:参数4:运动速度:(可选,默认3s) 代码如下: html部分: <div class="div1">  <ul class="ul1">      <li>1111111111</li>         <li>2222222222</li>         <li>33333333

最简单jquery轮播图效果

样式部分 <style type="text/css"> *{margin:0;padding:0;} ul,ol{list-style:none;} #box{width:420px;height:630px;margin:100px auto;position:relative;overflow:hidden;} #box li{height:630px;width:420px;} #box ol{position:absolute;z-index:99;right:1