美文网首页
jQuery的无缝滚动和幻灯片

jQuery的无缝滚动和幻灯片

作者: Forever_f59e | 来源:发表于2018-12-12 13:53 被阅读0次

    1.html代码：

      <div class="header4">
    <div class="e">
        <div class="slide fl">
            <ul class="slide_pics">
                <li><a href=""><img src="img/yagao1.png" alt="幻灯片" /></a></li>
                <li><a href=""><img src="img/衣服.jpg" alt="幻灯片" width="218px" height="336px" /></a></li>
            </ul>
        <ul class="points">
            <!-- 动态创建小圆点
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li> -->
            </ul>
        </div>
        <div class="slide1">
            <ul class="slide_pics1">
                <li><a href="#"><img src="img/cent1.jpg"></a></li>
                <li><a href="#"><img src="img/cent2.jpg"></a></li>
            </ul>
            <ul class="points1">
                <!-- <li class="active1"><a href="#"></a></li>
                <li><a href="#"></a></li> -->
            </ul>
        </div>
        <div class="e2">        
            <div class="e3"><img src="img/头像.png"><p class="e31">立刻登陆,立刻省钱</p>
                <a href="E:\html文件夹\denglu.html" target="_blank"><span class="e32">用户登陆</span></a>
                <a href="zhuce.html" target="_blank"><span class="e33">新用户注册</span></a>
                </div>
            <div class="e4"><div class="e5"><img src="img/二维码.png"></div>
            <img src="img/二维码1.png">
        </div>
        </div>
    </div>
</div>

    2.css样式:

                .header4{
        width: 100%;
        height: 340px;
        background-color: #4074da;
        position: relative;
    }
    .e{
        width: 1190px;
        height: 340px;
        margin:0 auto;
        background-color: white;
    }
    .slide{
        width: 220px;
        height: 336px;
        position: relative;/* 父容器要设置定位，才能让子元素相对父容器定位 */
        overflow:hidden;
        float:left;
    }
    .slide .slide_pics{
        width: 220px;
        height: 336px;
        left:0;
        top:0;
        position:relative;
    }
    .slide .slide_pics li{
        width: 220px;
        height: 336px;
        left:0;
        top:0;
        position:absolute;
    }
    .slide ul{
        list-style: none;
    }
    .slide1{
        width: 750px;
        height: 340px;
        background-color: red;
        float:left;
        overflow: hidden;
        position: absolute;
        left: 577px;
        top: 0;
        float: left;
    }
    .slide1 .slide_pics1{
        width: 750px;
        height: 340px;
        left:0;
        top:0;
        position:relative;
        }
    .slide1 .slide_pics1 li{
        width: 750px;
        height: 340px;
        left:0;
        top:0;

        position:absolute;
    }
    .slide1 ul{
        list-style: none;
    }
    .points1{
        position: absolute;/* 块元素默认宽度为父宽度的100%，定位之后就变成行内块了，它不能继承父的宽度，如果没有设置宽高，就由内容决定，所以也必须给它一个宽度 */
        width: 100%;
        height: 5px;
        /*background-color: red;*/
        left: 0;
        bottom: 9px;
        text-align: center;/* 行内块的居中方式 */
        font-size: 0px;/* 去掉行内块间隙，它引起小圆点没有挨紧，并且向下超出高度范围 */
    }
    .points1 li{
        width: 11px;
        height: 11px;

        display: inline-block;
        background-color: #9f9f9f;
        margin: 0 5px;
        border-radius: 50%;/* 设置圆角，优雅降级，更好效果请升级浏览器，不兼容IE */
    }
    .points1 .active1{

        background-color: black;
    }
    .points{
        position: absolute;/* 块元素默认宽度为父宽度的100%，定位之后就变成行内块了，它不能继承父的宽度，如果没有设置宽高，就由内容决定，所以也必须给它一个宽度 */
        width: 100%;
        height: 5px;
        /*background-color: red;*/
        left: 0;
        bottom: 9px;
        text-align: center;/* 行内块的居中方式 */
        font-size: 0px;/* 去掉行内块间隙，它引起小圆点没有挨紧，并且向下超出高度范围 */
    }
    .points li{
        width: 11px;
        height: 11px;
        display: inline-block;
        background-color: #9f9f9f;
        margin: 0 5px;
        border-radius: 50%;/* 设置圆角，优雅降级，更好效果请升级浏览器，不兼容IE */
    }
    .points .active{
        background-color: black;
    }

    js代码:

        $(function(){
var $li = $('.slide_pics li');
var len = $li.length;//4张
// var $prev = $('.prev');//左按钮
// var $next = $('.next');//右按钮
var nextli = 0;//将要运动过来的li
var nowli = 0;//当前要离开的li
var timer = null;


//除第一个li，都定位到右侧
$li.not(':first').css({left:600});

//动态创建小圆点
$li.each(function(index){
    //创建li
    var $sli = $('<li></li>');
    //第一个li添加选中样式
    if(index == 0){
        $sli.addClass('active');
    }
    //将小圆点的li添加到ul中
    $sli.appendTo('.points');
})

$points = $('.points li');
// alert($points.length);//4个小圆点

//小圆点的点击事件
$points.click(function() {
    nextli = $(this).index();
    //当点击当前张的小圆点时，不做任何操作，防止跳变的Bug
    if(nextli == nowli){
        return;
    }
    move();
    $(this).addClass('active').siblings().removeClass('active');
});

//左按钮的点击事件
// $prev.click(function() {
//  nextli--;
//  move();
//  //改变圆点样式
//  $points.eq(nextli).addClass('active').siblings().removeClass('active');
// });

// //右按钮的点击事件
// $next.click(function() {
//  nextli++;
//  move();
//  //改变圆点样式
//  $points.eq(nextli).addClass('active').siblings().removeClass('active');
// });

//针对外层的slide做鼠标进入和离开事件，因为鼠标指针有可能进入到左右翻页和小圆点的范围
//mouseenter使鼠标进入子元素也能清除定时器
$('.slide').mouseenter(function() {
    clearInterval(timer);
});
$('.slide').mouseleave(function() {
    timer = setInterval(autoplay, 3000);
});

//定时器循环自动播放
timer = setInterval(autoplay, 3000);

//自动播放的逻辑与点击下一张是相同的
function autoplay(){
    nextli++;
    move();
    //改变圆点样式
    $points.eq(nextli).addClass('active').siblings().removeClass('active');
}

function move(){
    //向右走到第一张，再继续走时
    if(nextli < 0){
        nextli = len - 1;//将要来的是最后一张
        nowli = 0;//要离开的是第一张
        $li.eq(nextli).css({left:-600});//把最后一张定位到左侧，准备进入
        $li.eq(nowli).stop().animate({left: 600});//离开的第一张走到右侧
        $li.eq(nextli).stop().animate({left: 0});//马上要进来的最后一张走进来
        nowli = nextli;//要离开的赋值为刚进入的最后一张
        return;//下边是正常情况的，不执行，直接返回
    }
    //向左走到最后一张，再继续走时
    if(nextli > len - 1){
        nextli = 0;//将要来的是第一张
        nowli = len - 1;//要离开的是最后一张
        $li.eq(nextli).css({left:600});//把第一张定位到右侧，准备进入
        $li.eq(nowli).stop().animate({left: -600});//离开的最后一张走到左侧
        $li.eq(nextli).stop().animate({left: 0});//马上要进来的第一张走进来
        nowli = nextli;//要离开的赋值为刚进入的第一张
        return;//下边是正常情况的，不执行，直接返回
    }
    
    if(nextli > nowli){
        //马上要进来的这张瞬间移动到右边
        $li.eq(nextli).css({left:220});
        //当前这张离开
        $li.eq(nowli).stop().animate({left: -220});
    }else{
        //马上要进来的这张瞬间移动到左边
        $li.eq(nextli).css({left:-220});
        //当前这张离开
        $li.eq(nowli).stop().animate({left: 220});
    }
    //马上要进来的这张走到0的位置
    $li.eq(nextli).stop().animate({left: 0});
    nowli = nextli;
}
})
$(function(){
var $li = $('.slide_pics1 li');
var len = $li.length;//4张
// var $prev = $('.prev');//左按钮
// var $next = $('.next');//右按钮
var nextli = 0;//将要运动过来的li
var nowli = 0;//当前要离开的li
var timer = null;


//除第一个li，都定位到右侧
$li.not(':first').css({left:750});

//动态创建小圆点
$li.each(function(index){
    //创建li
    var $sli = $('<li></li>');
    //第一个li添加选中样式
    if(index == 0){
        $sli.addClass('active1');
    }
    //将小圆点的li添加到ul中
    $sli.appendTo('.points1');
})

$points1 = $('.points1 li');
// alert($points1.length);//4个小圆点

//小圆点的点击事件
$points1.click(function() {
    nextli = $(this).index();
    //当点击当前张的小圆点时，不做任何操作，防止跳变的Bug
    if(nextli == nowli){
        return;
    }
    move();
    $(this).addClass('active1').siblings().removeClass('active1');
});

// //左按钮的点击事件
// $prev.click(function() {
//  nextli--;
//  move();
//  //改变圆点样式
//  $points1.eq(nextli).addClass('active1').siblings().removeClass('active1');
// });

// //右按钮的点击事件
// $next.click(function() {
//  nextli++;
//  move();
//  //改变圆点样式
//  $points1.eq(nextli).addClass('active1').siblings().removeClass('active1');
// });

//针对外层的slide做鼠标进入和离开事件，因为鼠标指针有可能进入到左右翻页和小圆点的范围
//mouseenter使鼠标进入子元素也能清除定时器
$('.slide1').mouseenter(function() {
    clearInterval(timer);
});
$('.slide1').mouseleave(function() {
    timer = setInterval(autoplay, 3000);
});

//定时器循环自动播放
timer = setInterval(autoplay, 3000);

//自动播放的逻辑与点击下一张是相同的
function autoplay(){
    nextli++;
    move();
    //改变圆点样式
    $points1.eq(nextli).addClass('active1').siblings().removeClass('active1');
}

function move(){
    //向右走到第一张，再继续走时
    if(nextli < 0){
        nextli = len - 1;//将要来的是最后一张
        nowli = 0;//要离开的是第一张
        $li.eq(nextli).css({left:-750});//把最后一张定位到左侧，准备进入
        $li.eq(nowli).stop().animate({left: 750});//离开的第一张走到右侧
        $li.eq(nextli).stop().animate({left: 0});//马上要进来的最后一张走进来
        nowli = nextli;//要离开的赋值为刚进入的最后一张
        return;//下边是正常情况的，不执行，直接返回
    }
    //向左走到最后一张，再继续走时
    if(nextli > len - 1){
        nextli = 0;//将要来的是第一张
        nowli = len - 1;//要离开的是最后一张
        $li.eq(nextli).css({left:600});//把第一张定位到右侧，准备进入
        $li.eq(nowli).stop().animate({left: -750});//离开的最后一张走到左侧
        $li.eq(nextli).stop().animate({left: 0});//马上要进来的第一张走进来
        nowli = nextli;//要离开的赋值为刚进入的第一张
        return;//下边是正常情况的，不执行，直接返回
    }
    
    if(nextli > nowli){
        //马上要进来的这张瞬间移动到右边
        $li.eq(nextli).css({left:750});
        //当前这张离开
        $li.eq(nowli).stop().animate({left: -750});
    }else{
        //马上要进来的这张瞬间移动到左边
        $li.eq(nextli).css({left:-750});
        //当前这张离开
        $li.eq(nowli).stop().animate({left: 750});
    }
    //马上要进来的这张走到0的位置
    $li.eq(nextli).stop().animate({left: 0});
    nowli = nextli;
}
})

    相关文章

      网友评论

          本文标题：jQuery的无缝滚动和幻灯片

          本文链接：https://www.haomeiwen.com/subject/lcguhqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|jQuery的无缝滚动和幻灯片|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！