html简单图片轮播的实现

2023-12-22 16:53| 来源: 网络整理| 查看: 265

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进

先来贴一发代码

在这个html的目录下有三个同级的文件夹，img中放图片，css和js分别存放这个网页的css文件和js文件，这里用到了jquery，记得引入顺序，jquery一定要放在其他js前面。

html代码很简单，不做过多解释。

看一下引入的css，init2.css

*{ margin: 0px ; padding: 0px ; } #layout{ width: 960px ; margin: 0 auto ; } #banner{ position: relative; overflow: hidden; width: 600px; height: 200px; border-radius: 10px ; border: 2px solid black; } #banner_img li{ float: left; list-style-type: none; } #index{ position: absolute; right: 8px ; bottom: 8px ; } #index li{ float: left; width: 16px ; height: 16px ; text-align: center; line-height: 16px ; border-radius: 5px ; border:1px solid #FF7300 ; background: white; list-style: none; margin-left: 8px ; cursor: pointer; } .clearfix:after{ content: "" ; height: 0px ; display: block; clear:both ; } .on { background:#FF7300 ; } css基本上和前面的html中的类对应，claerfix来清除浮动，on是代表轮播图片的索引中当前的正播放的图片的索引，其实就改个背景，这里的索引是后面动态加上去的，索引在html中看不到。主要思路就是把装图片的容器设置成overfl;hidden;

下面是一种比较简单的实现，利用jquery的fadeIn和fadeOut效果来实现。

//fadeIn and fadeOut var time ; var index = 1 ; var tolnum = 3 ; $(function(){ setInterval("showBanner("+tolnum+")",3000); }); function showBanner(n) { var ul = $("#banner_img") ; ul.children().fadeOut("slow") ; ul.children().eq(index).fadeIn("slow") ; index = index+1>n-1 ? 0 : index+1 ; } 恩，不知道为什么到最后一张图片的时候会产生没有淡出的bug，不太懂，请大家指教。

第二种方法是利用jquery的animation来实现margin属性的过渡。

init(); function init() { $(function(){ var index = 0 ; var adTime ; var len = $("#banner_img li").length ; addIndex(len) ; var bannerLi = $("#index li"); //handle index $("#index li").mouseover(function() { index = $("#index li").index(this) ; showImgs(index) ; }); //toggleInterval $("#banner").hover(function(){ clearInterval(adTimer); },function(){ adTimer=setInterval(function(){ //alert(index) ; showImgs(index); index++; if(index==len){ index=0; } },2000) }).trigger('mouseleave'); }); } //auto add index function addIndex(n) { var ul = $("") ; for(var i=1;i

【本文地址】

公司简介

联系我们